Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agenturen
    • Digitalagentur finden
    • SEO Agentur finden
    • Social Media Agentur finden
    • Webdesign Agentur finden
    • Werbeagentur finden
    • WordPress Agentur finden
  • Magazin
    • Bloggen
    • Buchhaltung
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • SEO
    • Software
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agenturen
    • Digitalagentur finden
    • SEO Agentur finden
    • Social Media Agentur finden
    • Webdesign Agentur finden
    • Werbeagentur finden
    • WordPress Agentur finden
  • Magazin
    • Bloggen
    • Buchhaltung
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • SEO
    • Software
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Suche

Webdesign Trends 2022: Das erwartet uns

  • Aktualisiert am 18. April 2023
  • von Markus Seyfferth
  • Webdesign
  • 11 Kommentare

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

https://www.drweb.de/wp-content/uploads/2021/12/3D-hovers.mp4

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

https://www.drweb.de/wp-content/uploads/2021/12/animated-text.mp4

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.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

Webdesign Trend #3: Kreatives Scrollen

https://www.drweb.de/wp-content/uploads/2021/12/kreatives-scrollen-v2.mp4

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

Quelle: Charon_z auf Dribble

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

Grelle Farben und Typography.
Quelle: PJ Richardson auf Dribble

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

Webdesign mit Ecken und Kanten und Rahmen
Quelle: Logan Cee

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

Ein Retro Webdesign mit Borders.
Ein Retro Webdesign mit Borders. Quelle: Ashik auf Dribble

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

Save Earth
Ein Hero Image mit schöner Illustration und Typography. Quelle: Zahidul auf Dribble

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.

User Interface Design - Design
Ein examplarisches Design-Konzept von Neumorphismus. Kreiert von Dawid Tomczyk. Screenshot: Dr. Web.

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.

Marke - Produktdesign
Wenn CSS-Buttons täuschend echt aussehen. Link zu Codepen. Screenshot: Dr. Web. Kreiert von halvves.com

Logo - Marke
Screenshot: Dr. Web.

Neumorphische Karten

Eine neumorphische Karte ist eine erhabene Form aus genau demselben Material wie der Hintergrund.

neumorphische karten Webdesign Trends 2022: Das erwartet uns
Bildquelle: uxdesign.cc

Im Gegensatz zur Material Card „schwebt“ die neumorphische Karte nicht über dem Untergrund, sondern steht ab.

neumorphische karte material card Webdesign Trends 2022: Das erwartet uns
Bildquelle: uxdesign.cc

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.

neumorphische karte css beispiel 1 Webdesign Trends 2022: Das erwartet uns
Wie man den neumorphischen Effekt in CSS umsetzt. Bildquelle: uxdesign.cc

Ein neumorphes UI-Kit

Ein ganzes Set an neumorphen UI-Elementen hat Abdelrahman Ismail erschaffen und auf Github bereitgestellt:

Bildschirmfoto - Produktdesign
Webdesign Trends 2022: Das erwartet uns 1

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.

Smartphone - Design
Ganz klar: der App-Design und Webdesign-Trend geht immer mehr hin zum Neumorphismus. Hier ein Beispiel von Filip Legierski. Screenshot: Dr. Web.

Funktionstelefon - User Interface Design
Auch bei diesem Design-Konzept sind die neumorphischen Elemente sehr gut zu erkennen. Designed von Sèrgi Mi. Screenshot: Dr. Web.

 

4 Webdesign Trends in 2022, die sich nicht so schnell ändern werden

1 – Mobile First Design

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

Screenshot von ThinkwithGoogle.

Ein Test mit dem neuen Tool:

Das Testergebnis von Dr. Web: „Gut“.

2 – Website Speed

Blick auf die neue Seite von Pagespeed Insights.

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…

melanie-daveid

…danach wird der Content gesplittet.

melanie-daveid

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

Auch spannend

  • Atomic Design
  • Der goldene Schnitt
  • Brutalismus im Webdesign
  • Neumorphisches Design
  • Mehr Webdesign-Kunden finden
  • Responsive Design mit Flexbox oder Grid?
Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Inhaltsverzeichnis

Dr. Web Agenturpartner in Hannover

Edit Content
360 grad konzept logo werbeagentur hannover.

360 Grad

Wir sind Werber & Kreative aus Leidenschaft! Strategie und Design ist unsere Passion. Als gelernte Diplomwirte für Marketing & Kommunikation, sind wir strategisch bestens aufgestellt und wissen wovon wir sprechen.

Profilbild Tim van der Wolk
— Tim van der Wolk,
Gründer
Alle Webdesign-Agenturen →

Lust auf mehr?

The Empire Strikes Back. Further.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.
Doch lieber Lotto spielen und so reich werden?

Diese 8 Tipps sollte jeder Webentwickler kennen

Sie sind Webentwickler oder möchten einer werden? Hier kommen 8 Tipps wie aus dem Lehrbuch. Doch wehe, wenn der Alltag dazwischen grätscht. Lieber doch Lotto spielen?

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kannst du einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.

11 Antworten

  1. Rainer Zufall sagt:
    21. Dezember 2021 um 11:31 Uhr

    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.

    Antworten
    1. Markus Seyfferth sagt:
      21. Dezember 2021 um 11:43 Uhr

      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.

    2. Rainer Zufall sagt:
      21. Dezember 2021 um 12:28 Uhr