Unser Überblick über die Webdesign-Trends 2022: mehrschichtige Bilder, kräftige Farben, kinetische Typografie, Scrollytelling, horizontales Scrollen und Hintergrundvideo, mit Webflow-Tipps.
Update, Oktober 2026: Seitdem hat sich einiges getan. Den neueren Ansatz findest du in The Top Web Design Trends for 2023. Der Rest dieses Beitrags bleibt als Dokument dessen stehen, wie wir es damals gemacht haben.
Jedes Jahr tauchen ein paar Webdesign-Trends immer wieder in unseren Projektbriefings auf. Das sind die Trends, die wir 2022 gesehen und in Webflow umgesetzt haben, von geschichteten Bildwelten und kräftigen Farben über bewegte Schrift bis hin zu Scrollytelling und seitlichem Scrollen.
Mehrschichtige Bildwelten
Wir haben das bei einigen eigenen Webdesigns von Milk Moon Studio ausprobiert, zum Beispiel bei der Swellendam Heritage Society, und festgestellt, dass Nutzerinnen und Nutzer dadurch mehr Zeit damit verbringen, eine Website zu erkunden. Für die Heritage Society haben wir CSS-Blend-Modes mit einer Combo-Klasse in Webflow eingesetzt. Dazu haben wir einen kurzen Beitrag über CSS-Blend-Modes und Combo-Klassen geschrieben. Webflow unterstützt Blend-Modes inzwischen auch beim Übereinanderlegen von Elementen, allerdings noch etwas eingeschränkt. Wir haben festgestellt, dass die integrierte Funktion vorerst zwar reicht, manche Webflow-Profis aber weiterhin die Freiheit unserer Combo-Klassen-Methode bevorzugen.
Kräftige Kontrastfarben
Gibt es hier Millennials? Dann ist das hier etwas für euch!
Farbe ist ein grundlegendes Werkzeug, das die Aufmerksamkeit der Nutzer lenkt und zugleich Emotionen weckt.
Dieser Stil richtet sich meist an eine bestimmte Zielgruppe und hat sich zu einer lebendigen, knalligen Webdesign-Ästhetik entwickelt: mit Underground-Säureformen, Neon auf Schwarz, leuchtenden Kontrasten und Verläufen. Hier kommen wieder die großartigen Funktionen von Webflow ins Spiel. Das CMS bietet ein Farbfeld mit Farbwähler, Hex-Eingabe und mehr, und du kannst so viele Farbfelder anlegen, wie in dein CMS-Item passen. So kannst du Blogbeiträgen, Teamseiten oder E-Commerce-Artikeln mit wenigen Klicks passende oder kontrastierende Farben geben. Wer etwas mutiger ist, nutzt Skripte, die die Farbe aus einem Bild auslesen und in einem Element verwenden. Du kannst Beispiele hier finden oder auf stackoverflow.com danach suchen.
Verspieltheit und Nostalgie
Dieser Ansatz verlangt, das Tempo zu drosseln und durch Typografie und Bildsprache ein analoges Gefühl zu erzeugen: mit klassischen Bildfiltern, Retro-Schriften, Unschärfe, Körnung, Texturen, weichem Licht und Pastellfarben. Das sind nur einige Beispiele dafür, wie Webdesigner nahbare Erlebnisse gestalten.
Typografie-Animation / kinetische Typografie
Bewegter Text kann Aufmerksamkeit wecken, eine Stimmung setzen, wichtige Passagen hervorheben und den Blick der Nutzer über eine Seite führen. Wenn du Schrift in Webflow animierst, hilft dir unser visueller Leitfaden zu Easing-Funktionen in Webflow bei der Wahl der passenden Bewegungskurve. Dieser Trend ist übrigens schon sehr alt: Er reicht bis in die 1950er-Jahre zurück, als Spielfilme begannen, statt statischem Text animierte Vorspanntitel zu verwenden.
Design für alle
Inklusives Design betrifft jeden Schritt im Webdesign-Prozess: von strategischen Entscheidungen über die Zielgruppe der Website über ihren Tonfall und die Personalisierung bis hin zur grafischen Sprache deiner Marke, die alle Geschlechter, Sichtweisen, Erfahrungen und Lebenssituationen berücksichtigen soll. Inklusives Design aus anderen Blickwinkeln zu betrachten heißt auch, verschiedene Beeinträchtigungen mitzudenken und die Website barriereärmer zu machen, etwas, das jedes Webflow-Studio anstreben sollte.
Noch ein Lob an Webflow: Die Plattform hat beim inklusiven Design große Fortschritte gemacht. Du kannst dein Projekt für verschiedene Formen der Farbfehlsichtigkeit in der Vorschau ansehen und erhältst Warnungen, wenn Elemente nicht genug Kontrast haben, wenn du eine Überschriftenebene übersprungen hast (was es Screenreadern erschwert, die Seite zu verstehen), bei fehlendem Alt-Text, bei nicht aussagekräftigen Links und vielem mehr.
Mehr zu Tonfall, Bildsprache und Co. findest du in Webflows kurzem Beitrag über inklusive Inhalte und bei Webflow University gibt es Tipps, wie du deine Website barriereärmer machst.
Scrollytelling
Eine immer beliebtere Möglichkeit, eine digitale Oberfläche voll auszuschöpfen und eine vielschichtige Geschichte zu erzählen.
Visuelle Effekte, die das Publikum fesseln wollen und ihm spannende Inhalte auf dem Silbertablett servieren. Scrollytelling wird auch „narrative Visualisierung“ genannt: eine Abfolge visueller Elemente, chronologisch geordnet, um Besuchern eine bestimmte Botschaft zu vermitteln.
Horizontales Scrollen
Ein seitliches Scroll-Layout kann zu überraschenden Wechselspielen zwischen Text und Bild führen.
Das gilt besonders für Portfolio-Websites, Kataloge, Karten und Ähnliches. Projekte entdecken, Städte erkunden und Online-Galerien besuchen macht mit seitlicher Navigation deutlich mehr Spaß. Richtig umgesetzt, kann horizontales Scrollen eine Website attraktiver, unterhaltsamer und einprägsamer machen, wie das NOVA+-Beispiel unten schön zeigt.
Hier müssen wir sagen, dass Webflow eine echte Zumutung sein kann, denn die Plattform mag kein seitliches Scrollen. Aber wer sagt, dass man sie nicht ein bisschen austricksen kann? Wir haben es für NOVA+ getan, es ist also durchaus machbar im Webflow-Design, wenn der Bedarf besteht. Sieh dir das NOVA+-Projekt an, in dem wir zwei verschiedene Methoden verwendet haben. Die erste richtet sich nach der Mausposition und scrollt nach links oder rechts, je nachdem, wo du mit dem Mauszeiger über den Abschnitt fährst. Die zweite zwingt dich, beim Scrollen nach unten durch den Abschnitt zu scrollen.
Hintergrundvideo
Was gibt es daran nicht zu mögen? Mit schnelleren Breitbandanschlüssen und dem Ausbau von 4G und 5G nahezu überall ist ein schönes Video, das hinter deinem Inhalt in Endlosschleife läuft, einfach sinnvoll. Wir haben sogar eine Anleitung dazu geschrieben, wie man Hintergrundvideos in CMS-Items in Webflow einbindet, etwas, das nicht von Haus aus unterstützt wird. Wirf also einen Blick auf unsere Anleitung zu CMS-gesteuerten Hintergrundvideos in Collection Lists, wenn dich das interessiert. Es gibt außerdem eine neuere Methode mit dem Custom Element, die wir in unserem Beitrag zu CMS-gesteuerten Hintergrundvideos mit dem Custom Element behandeln.
