Auch in diesem Jahr werde ich mich als Wahrsager versuchen und einen Ausblick auf die kommenden Trends im Webdesign für das Jahr 2022 wagen. Manches ist gleich geblieben, anderes wird stärker in den Fokus rücken. Eines jedoch ist klar: Reine Desktop-Designs wird es nicht mehr geben. 2022 wird sich einiges ändern. Vielfach wird das Webdesign etwas anspruchsvoller als es bisher der Fall war. Doch das ist das Schöne an unserem Beruf. Wir dürfen immer mehr dazulernen und uns weiterbilden. Damit du das frühzeitig tun kannst, habe ich diesen Artikel für dich geschrieben.
Von der überzeugenden Live-Animation bis hin zu der Typografie der 80er und 90er-Jahre beeindruckt der neue visuelle Stil im Internet. Der Ausblick auf die kommenden acht Trends präsentiert die digitale Welt noch vielfältiger und experimenteller als bisher.
Webdesign Trend #1: Ansprechende Interaktionen
Bisher fand die Interaktion hauptsächlich über die Hero Sections und das Scrolling statt. Diese Beschränkung durchbricht der neue Webdesign-Trend: Animierte Elemente werden im neuen Jahr für bedeutsamere Interaktionen genutzt. Dadurch wird die Website ein wenig mysteriöser und fesselt das Auge des Benutzers. Anstatt passiv auf einer Seite zu agieren, werden die Besucher eingeladen, aktiv zu werden.
Webdesign Trend #2: Bewegliche Schrift
2022 kommt Bewegung in die Schrift. Anstatt Grafiken oder andere UI-Elemente zu animieren, bewegt sich der Text. Das wirkt frisch und überraschend, selbst im Falle einer einfachen Animation. Von kreisförmigen Drehungen bis hin zu verspielten Layouts ist alles denkbar.
Webdesign Trend #3: Kreatives Scrollen
Da Scrolling die häufigste Form der Interaktion ist, ist es nicht verwunderlich, dass sich die Webdesigner etwas Neues haben einfallen lassen. Die neuen Varianten sollen den Besucher auf eine Reise durch die Website mitnehmen und das Erlebnis spürbar verbessern.
Webdesign Trend #4: Memphis Design
Chaotische Muster, bunte Formen oder gar ein kitschiger Stil: Das Memphis Design lehnt den klassischen Minimalismus ab. Es ist eine prägende Ästhetik, die insbesondere in den 80er-Jahren Anklang fand. Diese Explosion an Farben soll die minimalistischen Designansätze auflockern – die intuitive Bedienung bleibt dank dem ausgefeilten Webdesign erhalten.
Ziel dieses neuen Trends ist es, bunter, aufgeschlossener und abenteuerlicher zu wirken.
Webdesign Trend #5: Neo-Brutalismus
Rohe sichtbare Materialien zu betonen war ein wichtiger Trend in der Architektur. Die Bewegung erstreckte sich über Jahre hinweg: von den 50er-Jahren bis hinein in die 70er. Seit 2014 erlebt Brutalismus im Webdesign sein Revival. Das Ergebnis sind asymmetrische Layouts, schlichte Hintergründe, ungestylte HTMLs und unbearbeitete Bilder.
Wichtig: Auf den ersten Blick scheint dieser Trend ohne große Mühen auszukommen – tatsächlich bedarf es einiges an Fingerspitzengefühl, um den Webdesign-Trend gekonnt umzusetzen.
Webdesign Trend #6: Rahmen werden wieder sichtbar
Die Illusion von frei im Raum schwebendem Content wird mit diesem neuen Webdesign-Trend durchbrochen. Es ist ein Schritt hin zur realitätsnahen Darstellung: Präzise Raster sorgen für realistischere Layouts und trennen die einzelnen Bereiche auch optisch voneinander. Das macht die Websites in erster Linie überschaubarer und trägt gleichzeitig zu mehr Platz bei. Denn: Durch die sichtbaren Rahmen fühlt sich eine gefüllte Seite weniger überladen an.
Übrigens: Dieser Design-Trend harmoniert hervorragend mit dem Retro-Design und den Hero Images.
Webdesign Trend #7: Retro-Design ist wieder angesagt
Die Anfänge des Internets sind den meisten kaum in Erinnerung geblieben. Einzig die leuchtend bunten Farben, die roboterhaften Schriften und die sichtbaren Tabellen-Layouts werden nach wie vor mit dem Web 1.0 verbunden. Diesen Trend erwecken die Webdesign-Agenturen im Jahr 2022 erneut zum Leben. Dieser Webdesign-Trend zeigt den Wunsch, sich von den starren Branchenstandards zu lösen und der eigenen Kreativität wieder mehr Raum zu bieten.
Webdesign Trend #8: Typografische Hero Images
Auch die Hero Images feiern in diesem Jahr ein wichtiges Comeback. Sie sind einfach gehalten und sollen mit ihrem Statement überzeugen. Auf Bilder wird dabei weitestgehend verzichtet – sie würden bloß von der zentralen Botschaft ablenken. Das funktioniert am besten mit einem kreativen und geschmackvollen Schriftstil.
Das Ergebnis: Diese Botschaft fordert die Aufmerksamkeit der Besucher und fesselt ihren Blick.
Webdesign Trend #9: Neumorphische Designs
Neumorphismus (auch bekannt als Neomorphismus) ist ein relativ neuer Designtrend und ein Begriff, der in letzter Zeit viel Aufsehen erregt hat. Die Ästhetik ist durch eine minimale und realistisch aussehende Benutzeroberfläche gekennzeichnet, die den Skeuomorphismus neu interpretiert — daher der Name.
Der neumorphische Effekt ist eine Kombination aus Flat-Design und skeuomorphem Design (später dazu mehr). Neumorphische Komponenten haben unten rechts einen dunklen Schatten und oben links einen hellen Schatten. Die Kombination aus beidem erzeugt einen Effekt, der die Komponenten täuschend echt aussehen lässt.
Neumorphische Karten
Eine neumorphische Karte ist eine erhabene Form aus genau demselben Material wie der Hintergrund.
Im Gegensatz zur Material Card „schwebt“ die neumorphische Karte nicht über dem Untergrund, sondern steht ab.
Der Schatten verleiht der der Material Card sowohl Tiefe als auch die Form selbst — denn die Material Cards sind oft randlos.
Der neumorphische Effekt ist relativ einfach zu erzielen. Sie nehmen zwei Schatten, einer davon Weiß, der andere dunkel. Damit der weiße Schatten überhaupt erkennbar ist, darf der Hintergrund nicht vollständig weiß sein. Die beiden Schatten sollten auf jeden Fall erkennbar bleiben, sonst funktioniert der neumorphische Effekt nicht.
Ein neumorphes UI-Kit
Ein ganzes Set an neumorphen UI-Elementen hat Abdelrahman Ismail erschaffen und auf Github bereitgestellt:
Dieses Projekt ist noch in Arbeit und auch noch lange nicht abgeschlossen. Der Autor plant, weitere Komponenten aufzunehmen und in Zukunft auch ein Dark-Theme zu unterstützen.
4 Webdesign Trends in 2022, die sich nicht so schnell ändern werden
1 – Mobile First Design
Hört es sich ausgelutscht an, wenn ich das erwähne? Ich muss es aber. Beim bisherigen Design-Prozess startete der Entwickler zumeist bei der Desktop-Version einer Website. Die musste stimmen, schließlich bekommt der Kunde diese Version zuerst zu sehen und muss sie abnicken.
Erst danach wurden die mobilen Varianten entwickelt und die Website auf die responsiven Ansichten angepasst. In 2022 wird genau das nicht mehr funktionieren. Auch die Kunden haben sich weitergebildet und reine Desktop-Sites wurden bereits von Google abgestraft. Mobile First wird extrem wichtig für ein gutes Ranking in den Suchergebnissen.
Zuerst werden die mobilen Ansichten entwickelt, denn eine Website muss auf Smartphones und Tablets perfekt aussehen und funktionieren. Erst im Anschluss wird die Desktop-Version gestaltet.
Google hat übrigens ein neues Online-Tool zur Verfügung gestellt, dass durchaus aussagekräftiger ist als das alte.
Think with Google
Ein Test mit dem neuen Tool:
2 – Website Speed
Das hochoffizielle Tool um Webseitengeschwindigkeiten zu messen ist Google PageSpeed Insights. Ein weiterer, sich fortsetzender Trend in 2022 wird die Optimierung auf extrem schnelle Ladezeiten sein. Google selbst gibt seit einigen Jahren den Grenzwert von 1,5 Sekunden an. In dieser Zeit wünscht sich Google, den kompletten Ladevorgang einer Website erledigt zu wissen.
Natürlich sind 1,5 Sekunden nicht mehr zeitgemäß. Es ginge wesentlich schneller. Zumindest auf der Startseite und der Übersichtsseite eines Blogs sind Geschwindigkeiten von unter einer Sekunde durchaus machbar. Und das mit vertretbarem Aufwand. Einzelne Artikelseiten dürfen langsamer laden, da wären die eineinhalb Sekunden ein guter Durchschnittswert.
Selbst Ladezeiten von einer halben Sekunde wären kein Problem auf einer Startseite und der Blog-Übersicht. Jetzt ist die Zeit gekommen, sich mit der Speed-Optimierung zu beschäftigen, um für das nächste Jahr gewappnet zu sein.
3 – Lazy Loading
Lazy Loading füttert den sichtbaren Bereich einer Website mit Content-Häppchen. Der Vorteil für Websites mit viel Inhalt – wie zum Beispiel Facebook, Instagram und ähnlichen liegt auf der Hand. Die große Menge an Content muss nicht auf einmal geladen werden, sondern zeigt sich erst nach Anforderung durch den Benutzer. Erst wenn dieser herunterscrollt, wird der angeforderte Inhalt – zumeist blitzschnell – nachgeladen.
Da die Website-Geschwindigkeit für SEO und die Konversionsraten sehr wichtig ist, erwarte ich eine weit verbreitete Nutzung von Lazy Loading in 2022.
4 – Zentrierte und/oder gesplittete Inhalte
Ein zentrierter Inhalt ist ein kraftvoller Stil mit hoher Aussagekraft. Die Haupt-Aussage wird in die Mitte des Bildschirms gesetzt und mit einigen visuellen Tricks hervorgehoben. Gut gemacht erzeugt diese Technik einen dramatischen visuellen Effekt.
Allerdings funktioniert das nicht für jede Art von Website. Seiten mit minimalen bis normalen Inhalten werden mit dieser Technik gut bedient sein.
Split-Content hingegen teilt den Inhalt in zwei Bereiche auf, was eine hohe visuelle Aufmerksamkeit erzeugt und Designern mehr kreative Freiheit in die Hände legt, ohne die Klarheit der Content-Hierarchien zu gefährden.
Ein gutes Beispiel ist die Website von Melanie DaVeid
Zuerst bietet die Website einen zentrierten Inhalt auf der Startseite…
…danach wird der Content gesplittet.
Fazit
Viele spannende Dinge erwarten uns im diesem Jahr. Die wichtigsten Trends sollte ich erwischt haben. Wenn du allerdings der Meinung bist, ich hätte etwas vergessen, dann schreibe es gern in die Kommentare. Wir freuen uns immer über fundierte Meinungen.
P.S. Wer nach einer kompetenten Webdesign-Agentur sucht, die auch die kommenden Trends erfolgreich umsetzen wird, wird bei dem Webdesign aus Düsseldorf fündig.
Beitragsbild: Zahidul auf Dribble
10 Antworten zu „Webdesign Trends 2022: Das erwartet uns“
— was ist Deine Meinung?
Neo-Brutalismus ist der Shit bzw. würde ich gerne anbieten. Bin gespannt, ob ich das mal verkauft bekomme. Eine Herausforderung wäre es auf jeden Fall.
Da könntest Du Dich auf die Suche nach Museen für Neue Kunst und experimentelle Künstler machen…
Hallo,
ein wirklich cooler Beitrag! Sehr angenehm und interessant zu lesen. Danke!
LG
Wir danken für das Lob.
Hallo Markus, verrätst du, mit was du die bewegliche Schrift (Trend 2) gemacht hast? Gibts da ein PlugIn? Vielen Dank!
Hallo Miri, es gibt eine Reihe von Möglichkeiten, eine Überschrift zu animieren. Bei Elementor beispielsweise gibt es dafür ein Widget namens „Animierte Überschrift“.
Das Video-Beispiel selbst stammt übrigens von Dribble.
Nochmal der Hinweis: Im Feed dieses Beitrages wurden 3 mp4 Dateien mitgesandt. Da frage ich mich wie das überhaupt geht und für was das gut ist? Und was kann dann alles noch in einem Feed mit dabei sein?
Screenshot: https://i.imgur.com/UcumhFH.jpg
Auch wenn man meine gestrige Frage dazu nicht beantwortete, sondern kommentarlos löschte: vielleicht interessiert es doch jemanden? Mich schon, danke.
Hallo „Rainer“, ich nehme an, Du bist auf Thunderbird unterwegs? Der Feed Reader liest den Beitrag so aus, wie er kommt.
Da die Videos selbst gehostet sind, denkt Dein Feed Reader, er muss die Videos ebenfalls runterladen.
Auf eine Einbettung von Youtube-Videos wollen wir im Übrigen aus Datenschutzgründen gerne verzichten.
Danke. Ja, RSS lese ich bevorzugt mit TB.
Laden tut er die eh nicht, es fiel mir nur auf, da sind Anhänge. Aber lt. Dateigröße sind die eh nicht mitgeliefert, werden nur Dateinamen angezeigt.
Bez. YT u DSGVO sehe ich kein Problem, wenn man die vorher blockt und dem Besucher die Wahl lässt.
Denn mir gefallen die Videos, zeigen um was es geht. Sicher, auch direkte Links zu Beispielen wären cool. Doch vielleicht kann noch nicht jeder Browser alles und dann ist das Video zuverlässiger.
Danke!
Klar doch, nichts zu danken! 🙂