Wenn Du auf "JA" klickst, stimmst Du der Speicherung von Cookies auf Deinem Gerät zu.
Datenschutzrichtlinie.

WEBDESIGN | Trends 2022

Webdesigntrends
Webdesign
5 min
zum lesen

Webdesign Trends 2022

22.4.2022

Die wichtigsten Webdesign Trends im Jahr 2022

Webseiten sind immer im Wandel und selbstredend auch Trends unterliegen.

Das Erscheinungsbild von Webseiten ändert sich jedes Jahr von Neuem. Klar bleibt gutes Design längerfristig erhalten und gewisse Design Trends sind auch sehr kurzlebig.

Darum ist es wichtig, auf dem Laufenden zu sein, man muss aber nicht auf jeden diesen Trends sofort reagieren. Es ist einfach wichtig neue Trends im Auge zu behalten.

In diesem Blog Post versuche ich Dir einige Webdesign Trends zu erläutern.

Schriften / Typografie

Modernes Webdesign zeichnet sich auch durch die Wahl der Schrift. Aktuell zählen zu den aktuellen Trends visuelle Hingucker wie auffällige und grosse Schriften. Untermauert von Neon angehauchten Farbübergängen und Scrolling Effekten. Auch Überlagerungen von Text und Bild ist ein Design Trend.

Zusätzlich spielt Typografie auch ein wichtiger Faktor. Grosse Buchstaben oder Schriften sind gewollt und helfen, Identität zu verleihen. Genau diese Identität ist das Wichtigste beim Schaffen einer Marke. Auch ist eine Kombination mit Schrift und Text auf vielen Webseiten zu sehen. Oder mit Schriften, deren Füllung ein Bild ist. Auch kann hier mit Farben oder Verläufen experimentiert werden, um der Webseite einen eigenen Look zu geben. Farbverläufe sind sowieso auch im Trend.

Sogar Schriften mit Serifen sind wieder am kommen. Serifen sind die kleinen horizontalen Striche unten an der Schrift. Wie man aus der Zeitung kennt.

Serifenschrift

Neo-Brutalismus

Neo-Brutalismus stammt aus der Architektur der 50er bis 70er-Jahre und zeichnet sich durch ein kahles und schlichtes Design aus. Oft wir mit Rohbeton gearbeitet. Und die Bauten wirken wie Bunker. Mit kleinen Schiessschartenartigen Fenstern. Brutal wie der Name Neo-Brutalismus auch sagt. Seit einiger Zeit zeichnet sich dieser Trend auch im Webdesign. Hier liegt der Schwerpunkt auf Text. Er verkörpert den Inhalt auf eine brutal, fast schon unfertige Art und Weise. Typografie steht hier definitiv im Vordergrund. Von Design Trend her eher ein minimalistisches Design. Jedoch sehr voll, fast schon überfüllt. Wirklich sehr Typografie lastig.

Neo Brutalism
Bild: Connor McManus

Zu meinem Webdesign Angebot

Farben

Wir sehnen uns nach Farben und ich denke, das hängt auch mit der Pandemie zusammen. Die Benutzer wollen raus und Lebensfreude geniessen. Selbstredend kann das nicht für alle Projekte gleichermassen angewendet werden. Denn auch Schwarz-weiss mit Komplementärfarben steht im Trend. Grautöne mit knalligen Umrandungen, wie ich sie zum Beispiel auf meiner Webseite einsetze. Das ist ein Prozess, der bei der Webseiten Gestaltung wichtig ist und am Anfang definiert werden muss.

Zusätzlich sind auch Farbverläufe ein Design Trend. Ich arbeite auf meiner Seite bedingt mit Farbverläufen. Zum Beispiel auf meiner Einstiegsseite ganz oben. Was einen leichten Eindruck vermittelt. Eine Webseite darf ruhig knallig sein. Oder man arbeitet experimenteller mit Texturen im Hintergrund oder ganz klaren Hintergrundfarben.

Farbverlauf

Animationen

