Website Trends 2022

Ist deine Website schon bereit für 2022?

Der ein oder andere Trend widerspricht sich vollkommen (Minimalismus zu Retro Design).
Auch hier gilt, was gefällt und anspricht, ist Trend ;)
Es sollte natürlich auch zu dir und deinem Business passen.

Kennst du schon die neusten Trends oder bist du der Meinung ein refresh könnte nicht schaden? Dann lass dich inspirieren und schau was du selbst umsetzen möchtest.

In den nächsten Wochen, werde ich zu den jeweiligen Trends, dir die passenden Beispiele zeigen. Schau also gerne immer wieder vorbei oder abonniere mich auf Instagram um nichts zu verpassen.

Wenn du die ersten Beispiele sehen möchtest dann schau hier unter dem Link. Die ersten Trends habe ich umgesetzt auch um dir zu zeigen was alles möglich wäre und welche Stil zu dir passen könnte. Diese Website ist dann zum zeigen wie unterschiedlich sie aussehen kann.

Liebe Grüße Corinna

klare Navigationsstruktur

 - weniger Menüpunkte - mehr Unterpunkte

Verschlanke deine Navigation auf maximal 5 Oberpunkte. Fasse zusammen was zusammen gehört. Definiere deine Unterpunkte aussagekräftig.

Minimalismus

klare Struktur zu wenig Farbe mit Details und viel Weißraum. Ablenkende Elemente werden entfernt. Weniger ist mehr, aber es heißt nicht wieder ins reine schwarz/weiß, sondern auch mit Farbe. Dazu ergänzt sich der nächste Trend vorzüglich.

Erdigefarben - Erdtöne

Erdige und beruhigende Farben stehen wieder hoch im Kurs. Pastelltöne und weiche Übergänge werden gezielt eingesetzt um die Nachhaltigkeit in den Vordergrund zu bringen.

Hero-Videos

In immer mehr Bereichen zählt das bewegte Bild. Längst ist Instagram ein Kanal für Videos, kurze Filme die den Besucher mitnehmen. So soll auf der Website ein Video den Besucher gleich mit nehmen, das Thema näherbringen oder einfach inspirieren. Immer mehr Besucher  wollen ihre Informationen und auch ihren Mehrwert in Videos erfahren. 

Symetrische Formen

Schon 1990 wurden Websites eher in Tabellenform aufgebaut. Heute kehrt dieser Trend zurück. Klare Aufteilungen, Trennlinien, Umrandungen werden gezielt als Design Element eingesetzt. Dies soll den Besucher durch die Website leiten und von Produkt (Objekt/Thema) zu Produkt zu wandeln. Die Website geht also wieder in aufgeräumt und passt somit zum Trend Minimalismus durch klare Strukturen und wenig Ablenkung.

Barrierefreiheit

Immer mehr geht der Fokus auf den Bereich Barrierefreiheit. Fast 1 Milliarde Menschen weltweit verlassen sich auf spezielle Funktionen, die ihnen das reibungslose Navigieren im Internet ermöglichen. Im Webdesign wichtig das die Farben und Schriften lesbar sind und genügend Kontrast aufweisen. Um deine Farben zu überprüfen folge diesem Link, dort erhältst du Informationen für die optimale Schriftgröße, Schriftfarbe zu welchem Hintergrund passt und die Barrierefreiheit unterstützt. Deine Alt-Tags von Bildern werden von diesen Readern interpretiert, bedenke dies bei der Beschreibung, nicht nur SEO sondern auch für die Besucher.

Verläufe - Farbverläufer per CSS

Farbverläufe stehen für fließende Übergänge und geben der Seite mehr Tiefe. Manch einer mag nur den Button in einem Verlauf erscheinen lassen, andere setzten ganze Hintergründe und Bilder in den Verlauf. Schön ist was gefällt. Dieser Trend beißt sich etwas mit Minimalismus, ergänzt sich aber schön zu symmetrisch und zu Retro-Desings. Die einen neigen zu Farbe, die anderen zu Erdigentönen und ruhigen Farbe. Jeder wie er es mag. Um den Verlauf einmal zu testen oder du benötigst den CSS-Code, dann kann ich dir diese Seite empfehlen.

