Blog
31.01.2022

Webdesign Trends 2022

In der digitalen Welt lohnt es sich Entwicklungen im Webdesign zu beobachten und zu wissen welche Trends gerade angesagt sind. Wir haben recherchiert, worauf wir uns dieses Jahr besonders freuen können. Es gibt also einiges zu entdecken bei unseren Top 5 Webdesign Trends fürs 2022.
Webdesign Trend 2022

Durch technische Entwicklungsmöglichkeiten konnten in den letzten Jahren einige neue Gestaltungstrends im Bereich des Webdesign hervorgerufen werden. Was dieses Jahr auffällt ist, dass die Trends noch um einiges kreativer und experimenteller werden wie sie bereits sind. Die folgenden fünf Webdesign Trends können wir dieses Jahr besonders häufig antreffen.

  1. Gradients
  2. Visible Frame
  3. Typography
  4. Ansprechende Interaktionen
  5. Kreative Scroll-Erlebnisse

1. Gradients

Obwohl Gradients nichts Neues sind und schon seit langem sehr beliebt sind, scheinen sie sich nun von einer eher subtilen Seite zu einer schillernden und noch auffälligeren Seite zu entwickeln. Bereits seit ein paar Jahren wird die CSS3-Eigenschaft gradient von den Browsern unterstützt und so kamen überhaupt erst die grossflächigen Verläufe als Trend auf. Die Gradients werden oft mit einer sehr minimalistischen Gestaltung kombiniert und zum Beispiel im Header angewendet. Sie können auf jede beliebige Grösse skaliert werden, was das ganze ideal für bildschirmfüllende Hintergründe macht. Nicht nur als Hintergrund, sondern auch als gestalterisches Element, zum Beispiel im Text oder anderen Elementen, werden Gradients 2022 eingesetzt.

gif website

 

Vita Architecture setzt eine leicht animierte «Gradient» hover-Animation ein, welche bei Mouseover über ein Textelement abläuft. Als Kontrast zu dem farblich eher cleanen Auftritt, kommt der Effekt hier besonders stark zur Geltung.

sarahguo.gif website

Sarah Guo nutzt einen komplexen Farbverlauf auf ihrer Portfolio Seite und kombiniert diesen mit einem minimalistischen und typografisch anmutigen Design.

monopo

monopo.london verwendet einen Gradient mit «Grain» (körnig) Effekt, was diesem eine zusätzliche Textur verleiht und ebenfalls ein sehr kommender Trend im 2022 ist. Um die Interaktion zu verstärken, reagiert der Gradient auf die Aktivitäten der User und sorgt so für eine «verspielte» und «spannende» User Experience auf der Webseite.

theinlay.gif

leonard.agency verwendet einen auf den ersten Blick sehr zarten und dezenten Gradient, welcher aber dank der Animationen und durch die zusätzlich möglichen Interaktionen, eine sehr starke und kräftige Wirkung bekommt. Die Möglichkeiten für den User wirken sehr einladend zum längeren verweilen auf der Webseite.

Folgende Seiten bieten Unterstützung um Gradients direkt im Web zu generieren und zu testen.

2. Visible Frame

Realistische Layouts mit einfachen Umrandungen, die das Fundament offen zur Schau stellen, sind ein beliebter Trend im 2022. Das strikte Grid zu zeigen, auf welchem eine Webseite gebaut ist, hilft ganz klar die verschiedenen Sektionen deutlich voneinander zu unterscheiden und verleiht der Seite einen gewissen Retro Touch, welcher generell wieder sehr im Kommen ist.

test

Mono X7 ist ein 17.3 Zoll Bildschirm, welcher mit einem Mini Computer verbunden ist. Es funktioniert wie eine digitale Leinwand, um das Web auf «einzigartige» Weise erleben zu können. Thematisch passend, arbeitet Mono X7 bei Ihrem digitalen Auftritt mit einem visible Grid und stellt dadurch sehr schön das Grid Fundament zur schau.

theinlay.gif website

 

Dieses auf den ersten Blick minimalistisch wirkende Design von the inlay, lebt durch die Animationen, welche beim scrollen der Webseite erscheinen und so das Grid sichtbar machen.

fabrica_it.gif

 

Kreative Talente unter 25 Jahren experimentieren bei fabrica.it in verschiedenen zeitgenössischen Disziplinen wie Fotografie, Video, Grafik, Design, Musik und Digitale Medien. Bei Fabrica.it arbeiten international renommierte Architekten, Musiker, Historiker, Designer, Künstler, Interaktionsdesigner, Art Directors und Soziologen zusammen. Das sehr lebhafte und visionäre Design kommt durch das sichtbare Grids erst recht zur Geltung. Es unterstützt die Orientierung und verleiht einen sehr modernen Eindruck.

3. Typography

In den letzten Monaten hat sich die Vielalt an Schriftarten, animierten Interaktionen und Hover-Effekten explosionsartig erhöht. Die Verwendung und der kreative Einsatz von Typography ist ein Trend, der Headerbilder und Videos als zentrales Gestaltungselement im Web weitgehend überholt. Dass der Typography Trend auch mit ästhetisch anmutigen Serifen Fonts funktioniert und nicht immer ein extrabold Schriftschnitt verwendet werden muss um den aktuellen Trend aufzugreifen, wird in den Beispielen anschaulich gezeigt. Die meisten der hier gezeigten Webseiten verwenden unter anderem das JavaScript toolset greensock.com.

pactmedia.gif

Die Design Agentur Pact.media setzt auf ihrer Webseite einen Hero Font ein und kombiniert diesen mit kleinen Animationen. Ein sehr schönes Beispiel für den Einsatz von Typography im Webdesign.

angelamilosevic.gif

