Die Top 25 Webdesign Trends im Jahr 2023

Um bei Websites die Illusionen zu vermitteln, nicht endlos scrollen zu müssen, werden 2023 weiterhin verschiedene Scroll Effekte verwendet. Auf der Website michalsnik.github.io/aos werden die unterschiedlichen Möglichkeiten gezeigt. Man scrollt nicht wie gewohnt eine Website von oben nach unten durch, sondern die Seite baut sich laufend auf. Das heißt Inhalte werden mit verschiedenen Effekten nach und nach eingeblendet.

Ein weiterer Trendsetter im neuen Jahr ist das vertikale Scroll Erlebnis. Der User ist es zwar grundstätzlich gewohnt, sich vertikal (also von oben nach unten) durch Websites zu bewegen, aber warum nicht mal andere Wege gehen? Horizontales Scrolling kommt gerne zum Einsatz, um Inhalte darzustellen.

Die Jubiläumsseite eines Architektenbüros macht genau das – der Endnutzer bekommt den Eindruck sich auf einer Reise durch die Vergangenheit zu befinden und scrollt so horizontal durch die Seite. 60.belangersalach.ca

Aus Usability-Sicht sollte aber das horizontale Scrollen in Funktion und Optik dem vertikalen Scrollen in nichts nachstehen. Auch sollte genau überlegt werden, in welchen Bereichen es eingesetzt wird und ob es dort auch Sinn macht. Bei visuellen Inhalten (Bildergalerie, Animationen, …) bietet sich horizontales Scrolling gut an. Bei Textlichen Inhalten eher weniger.

Diese Regel wird schon viele Jahre verwendet – anfangs in der Malerei, später auch in der Fotografie. Und jetzt hat es die Regel ins Webdesign geschafft: Das Design wird hierbei in 9 gleich große Kästchen unterteilt.

Visuelle Elemente sollen in etwa drei Kästchen einnehmen und sich in einem Drittel des Layouts befinden. An den Knotenpunkten wirken die wichtige Botschaften und Call-To-Actions besonders gut.

Auch Broken Grid Layouts unterliegen oft dieser Drittel Regel, auch wenn diese auf dem ersten Blick nicht sichtbar ist.

Aber wie in der Einleitung erwähnt, einem Trend folgt immer ein Gegentrend. Und das trifft genau hier zu. Während zB. fertige (gratis oder kostenpflichtige) Templates immer nach „Schema F“ funktionieren und sich an bestimmte Raster orientieren (was natürlich absolut nichts negatives ist), werden 2023 den asymmetrischen Layouts immer mehr Bedeutung zugeschrieben. Natürlich benutzt der Webdesigner auch hier ein scheinbar unsichtbares Grid (Raster), allerdings dient dies lediglich dazu um die Inhalte ausbalanciert darstellen zu können.

Anmerkung: Nicht für jeden Kunden ist eine Website mit asymmetrischem Layout passend. Sie sind meist ganz individuell für ein Produkt oder Dienstleistung konzipiert.

Geometrische Formen werden benutzt, wenn Themen wie Verlässlichkeit und Verantwortungsbewusstsein im Vordergrund stehen.

Der Trend zu natürlicheren, menschlich erzeugten Formen befasst sich hierbei mit dem Gegenteil. Webseiten werden durch organische Formen gewisse bequeme und gemütliche Akzente verliehen.

Der natürliche Flair wird durch verschiedenste spontan wirkende Formen erzielt und erzeugt Bewegung in sonst eher statisch aussehenden Auftritten.

Die runden, bunten und freundlichen Grafiken sind ein Hauptbestandteil der Webseite indofolio.com

Im Jahr 2023 werden Webdesigner weiter auf Farbverläufe setzen. Farben und Farbverläufe verleihen dem Webdesign Tiefe und Ausdruck. Wenn das Layout wenige Bilder vorsieht, können Farbverläufe bis zu einem gewissen Grad Abhilfe schaffen. Nutzer spricht ein Farbverlauf jedenfalls an. Der Trend der Farbverläufe bleibt, wie auch im Jahr davor, eher bei verwandten Farben, etwa von Türkis zu Blau, oder von Rot zu Lila. Interessant sind auch sogenannte Farb-in-Farb-Verläufe, bei denen lediglich der Gradient (hell-dunkel) verändert wird. Das Ergebnis hierbei ist mehr Dynamik und Tiefe.