Auch Animationen so wie Lottie Animationen sind im Trend. Lottie Animationen sind vektorbasiert und bieten wesentlich verfeinerte Gestaltungsmöglichkeiten als ein animiertes GIF. Auch sind sie in der Datenmenge (zu übertragende Daten) nicht vergleichbar mit herkömmlichen Animationsmethoden. Ich als Webagentur arbeite viel mit Mikrointeraktionen und verwende dazu Lottie Files. Das steigert die User Experience gewaltig und bereitet Freude. Ich versuche, diese als Gestaltungselemente oder Designelemente zu sehen und dementsprechend zu verwenden.

Interaktionen

Auch sind Mikro Interaktionen auf modernen Webseiten verbreitet. Das können kleine Animationen in Knöpfen sein, die bei roll Over getriggert werden. In Zukunft werden diese Effekte auf dem Smartphone ein Vibrieren auslösen. Ich persönlich arbeite sehr viel mit Mikroanimationen auf meinen Webseiten.

Schaue mein Offertenanfragetool an, die sind vollgepackt mit solchen kleinen Animationen. Die überraschen den Besucher und es macht Spass sich durchzuklicken. Diese können natürlich auch mit der Bewegung der Maus agieren oder dem Scrolling auf der Webpage. Diese werden dann als scroll Effekte bezeichnet.

Auch cool sind Mikro Interaktionen zum Beispiel in einem Hamburger Menu. Wo sich dieser leicht öffnet und zum Schliessen zu einem Kreuz wird. So wird das navigieren auf der Webseite schon zum Erlebnis. Und wenn dann die Navigation noch über das Hero Image gelegt wird, dann ist das cool. Als Hero Image bezeichnet man das oberste Bild auf der Webseite.

3-D Effekt - Dreidimensionalität

Auch ein 3-D Effekt zu erzielen steht im Trend, dies kann durch Überlagerungen von einzelnen Elementen mit einer Semitransparenz sein. Oder mit Rundungen, die einen 3-D Effekt simulieren.

Oder mit Parallax Effekten zu arbeiten ist auch cool. Parallax Effekte vermitteln ein Gefühl von Tiefe. Der Vordergrund bewegt sich schneller als der Hintergrund. Selbstredend kann man auch noch mehr Schichten einbauen, die den Effekt sogar noch verstärken. Man kann damit beim Parallax scrolling auf der Seite wunderbar arbeiten. So wird das scrolling zur Freude oder das scrollen wird zur Interaktion mit der Webseite.

Ich arbeite zusätzlich auch mit 3-D Effekten in einer Lottie Animation wie mein Bot oben links auf der Webseite. Diese wird auch durch die Bewegung der Maus gesteuert. Ich denke, das gehört auch zu einem Design Trend.

Hier siehst Du auch ein toller 3-D Effekt von Jeremy Woons der als animiertes GIF abläuft.

Super abstrakt sind die 3-D Zeichnungen von Adam Ho.

Auch muss man für haptische Erlebnisse sorgen, die in der Zeit von Flat Designs leider verloren gegangen sind. Ein positiver Effekt des Neumorphismus: eine stärkere Bindung zwischen Nutzer und Design. Ob bei Knöpfen oder Navigationen im Allgemeinen. Hier ist ein interessanter Artikel über Neumorphismus, den es sich lohnt, zu lesen. https://www.pacher.agency/blog/neuer-designtrend-namens-neumorphismus-was-steckt-dahinter/

Dark Mode

Dark Mode ist auch ein Thema. Die meisten Grafikprogramme kommen in einer dunklen Oberflächengestaltung daher. Auch lassen sich die Webbrowser in einen Dark Mode versetzten sowie die Microsoft Office Linie oder sogar das komplette Windows. Auch auf den Telefonen und Pads lässt sich immer häufiger ganz einfach in einen Dark Mode wechseln. Zu viel weiss ist gar nicht nötig.

Es zeigt sich auch vermehrt der Trend, dass sich die Webseite nach Präferenzen des Betrachters in einen Dark Mode versetzen lassen. Angehaucht an eine Sprachauswahl auf der Webseite. Nur kehrt diese die Farben um und die Webseite kann in ein Dark Mode geschaltet werden. Dies ist natürlich mit einer rechten Aufwand verbunden, doch die Trends gehen in diese Richtung und zeichnet eine moderne Website aus. Wenn ich genügend Zeit hätte, würde ich das auf meiner Webseite auch einbauen. Doch es kommt, ich weiss einfach noch nicht, wann ich diesen Designupdate durchführe.

