Top 9 Webdesign Trends für 2022
Marc Bachofner, 6. März 2022· Webdesign
Die Technologie verändert sich tagtäglich. Wir sprechen hier nicht nur über Computer, Software oder Konsolen. Wir sprechen auch über Webdesign. Jedes Jahr scheinen sich neue Möglichkeiten zu eröffnen. Einige bleiben erhalten und andere versanden wieder. Wie schon bei den Webdesign Trends 2021 haben wir uns auch dieses Jahr auf die Suche nach den Trends gemacht. Als Webdesign Agentur gehört für uns dazu, auf dem neuesten Stand zu sein. Dieses Wissen wollen wir sehr gerne mit Ihnen/Euch teilen.
Die 9 Webdesign Trends für 2022
Webdesign Trend #1: Typographie
Typographie im Webdesign ist ein anhaltendes Thema. Welche Schriftart soll es sein? Wie verhält sich die Schriftart zur Schriftgrösse? Wie gross soll der Zeilenabstand sein? Alles Fragen, die Sie sich beim Erstellen einer typographischen Website stellen müssen. Nicht weiter verwunderlich wird typografisches Webdesign normalerweise von Webdesign Agenturen angewendet. Wenn Sie Ihre Website selbst herstellen möchten, dann empfiehlt sich ein passendes Thema oder eine passende Vorlage. Sie möchten das Leseerlebnis Ihrer Besucher so angenehm und vielleicht so aufregend wie möglich machen, da können schon kleine Unstimmigkeiten das Gesamtbild zerstören.
Bei Cramdyn (Stand: 17.02.2022) sehen wir eine super Darstellung mit typografischem Webdesign. Die Homepage wird dominiert von den grossen Schriftzügen. Diese Dominanz ist nicht schlecht, sondern macht aus dem Text ein klares Strukturelement. Das ist ein Kernelement von Typografie: Der Text wird zum Baustein und ist nicht mehr nur der Platzfüller.
Gleich noch ein Beispiel für gut gelungene Typografie von arcr (Stand: 15.02.2022). Die Texte stechen wieder hervor. Sie leiten den Leser und führen ihn über die ganze Homepage. Hat man einen Textblock fertig gelesen, dann wird die Aufmerksamkeit schon auf das nächste Element gezogen. Typografisches Webdesign nutzt alle Möglichkeiten, um den Text in den Mittelpunkt zu rücken. Für einige Leute ist typografisches Webdesign deshalb auch ein ehrlicher Ansatz, denn Sie können nicht einfach ein Bild für sich sprechen lassen, sondern Sie müssen die passenden Worte finden.
Webdesign Trend #2: Retro-Look
Aus der Mode kennt man ein Phänomen: Gewisse Stile, Muster oder Synergien tauchen Jahrzehnte nach ihrem Zenit wieder auf. Im Bereich Webdesign gibt es das auch – auf eine Art und Weise.
Der technologische Fortschritt erlaubt es uns, unsere Websites so zu gestalten, wie wir wollen. Es gibt so gut wie keine kreativen Grenzen mehr – lassen wir Performance hier einmal aussen vor. Das bedeutet auch, dass Sie Ihrer Website einen Retro-Look verleihen können. Wir sprechen hier nicht über Kopien von alten Designmustern. Wir sprechen über die Kombination von Retro-Elementen mit modernen Werkzeugen.
Klar ist auch, dass ein Retro-Look zu Ihnen und Ihren Produkten und Dienstleistungen passen muss. Heutige Techgiganten würden mit einem Retro-Look nicht überzeugen, da sie für technischen Fortschritt stehen.
Wieder erkennt man die Elemente im Retro-Stil. Boldare Boards (Stand: 04.02.2022) hat ein sehr gutes Feingefühl bewiesen, denn das Webdesign ist als Besucher erstens ein richtiger Hingucker und zweitens findet man sich auch zurecht. Design und Benutzerfreundlichkeit gehen also Hand in Hand und der Retro-Look wurde optimal in Szene gesetzt.
Webdesign Trend #3: Sichtbare Rahmen
Websites haben es nicht leicht. Besser gesagt: Die Hersteller von Websites haben es nicht leicht. Mit dem technologischen Fortschritt und immer besseren Tools ist der Wettbewerb gross. So ist eine Website schnell gut oder passend, aber den Status umwerfend oder perfekt gibt es nicht einfach so. Es muss im Hintergrund immer mehr passieren und auf der einen Seite verstecken Anbieter die Codes Ihrer Website vor den Besuchern. Andere zeigen offen, wie sich Ihre Website eigentlich zusammenstellt.
Ein Ansatz, der für mehr Struktur und Klarheit steht, ist Webdesign mit sichtbaren Rahmen. Dabei dreht sich alles um die klare Trennung einzelner Elemente. Als ob man das Baugerüst nicht ganz entfernt. Der Effekt: Die Seite wird übersichtlicher und Sie können mehr Inhalte platzieren, ohne Ihre Besucher zu verwirren.
Sichtbare Rahmen heisst nicht, dass alles eingerahmt werden muss. Es reicht, wenn Sie die wichtigen Trennlinien ziehen. Das hat vor allem Vorteile für die Übersicht, aber gut gelungene Trennlinien überzeugen auch visuell. Ihre Besucher werden Ihnen für diese visuelle Stütze danken.
Die sichtbaren Rahmen werden häufig mit einem Retro- oder 90s-Look kombiniert. Dieses Zusammenspiel sieht gut aus und macht auch Sinn, denn sichtbare Rahmen waren in den frühen Tagen des Webdesigns automatisch da. Mit der Zeit konnte das Aussehen zum Glück angepasst werden, damit wir heute über diesen Webdesign Trend sprechen können.
Webdesign Trend #4: Mikro-Interaktionen
Kein Stil als solches, aber dennoch ein Webdesign Trend: Mikro-Interaktionen. Auf interaktives Webdesign gehen wir später noch ein, hier geht es um die Interaktion von einzelnen Elementen und ihre Wirkung. Wollen Sie sich eine Website erstellen lassen, dann können Sie darauf zählen, dass Ihre Webdesign Agentur Sie ausführlich über die Unterschiede aufklären kann.
Ein Pfeil, der uns zeigt, dass wir scrollen sollen. Eine schlichte Animation im Logo. Ein Hintergrundbild, das sich sanft bewegt. Es gibt viele Beispiele für Mikro-Interaktionen, die uns das Leben einfacher machen, visuell unterhalten oder beides. Wichtig dabei: Diese interaktiven Elemente sind nicht im Fokus, sie sind nicht dominant und sollen unser Erlebnis verfeinern.
Mit passenden Mikro-Interaktionen werden Ihre Besucher verleitet, mehr Zeit auf Ihrer Seite zu verbringen. Mehr Zeit bedeutet eine höhere Chance auf einen Abschluss. Und wieder können Sie von den unbegrenzten Möglichkeiten des Webdesigns profitieren. Wollen Sie Ihre Besucher mit spielerischen Elementen unterhalten? Oder wollen Sie die Benutzerfreundlichkeit priorisieren? Mit Mikro-Interaktionen ist beides kein Problem.
Nochmals wichtig hervorzuheben: Mikro-Interaktionen sollten nicht zum Fokus Ihrer Website werden. Sobald sie zu dominant werden, sollten Sie sich mit interaktivem Webdesign auseinander setzen. An diesem Punkt gelten andere Regeln und Sie müssen sich andere Überlegungen machen. Mehr dazu später.
Webdesign Trend #5: Neo-Brutalismus
Der Neo-Brutalismus geht auf den Architekturstil des Brutalismus zurück. Beim Brutalismus wurden Rohbausteine wie Beton sichtbar gemacht. Schlichte Hintergründe, einfache Schriften und unbearbeitete Bilder. Der Neo-Brutalismus soll die kahle Wahrheit zeigen.
Das bedeutet nicht, dass Websites im Neo-Brutalismus unübersichtlich oder nicht fertig aussehen. Vielmehr will man die Wahrheit ins Zentrum rücken. Die unverputzte und scharfkantige Wahrheit.
Der Stil wird so und so wahrgenommen. Er gehört nicht zu den Standards, die einfach funktionieren, darum ist wieder die Abstimmung auf Ihre Besucher wichtig. Das ist auch der Grund, weshalb der reine Neo-Brutalismus weniger und weniger zu finden ist. Was sich beobachten lässt, ist, dass der Neo-Brutalismus vermehrt auf Minimalismus setzt. Die scharfen Kanten werden mit minimalistischem Webdesign überarbeitet und so neu in Szene gesetzt. Diese Kombination aus Minimalismus und Neo-Brutalismus ist überlebensfähig und wird uns auch in den nächsten Jahren begleiten.
Webdesign Trend #6: Parallax-Effekt
Ein persönlicher Favorit von mir persönlich: Der Parallax-Effekt. Für den Parallax-Effekt werden 2D-Elemente wie Bilder oder Textboxen auf mehrere Schichten hintereinander verteilt. Dann wird jedem Element oder jeder Schicht eine andere Scroll-Geschwindigkeit zugewiesen. Das Resultat: Ein 3D-Effekt trotz 2D-Elementen. Der Parallax-Effekt erzeugt dasselbe Bild, wie wenn man im Zug oder im Auto aus dem Fenster schaut.
Sie können den Effekt stärker oder schwächer wirken lassen. Sie können ihn mehr oder weniger in den Fokus legen. Auch für den Parallax-Effekt gilt aber: Performance beachten. Und auch ein sehr wichtiger Punkt: Der Parallax-Effekt wird im Moment auf Mobile-Geräten nicht zuverlässig unterstützt. Denken Sie daran, dass die Mehrheit der Internetnutzer via Smartphone surft. Natürlich können Sie den Effekt für Mobile-Geräte einfach deaktivieren. Achten Sie darauf, dass Ihre Website mit und ohne Effekt überzeugt.
Der Parallax-Effekt kann ein Wow-Faktor sein oder aber Ihr sonstiges Webdesign unterstützen. Arbeiten Sie mit einer Webdesign Agentur, dann können Sie verschiedene Ansätze abfragen. Lassen Sie sich zeigen, wie mehr oder weniger Parallax aussieht. Wie bei den meisten Webdesign Konzepten ist ein Beispiel eine bessere Diskussionsgrundlage als eine Erklärung.
Webdesign Trend #7: Seitenübergänge und Ladebildschirme
Auf jeder Website gibt es Ladebildschirme und Seitenübergänge. Im Normalfall sind diese beiden Elemente standardisiert. Also schlicht gehalten oder einfach ignoriert. Dabei geht aber viel Potential verloren. Gerade der Fakt, dass jede Seite diese beiden Elemente besitzt, zeigt, wie wichtig das korrekte Handling ist und wieso es ein klarer Webdesign Trend für 2022 ist. Das klassische Beispiel: One Pager. Unter One-Page-Design versteht man eine Website, die genau eine Seite hat. Häufig kann man auf diesen Seiten sehr weit scrollen, da der ganze Inhalt auf einer einzigen Seite zu finden ist. Genau das ist der kreative Ansatz für Seitenübergänge – man eliminiert sie.
Ladebildschirme sind eine knifflige Sache. Wir wissen, dass wenige Sekunden Ladezeit schon die Mehrheit der Besucher abspringen lässt. Mit einem kreativen Ladebildschirm können Sie einige Sekunden gewinnen. Ihre Besucher werden mit dem Anschauen und Verarbeiten Ihres Ladebildschirms befasst sein und nicht merken, dass sie eine Sekunde mehr gewartet haben als auf einer Website ohne Ladebildschirm. Aber auch hier gilt: So kurze Ladezeiten wie möglich. Machen Sie Ihren Ladebildschirm zu aufwändig, brauchen Sie bald einen Ladebildschirm für Ihren Ladebildschirm.
Seitenübergänge können auch zu Ladebildschirmen führen. Überlegen Sie sich, wie ein Besucher Ihre Seite erlebt. Muss er bei jedem Klick auf das Navigationsmenü eine Ladeanimation anstarren, dann wird ihm die Lust schnell vergehen. Als Faustregel gilt, dass ein Besucher nur einen Ladebildschirm sehen sollte. Fixieren Sie bei Seitenübergängen die Elemente, die sich nicht ändern und zeigen Sie nur kleine Animationen in ausgewählten Bereichen. Vermitteln Sie Ihren Besuchern das Gefühl, dass Sie Ihre Seite nie wirklich verlassen.
Webdesign Trend #8: Neumorphismus
Der Neumorphismus ist schon eine Weile da, aber erst in den letzten Jahren konnte er seine Wirkung wirklich entfalten. Es handelt sich um ein sanftes Design. Man arbeitet mit Schatten-Effekten, um Elemente «schweben» zu lassen oder sie zu «versenken».
Schatten und Farbverläufe sind die klaren Bauelemente für neumorphistische Websites. Und ein klarer Webdesign Trend 2022. Auch ein klares Erkennungsmerkmal ist die schlichte Auswahl an Farben. Neomorphismus setzt grundsätzlich auf eine Hauptfarbe, eine Schatten-Farbe und eine Detail-Farbe. Also drei Farben, die Ihre Website ausmachen. Dabei ist die Schatten-Farbe eine abgeänderte Version Ihrer Hauptfarbe, also nur zwei Farben, die Ihren Charakter definieren.
Was Besucher am Neomorphismus schätzen, ist sein sanftes Auftreten. Eine Website mit klassischem neomorphistischem Webdesign ist ruhig und wird als eine einzige Ebene mit Erhöhungen und Vertiefungen wahrgenommen. Um einen Fokus setzen zu können, wird diese Ruhe mit anderen Farben unterbrochen, denn Sie wollen Ihren Besuchern noch immer gewisse Elemente dominanter präsentieren.
Webdesign Trend #9: Interaktives Webdesign
Interaktivität finden wir immer mehr und immer häufiger in unserem Alltag. Ganz grundlegend ist jede Wechselwirkung zwischen zwei Parteien eine Interaktivität. Wenn ich am Morgen die Kaffeemaschine anflehe, die Tasse ganz zu füllen und sie mir etwas von Entkalken erzählt, dann interagieren wir. Naja, diese Interaktion ist für keinen von uns wirklich förderlich. Interessant ist bedeutende Interaktion mit Auswirkungen.
Interaktive Websites sind sehr beliebt. Das überrascht nicht weiter, wir Menschen freuen uns immer, wenn unser Handeln wahrgenommen wird. Die Frage ist nur, wie weit diese Interaktivität gehen sollte.
Ein Button, der die Farbe verändert, wenn Sie mit der Maus darüber schweben (Hover-Effekt). Ein Produkt in einem Online-Shop, das präsenter wird, weil Sie mit der Maus darüber hovern. Diese Kleinigkeiten zählen zum interaktiven Webdesign. Sie können das Gefühl Ihrer Website komplett verändern und mehr Interaktion mit Ihren Besuchern provozieren.
Interaktives Webdesign eignet sich aber nicht nur für Kleinigkeiten. Sie können auch dominantere interaktive Elemente einsetzen. Dafür müssen Sie die Performance Ihrer Website und die Bedürfnisse Ihrer Besucher genau im Auge behalten. Machen Sie alles richtig, dann werden Sie ein Erlebnis kreieren, das nicht vergessen geht.
Interaktionen bringen Ihre Besucher dazu, sich ausführlich mit den Elementen Ihrer Website auseinander zu setzen. Sie wollen herausfinden, was sie alles machen können und was ihre Handlung für einen Effekt haben wird. Lassen Sie sie Ihren Content auf aufregende Art und Weise erleben.
Stichwort Erleben. Wie schon angesprochen, können Sie das Mass der Interaktivität und ihre Dominanz steuern. Eine Website mit dominanter Interaktion eignet sich nicht als Online-Shop. Hier liegen die Bedürfnisse Ihrer Besucher und Ihr kreativer Ansatz zu weit auseinander. Stimmen Sie Ihren kreativen Ansatz auf die Bedürfnisse Ihrer erwünschten Besucher ab. Wollen Sie «nur» eine Botschaft vermitteln oder eine Geschichte erzählen, dann können Sie sich voll und ganz austoben.
Fazit Webdesign Trends 2022
Webdesign bietet unbegrenzte Möglichkeiten für Ihre Website. Stöbern Sie im Internet und finden Sie Ihre Webdesign Inspiration. Und lassen Sie sich nicht zu fest von den Website Trends 2022 beeinflussen. Der passende Stil für Ihr Unternehmen und Ihre Marke hat keine Jahreszahl aufgedruckt. Wollen Sie Ihren Stil finden, dann können Sie auf unsere Webdesign Agentur zählen. Zusammen finden wir Ihr Webdesign.