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
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
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.