Retro-Design

Alles kommt irgendwann einmal wieder. Ich persönlich bin nicht so der Fan von Retro-Designs, aber zu wem es passt und wen es anspricht, kann sich hier wieder komplett wohlfühlen. Retro is back mit all seinen Farben (knallig, bunt) Formen (Tabellen und Rahmen) und Formaten und Schriften (Courier, Comic Sans).

Scrolleffekte

Überraschungen bei Scrolleffekten, veränderte Bilder und vieles werden immer beliebter. Der einfachste Effekt ist der parallax Effekt. Diesen aber nicht zu häufig verwenden, gezielt und für Aufmerksamkeit und man bedenke, Mobile-First lautet die Devise und wer mag schon ewig auf dem Mobilephone scrollen. Für die Desktop Darstellung ein Traum, für Mobile bedingt verwendbar.

Weniger ist da manchmal mehr. Als Beispiel hier: www.landfrauen-Schorndorf.de

Split-Screen

Kennt man es noch aus dem TV ist es auch längst auf Websites gerne eingesetzt. Man teilt den Monitor sozusagen in zwei Flächen, ähnlich einem Magazin. Wie diese Flächen nun gestaltet werden obliegt jedem selbst. Die einen stellen auf die eine Seite ein Bild und auf die andere Seite die Erklärung, wiederum kann man sich auf einer Seite auch gut die Navigation vorstellen und wichtige Details und auf der anderen wechseln die Elemente/Seiten, somit wandelt man auf nur einer Seite mit einem geteilten Monitor. Für Desktop-Design ein Hingucker, bei Mobile-Phones nicht wirklich umsetzbar,

Übergroße Schriften

Typografie in großen Schriftgrößen, meist in Bold oder Kursiv gesetzt als "Eye-Catcher". Mit Animation (Hover-Effekt für Bewegung), aber Vorsicht damit der Text auch lesbar bleibt.

Die Übergroßen Buchstaben auf dem Header ersetzten meist das Hero-Bild, Dazu mit dem Scroll-Effekt oder Hover-Effekt gepaart wird es meist sehr spannend, der Besucher wird neugierig und möchte mehr erfahren. 

Dazu kommt bei der Typografie die Serifenschrift im WebDesign zurück. Lange ist man davon abgekommen, aber Serifenschriften stehen für Glaubwürdigkeit und edel. Zeitungen werden immer in Serifenschriften gedruckt, man ging aber davon aus, das am Monitor die Serifenlose Schrift besser zu lesen ist. Übermäßigen Einsatz von Serifen würde ich aber vermeiden, aber als hängender Buchstabe oder Eyecatcher oder Element für die Navigation gut einsetzbar.

Animationen & Microinteractions

Kleine Animationen auf der Website, eingesetzt über java oder CSS, amüsieren den Besucher und lockern zugleich auf. Früher würde dafür Flash verwendet heute geht es mit JavaScript-Bibliotheken wie jQuery auf und mit Ihnen auch wieder Bewegung. Inzwischen lassen sich schon mit CSS3 schöne Effekte erzielen.

Microinteractions erhöhen die Benutzerfreundlichkeit überall da, wo der User mit der Seite interagieren kann und dort sollten sie auch zum Einsatz kommen, z.B. Navigation, Links, Buttons, Formulare, dezent und übersichtlich.

Vermutlich fragst du dich warum ich selbst auf meiner Seiten davon nichts umgesetzt habe. Das kann ich dir ganz einfach erklären, ich muss mich mit manchen Trends erst noch anfreunden um sie für mich zu verwenden und manchmal ist zeitlos einfacher.  Ich hab dir dafür eine extra Seite aufgebaut, dort zeige ich dir den ein oder anderen Trend genauer.  Besser aber ist es die Trends zu kennen und beurteilen zu können ob sie für dich passen und das finden wir gemeinsam raus.