Webdesign Trends 2022

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. Eine tolle User Experience, Barrierefreiheit und mobile First stehen im Vordergrund.

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 die wichtigsten Webdesign Trends zu erläutern und was eine moderne Website ausmacht.

Webdesign Trend - Schriften / Typografie

Modernes Webdesign zeichnet sich auch durch die Wahl der Schrift aus. 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 Bild auf vielen Webseiten zu sehen. Oder mit Schriften, deren Füllung ein Bild oder ein Farbverlauf ist.

Auch kann hier mit Farben experimentiert werden, um der Webseite einen eigenen Look zu geben. Auch mit mehreren Schriftarten zu schaffen passt voll und ganz. Farbverläufe im Allgemeinen sind sowieso im Trend. Ob in Kombination mit Typografie oder auch als Hintergründe.

Oder Schriften, die als Parallax Effekte eingebunden sind und so beim Scrollen animiert verwendet werden.

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

Webdesign Trend - 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. Hier ist eine tolle Quelle, die verschiedenste Neo Brutalismus Websites listet.

‍

‍

Webdesign Trend - 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 während 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.

Auch hat sich in den letzten Jahren Usability (Barrierefreiheit) stark gemacht und Websites müssen dem Trend folgen. Für Leute mit Behinderungen oder einer Sehschwäche.

Ich habe vor Kurzem eine interessante Seite gefunden, wo man Farbkarten, die auch differenzierbar sind für Menschen mit einer Sehschwäche.

Hier ein interessanter Artikel in Welcome Tech zum Thema.
Hier einer, der hilfreich ist, wenn es um die Visualisierung von Daten geht. Dieser wurde in Nightingdale publiziert.

Und hier noch ein super Tool Viz Plaette das von Susie Lu und Elijah Meeks gebaut wurde. Toll daran ist auch, dass man direkt mit einem CSS arbeiten kann.

Auch Adobe hat die eigene Farbpalette überarbeitet. Dazu empfehle ich diesen Artikel.

Ich denke, eine moderne Website sollte auf dies eingehen und ich werde dies in Zukunft sicherlich auch in meine Projekte einfliessen lassen und darauf achten, dass die Farben auch die Voraussetzungen der Barrierefreiheit entsprechen.

‍

Webdesign Trend - 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 Webdesigner 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.

Ein weiterer Vorteil bei Lottie Files ist, dass diese gesteuert (angesprochen) werden können. Zum Beispiel, dass eine Animation reagiert, wenn man mit der Maus darüber fährt oder durch Scrollen der Page.

Diese sozusagen als scroll Effekte verwendet oder in ein Parallax Scrolling einbaut.

Eine Lottie File Animation ist ein GIF auf Stereodien und definitiv supercool. Ich erstelle diese in Adobe After Effekts und exportiere mit dem Plug-in Bodymovin.

Hier ein Link zu Lottiefiles. Einer coolen Lottie Datenbank. Mehr technische Infos zu Lottie Files gibt es hier > AirBnb

‍

Anbei eine coole Lottie File Animation von Spotify. Diese wird durch Scrollen oder wischen gesteuert.

‍

‍

Hier eine Tolle Site von weareimpero.com. Die Website ist auch voll mit Animationen und im Brutalismus Style aufgebaut. Die Videointegrationen sind nach meiner Meinung auch cool und trendy.

‍

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

‍

Der Schlüssel zu diesem Trend besteht darin, etwas Mysteriöses zu präsentieren – wie beispielsweise der kleine schwarze Würfel, der deinem Cursor auf der Seite von LEQB folgt.

‍

‍

AUf der Website von der Audio Künstlerin Chiara Luzzana – wird der Besucher aufgefordert, eine bestimmte Form der Interaktion zu nutzen, um zu erfahren, wie die Seite funktioniert. Dies sorgt für neuartige Erlebnisse, durch die sich die Besucher der Seite mehr wie Ermittler fühlen, die aktiv mit der Seite herumspielen, um ihre Geheimnisse zu enthüllen.