Hier habe ich für Dich auch noch einen tollen Artikel von Hesam Andalib betreffend Dark Mode.

Dark Mode Adobe Photoshop
Screenshot von Adobe Photoshop

Minimalismus

Minimalismus ist auch ein Thema, reduce to the max. Ganz klare und übersichtliche Layouts, die hauptsächlich mit Typografie und Bilder arbeiten. Farben sind da nicht wirklich von Nöten und die Seiten wirken sehr zurückhalten. Da kommen die Bilder voll und ganz zum Tragen und wieder mal enorm wichtig tolles Bildmaterial zu verwenden. Bilder geben der Webseite den Style. Spare nie an gutem Bildmaterial. Minimalismus geht auch in den Bereich retro. Einfach ohne die Retro Typografie. Sind Schriftarten wie Bauhaus, Frutiger oder Helvetica retro? Das ist hier die grosse Frage; ich denke, sie sind schlichtweg zeitlos.

Hier eine tolle Seite betreffend Minimalismus > https://dribbble.com/LukaMarr

Luka macht wirklich tolle Layouts und die bestechen eben, durch die Einfachheit. Sehr Modernes Webdesign!

Landingpages

Oder im Sprachgebrauch auch Home genannt sind enorm wichtig ob der User Lust entwickelt auf der Webseite weiter zu surfen oder die Seite gerade wieder schliesst. Ich weiss nicht, wie lange, ich an meiner Landingpage geschliffen habe, bis ich endlich zufrieden bin. Für einen Rechtsanwalt Kunden von mir habe ich vorgeschlagen sein Porträt als Landingpage zu verwenden. Denn, wer will schon ein Anwalt, der ihm unsympathisch ist. Du siehst die Webseite von Stefan Ioli hier > https://www.ioli-law.ch/ Ich denke, das ist ein gutes Beispiel für eine gelungene Einstiegsseite. Das Bild habe natürlich auch ich gemacht. Doch die Resonanz ist super und er ist glücklich mit der Seite.

Content Management System

Content Management System oder CMS ist auch ein Gebiet, das immer benutzerfreundlicher gestaltet wird. Was früher noch mühsam zusammen geklickt werden musste, läuft heute meist im Frontend ab. Oder man hat für Blogs, Portfolios oder sonstige Artikel ein einfach zu bedienendes Backend. Es können auch easy Text und Bilder zusammen in einem Rich Text Element eingefügt werden. Das ist schon fast wie Word, doch eben für Webdesign Content Management ausgelegt. Meine Webseiten sind mit einem solchen ausgerüstet. Und zwar eines das einfach und intuitiv in der Bedienung ist. Dadurch zeichnet sich modernes Webdesign heutzutage aus.

Zu meinem Webdesign Angebot

Ladezeiten

Speed is Key. Auch hier ist es enorm wichtig, dass die Webseite schnell lädt. Auch Google bezieht diese Ladezeiten in das Ranking ein. Und wenn halt einfach nicht schnell geladen werden kann, dann sind cool gestaltete Ladebalken eine Alternative. Ich habe immer ein Auge auf den Ladezeiten meiner Webseiten.

Das nervt definitiv und vergrault den Kunden. Eine Firma schadet das eher, als es die Firma oder das Produkt in ein gutes Licht rückt. Darum möglichst kurze Ladezeiten. Auch gehört dazu das endlose Scrollen oder «Long-Scrolling», man kennt das von Newsseiten, da wird der Inhalt immer mitgeladen, je weiter man scrollt. Eine gute Lösung, um Ladezeiten zu verteilen.

Mobile Endgeräte

Insgesamt bewegt sich der Trend wie in den vergangenen Jahren in dieselbe Richtung. Mobile Endgeräte wie Smartphones und Pads werden immer wichtiger. Die Besucherzahlen kommen zum Teil mit über 50 % von Mobile Devices. Darum ist es enorm wichtig, als Webdesigner dieser Realität Rechnung zu tragen. Da kommt Page Speed zum Tragen. Sozusagen, Speed is Key. Ein cooles Tool von Google ist Page Speed Insights.