Auch gesättigte, laute Farben können dabei helfen einen Tiefeneffekt zu erzielen. Die bunten und auffälligen Farben stehen im Gegenteil zu den, in den letzten Jahren massenweise benutzten, zurückhaltend dezenteren Farben. Es wird sich 2023 weiterhin etwas getraut, um Webauftritten mehr Aufmerksamkeit zu verleihen. Allerdings liegt das Augenmerk auf eine (!!!) knallige Farbe.

Naturfarben und Pastelltöne sind auch weiterhin stark präsent. Webseiten mit hellen Farben strahlen etwas beruhigendes, unaufgeregtes aus. Wenn es zum Thema passt (zB. Ruhe, Natur, Wellness,…) macht man hier bestimmt nichts verkehrt.

uicons hat sich beispielsweise an stimmigen Farbverläufen ihrer Corporate Identity bedient.

Was ist der Duotone-Effekt? Jeder kennt monochrome Bilder, sprich es besteht aus einer Farbe mit verschiedenen Abstufungen – zum Beispiel ein Graustufenbild. 2023 kommt eine weitere Farbe dazu – man spricht dabei vom Duotone-Effekt – Bilder mit 2 Farbräumen.

Dieser Effekt wird gerne großflächig eingesetzt und erzeugt einen großen Wiedererkennungswert, Emotionalität und wirkt modern.

Die Typografie macht die Webseite einzigartig. Dabei kann Schrift und sowohl als Marke, als auch als Stilmittel funktionieren. Zumindest wird die Typografie 2023 ebenfalls wieder ein Trendsetter.

Beginnen wir mit der serifen Schrift, wie schon in den Jahren zuvor, werden Serifenschriften im Webdesign weiterhin gern benutzt und machen Printmedien damit zumindest optisch aber in digitaler Form Konkurrenz. Dadurch, dass Serifenschriften für dekorative Zwecke und für das Hervorheben von Texten weitaus besser geeignet sind, als serifenlose Schriftarten, werden sie weiterhin gerne für Seitenelemente wie Überschriften eingesetzt.

Weiters ist ein Trend in der Verwendung von fetter und großer Schrift zu erkennen. „Bold Fonts“ sind 2023 im Kommen. Durch den Einsatz von solch markanter Typografie kann Aufmerksamkeit erregt und ästhetisch wertvolle Ergebnisse erreicht werden. In Kombination mit „Storytelling“ als textliches und inhaltliches Stilmittel entstehen einzigartige Designs und Websites.

Ein Trend, welcher immer mehr im Kommen ist, sind die beweglichen Schriften und Texte. Was in den 2000ern mit einer simplen Laufschrift von Bildschirmrand zu Bildschirmrand begann, verschwand nach einiger Zeit wieder in der Versenkung.

Aaaaaber 2023 folgt nun die Wiedergeburt der animierten Schrift, und die bringt die verschiedensten Effekte. Fade-in & Fade-out, das war einmal. 2023 werden Schriften und Texte perfekt animiert. vitaarchitecture.com zeigt vor wie es gehen könnte.

Bei Variablen Fonts werden die einzelnen Schriftschnitte nicht in eigene Dateien gespeichert sondern mit verschiedenen Achsen festgelegt. So kann die Stichstärke, die Schriftbreite, die Neigung, die optische Größe und die Kursive flexibel verändert werden. Hier sind der Kreativität aber keine Grenzen gesetzt. Es können auch Werte für die Serifenform, den Kontrast oder Konturen vergeben werden. Variable Fonts haben auch den Vorteil, dass sie sich positiv auf die Ladezeit auswirken.

Fixe Navigationen, welche auch beim Hinunterscrollen sichtbar bleiben, sind immer häufiger vertreten. Da Menüpunkte immer erreichbar sind, haben fixe Navigationen einen großen Vorteil im Bereich der Usability. Navigationspunkte und Unterseiten sind immer schnell verfügbar, ohne lange suchen oder scrollen zu müssen. Dadurch sind sie bei Benutzern beliebt und verringern deren Frustration bei der Bedienung der Website.

Andererseits nehmen sie Platz ein und können gestalterisch als unvorteilhaft angesehen werden, wenn z.B. das Design nicht darauf ausgelegt ist.

Die Seite unseres Kunden rr-tueren.at ist mit einer fixen Navigation programmiert worden.