Die Portfolio Seite der digital Designerin und Art Director Angela Milosevic wurde mehrfach ausgezeichnet und überrascht nicht nur durch das Spiel mit der Typography, auch die sehr speziellen und gelungenen hover-Effekte überraschen und machen Lust darauf die Seite zu erkunden. 

anywellfacialbar.gif

Auch das ukrainische Beauty Unternehmen anywellfacialbar.com nimmt auf ihrer Webseite den Trend zur grossen Typography, verspielten Hover Effekten und dezent animierten Interaktionen auf.

4. Ansprechende Interaktionen

Immer mehr Designer und Designerinnen werden sich 2022 umfangreichen und animierten Interaktionen zuwenden. Denn mit schon kleinen Animationen lässt sich die User Experience steigern. Hier sind ein paar sehr inspirierende Beispiele.

chiaraluzzana

Chiara Luzzana ist eine Sound Designerin und spielt bei ihrem visuellen Auftritt mit Sound Effekten und dazu passenden Interaktionen. Ein Effekt welcher auch 2022 sehr gerne genutzt wird ist die text-stroke CSS Eigenschaft, welche den Outline Texteffekt ermöglicht. Die CSS Eigenschaft gibt die Breite und Farbe der Umrandung von Textzeichen an.

dillinger.gif

 

Die Webseite Dillinger verwendet Schriften, welche bei einem «Hover» die font-weight wechseln. Eine gelungene Interaktion mit Typography. Für alle, welche sehen möchten wie der Effekt kreiert wurde, gibt es von Designer Tim Ricks eine klonbare Version der Webseite. 

jetzt Downloaden
User Experience Check
Wie gut ist Ihre UX?

Prüfen Sie mit dem User Experience Check von NETNODE das Kundenerlebnis Ihrer Webseite.

mehr erfahren.

5. Kreative Scroll-Erlebnisse

Scroll Erlebnisse sind nichts neues. Auch dies ist ein bereits bestehender Trend, welcher sich aber auch etwas weiterentwickelt hat und fürs 2022 ein grosser Trend bleibt. Hinzu kommt, dass die Scroll Erlebnisse durch überraschende und kreative Interaktionen erweitert werden. Der «Überraschungseffekt» fördert die Interaktion mit einer Website, wodurch die User länger auf der Seite verweilen. 

Ein Beispiel womit solche Scroll Erlebnisse umgesetzt werden können ist PixiJS. Aktuell gibt es tausende preisgekrönte und inspirierende Webseiten, welche mit dem open source System gemacht wurden.

https://www.capsul-in-pro.com/home-compost-capsule/

capsul-in-pro.com stellt die ersten kompostierbaren Kaffeekapseln vor. Um den Fokus auf dem Produkt zu behalten und die Orientierung nicht zu verlieren, bleibt die Kapsel als zentrales Element im Vordergrund. Dank dem Scroll-Erlebniss werden die User auf eine imaginäre Reise mitgenommen und fühlen sich dadurch näher beim Produkt.

https://drinkcann.com/

DrinkCann ist ein mit Cannabis angereichertes Stärkungsmittel und gehört zu einer Kategorie, welche als «Social Drink» bekannt ist. Es wird eine hauptsächlich junge Zielgruppe angesprochen. Diese Zielgruppe bestimmt auch das sehr effektive Webdesign der Marke. Alles scheint hier in Bewegung zu sein. Die Aufwärtsbewegung der Blasen im Hintergrund oder der allmähliche Wechsel der Farbtöne. Es ist «spannend» beim scrollen zu entdecken, was alles auf der Seite passiert und doch wird nie der Überblick verloren. Mit dem klaren Fokus auf dem Produkt, bleibt immer gut erkennbar wo man sich auf der Seite befindet. 

https://cannesprlions.com/en/lionsnews/

Lions Good News 2020 ist eine Sammlung von Inhalten, die anlässlich des 10-jährigen Jubiläums von PR Lions zusammengestellt wurde. Inmitten der Coronavirus-Pandemie hebt es gute Nachrichten über Kreativität aus der ganzen Welt hervor. Daten zeigen, dass sich die Zahl an Menschen, die nach positiven Nachrichten suchen, im Vergleich zu vor der Pandemie etwa verdreifacht hat. In 10 Kategorien wurden Informationen sortiert, eine für jeden zukünftigen Kommunikationstrend. Zum Thema und der Idee passend, überzeugt die Webseite Lions Good News 2020 mit einem überraschenden und sehr kreativen horizontal Scroll Effekt. 

Fazit.

Die in diesem Jahr kommenden Design Trends überraschen durch ihre kreativen und spannenden Konzepte. Einige nehmen uns mit auf eine Reise und andere Webseiten wollen wir gar nicht mehr verlassen, da es so viel zu entdecken gibt. Doch stellt sich auch immer die Frage, wie sehr auf die Webdesign Trends eingegangen werden sollte? Ist es wichtig ihnen immer zu folgen?

Es macht sicher keinen Sinn einen Trend einfach nur aufzugreifen weil dieser gerade aktuell und angesagt ist. Viel wichtiger ist es zu erkennen was davon zur eigenen Webseite passen könnte, Zielgruppengerecht ist und somit das bestehende Design weiter unterstützt. Es kann aber auch schon mit wenig Details und nicht allzu aufwendiger Umstrukturierung ein «überraschender» Effekt erzeugt werden.

Da der Bereich Webdesign und Webentwicklung nie still steht und sich ständig weiterentwickelt, sollte alle paar Jahre ein Refresh/Relaunch der Webseite durchgeführt werden, um zu sehen ob eventuell auch nur mit wenig kleinen Anpassungen die Webseite «modernisiert» werden kann. Oft entwickeln sich Trends auch über Jahre hinweg weiter und bleiben somit über eine längere Zeit «aktuell».