Wenn Du Dein Page Speed wirklich im Detail analysieren willst, dann ist Lighthouse von Google das richtige Werkzeug. Hier kannst Du Deine Seite supergenau analysieren. Das macht Du dann direkt im Chromebrowser.

Aber auch an leicht konsumierbare Inhalte ist zu denken. Ich blende je nachdem gewisse Texte auf dem Mobilen Geräten ganz aus oder liefere dem Benutzer eine verkürzte Version als auf dem Desktop Computer.

Baukastensysteme

Das ist so eine Sache mit den Baukasten Webseite. Es gibt ja Wix und Squarespace oder wie die alle heissen. Damit ist es kinderleicht, eine Homepage zu erstellen, das kann inzwischen jeder. Doch für ein wirklich professioneller und wirksamer Internetauftritt sollte für das Erstellen ein professioneller Webdesigner angestellt werden. Und zwar ist da ganz wichtig zu beachten, dass dieser auch gut in Design und Marketing ist, denn programmieren hat noch nichts mit Webdesign am Hut. Das merkst Du spätestens, wenn Deine Webseite zwar funktioniert, sich jedoch nicht abhebt oder nicht gefunden wird. Gutes Webdesign und Design im Allgemeinen muss erlernt sein.

Wordpress steht bei mir nicht zur nicht zur Alternative, da es mit den ganzen Securityupdates zu einem Albtraum geworden ist. Darum meine persönliche Meinung. Finger weg von Wordpress. Ich bin mit Webflow superhappy. Dazu kommt, dass bei Wordpress viel mit Plugins gearbeitet wird, was die Ladezeiten der Webseite verschlechtert.

Auch ist es wichtig, mit einem klar strukturierten CSS System zu arbeiten. Das ist ein Content Style Sheet. Dort definiert man die Farben, Schriftarten, Hintergründe, Farbverläufe und so weiter. Ich arbeite nach dem Client First System von Finsweet. Das ist super organisiert und das wichtigste daran ist, dass es auch ein anderer Mensch versteht, und nicht nur diejenige Person, die die Seite programmiert hat. Ein CSS Naming System, das nachvollziehbar ist.

SEO - Modernes Webdesign

Dazu kommt, dass ein Wissen im Bereich SEO (Search Engine Optimization) von Nöten ist. Ich kenne mich damit recht gut aus und nutze verschiedene Tools, um die Sichtbarkeit in der nativen Suche zu verbessern. Ohne SEO im Hinterkopf zu haben, generiert auch die schönste Webseite keine neuen Besucher/Kunden. Ich denke, das wird von vielen unterschätzt. Die günstigste Werbung ist, wenn man in der Suchmaschine gefunden wird. Da spielen Keywords eine wichtige Rolle. Das beginnt mit der Analyse und muss dann konsequent weiterverfolgt werden. Ein Blog hilft definitiv das SEO anzukurbeln und sich bei Google besser zu platzieren. Und zwar ein Blog der vom Benutzer easy updatet werden kann. Das gehört auch zu modernem Webdesign.

No items found.

Ich hoffe, ich konnte hiermit einige Webdesign Trends aufzeigen und freue mich natürlich, wenn ich für Dich ein Projekt realisieren kann. Darum richtet sich mein Fokus auf professionelles Webdesign. Damit Du schon morgen damit beginnen kannst, dank Deiner eigenen Website mehr Kunden und Umsatz zu generieren. Ich biete Dir professionelles Webdesign der Extraklasse und Du kannst in die digitale Welt eintauchen.

Anbei noch einige hilfreiche Links:

Farbtrends von Adobe

Farbe des Jahres von Pantone

Hue Tools hat ein tolles Farbtool entwickelt

Microsoft Dark Mode aktivieren

Google Chrome Browser Dark Mode aktivieren

Mein Webdesignangebot

Lass uns zusammen arbeiten

Danke der Nachricht.
OH - Da ist was schief gelaufen >>>>> Bitte nochmals versuchen.