‍

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

Hier noch ein Artikel von Webflow, der voraussagt, dass Neumorphismus schon wieder out ist. Du siehst, ab und zu sind neue Trends sehr kurzlebig.

Webdesign Trend - 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 einem grossen 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.

Webdesign Trend - 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 hierIch 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.

Wiederum können aber auch Landingpages für Kampagnen erstellt werden. Das ist dann eine Unterseite, die speziell für diese Kampagne erstellt wurde und sonst eigentlich nicht erreichbar ist.

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.

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 letzten Jahren in dieselbe Richtung. Mobile Endgeräte wie Smartphones und Pads werden immer wichtiger.

Die Besucherzahlen kommen zum Teil mit über 50 % von Mobile Geräten. Darum ist es enorm wichtig, als Webdesigner dieser Realität Rechnung zu tragen. Da kommen schnelle Ladezeiten und responsive Webdesign 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.

Noch übersichtlicher und einfacher in der Bedienung als die Google-Analysen ist das von EXPERTE DE. Janis hat eine Anwendung programmiert, die mit einem Klick gleich die ganze Website analysiert. Das ist sehr zu empfehlen, um sich ein Überblick der kompletten Website zu verschaffen. Hier kommst Du zum Tool.

Aber auch an leicht konsumierbare Inhalte ist zu denken. Klare Designelemente helfen und erleichtern die Bedienung auf den mobilen Geräten. Lange Ladezeiten nerven sowieso. Auch auf die Lesezeit sollte bei Inhaltsseiten geachtet werden.

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 und bin mit Herz und Seele ein Webflow Webdesigner.
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 in Webflow 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. In meinem Methodik Blog habe ich mehr darüber geschrieben, warum ich meine Websites mit Webflow designe und umsetze.

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. Webflow ist schon von Grund auf sehr SEO freundlich aufgebaut. Wenn man dann noch die Google Regeln befolgt, kommt das Ergebnis gut.

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.
Falls Du mehr zu meiner Webflow SEO Strategie erfahren willst, in diesem Methodikbeitrag gehe ich vertiefter auf SEO ein und erkläre, wie ich diese Angelegenheit sehe.

‍Personalisierte User Experience

Eine Darstellung, die auf die Zielgruppe ausgerichtet ist, gehört zu den Grundprinzipien beim Webdesign.

Im Bereich E-Commerce wird es immer wichtiger, dass die Inhalte auf die potenziellen Kunden ausgerichtet sind.

Das Ziel dabei ist es, eine personalisierte Website dem Benutzer zu zeigen. Dies kann mit Analysetool je länger je feiner analysiert und die E-Commerce Website darauf angepasst werden.

Unten habe ich noch ein Video zum Thema eingefügt.

‍

Persönliche Meinung: Ich freue mich darauf, wenn das auf den Webseiten vermehrt kommt und jedem Benutzer eine personalisierte Version angezeigt werden kann.

Auf der anderen Seite ist es natürlich auch erschreckend. Doch Google weiss mittlerweile so viel über jede Person und deren Verhalten, dass man dies natürlich auch im Positiven nutzen sollte.

Das ”lustige” daran ist, dass wenn ich mit Freunden über dieses Thema spreche, sich niemand Gedanken darüber macht, seine Benutzerdaten mit der Welt zu teilen. Nein, ich werde eher als weltfremd betrachtet, wenn ich das Wort Persönlichkeitsschutz in den Mund nehme.

Also Nutzen wir ungeniert diese Vorteile und bauen Websites, die bei jedem Besucher anders dargestellt werden. Saugen die Benutzerdaten von Google, kaufen sie von Social Media Plattformen und geben Vollgas.

Zusatz: Du solltest auch unbedingt die Website von awwards.com auschecken.