Es ist jedes Jahr wieder spannend, sich in puncto Webdesign Trends neu inspirieren zu lassen und auf aktuelle und kommende Entwicklungen zu schauen: Von welchen Ästhetiken müssen wir uns in Zukunft verabschieden? Und welche Trends werden die Designwelt in den Folgejahren beherrschen? Webdesignerin Sonja Hoffmann hat ihre Einschätzung für 2020 im Gepäck.
Die besten Webdesign Trends 2022
Na, welche Trends haben sich bis heute gehalten? Hier sind die wichtigsten Webdesign Trends 2022, die du unbedingt kennen solltest.
Auslaufende Webdesign Trends
Verschiedene Quellen scheinen sich darüber einig zu sein, dass die Ära des Flat Designs im Jahr 2020 erst mal etwas in den Hintergrund treten wird. Zum einen wird vermutet, dass andere Designs schlichtweg in den Vordergrund rücken werden. Und zum anderen, dass sich hier ein Wandel in Richtung Semi Flat Design ankündigen könnte.
Zudem nehmen Illustrationen zu, überwiegend handgezeichnet und weit entfernt vom Perfektionismus. So werden nicht nur Header eine persönlichere Note aufweisen, sondern auch fest integrierte Elemente, wie zum Beispiel Icons und Buttons. Denn Webdesign – da sind sich die verschiedenen Experten in Fachpublikationen einig – hatte die letzten Jahre einen zu künstlichen und perfekten Touch. In Zukunft wird mehr auf Individualität und Persönlichkeit geachtet.
Bleibende Designs
Gradients kamen mit der Weiterentwicklung des CSS und werden uns auch zukünftig erhalten bleiben. Hier scheint es noch ausreichend Bedarf an Exploration und Ausarbeitung zu geben. Auch 2020 dürfen wir gespannt sein, was uns an Variationen und Kombinationen erwartet. Farbverläufe nehmen zudem in der Logogestaltung weiterhin einen festen Platz ein.
Laute Farben und Minimalismus
Die Fülle an Informationen, mit der wir heutzutage konfrontiert werden, zwingt uns dazu, unsere Informationen übersichtlicher und knackiger darzustellen. Sinnvoll genutzte Flächen sorgen hier dafür, dass der User sich schneller durch die Inalte arbeiten kann und dementsprechend ein angenehmeres, aber auch effizienteres Nutzererlebnis hat. Minimalismus, insbesondere das Nutzen von Whitespace, wird auch im kommenden Jahr wesentlicher Bestandteil gestalterischer Konzepte sein.
Minimalismus – also ein sehr schlichtes und reduziertes Design – kommt vermehrt auch in Form von monochromatischen Variationen zur Geltung. Hier darf dann gerne auch auf laute und aussagekräftige Farben zurückgegriffen werden.
Naturfarben bleiben angesagt
Der Jahreswechsel bringt mit seinen unendlichen Forecasts auch dieses Jahr wieder Anregungen für „die Farbe des Jahres” mit. Welche sich, da sind die meisten Designer sich einig, auch weiterhin im Bereich der Natur befindet, wird. Von sanften Grün- und Blautönen werden wir auch 2020 einiges zu sehen bekommen, mit einer Tendenz für „Mint”.
Collagen: Layout, Fotos & starke Typografie
Auch im Jahr 2020 wird es vermutlich noch einen Hang zu asymmetrischen Layouts geben. Vor allem Bilder und Fotografien werden mit Illustrationen und “Bold Typography” kombiniert. Eine Mischung aus grafischen Elementen und Bildmaterial rundet somit den minimalistischen Trend für das kommende Jahr spannend ab.
Unsere User stehen im Mittelpunkt
Auch zukünftig liegt der Fokus von gutem Webdesign auf dem User. Vor allem im Bereich E-Commerce steht in allen kreativen Entscheidungen das Nutzungserlebnis des Endverbrauchers im Vordergrund. Klare Designs, die einfach zu navigieren und zu verstehen sind, lösen abstrakte und unübersichtliche Layouts ab. Die User Journey soll so simpel und unkompliziert wie möglich gestaltet werden. Farbliche abgesetzte Call to Action werden dabei gezielter zum Einsatz kommen.
Neben klar strukturierten Onlineshops wird vor allem das Responsive Design weiterhin priorisiert. Warum? Mittlerweile greifen wir in der westlichen Welt zu fast 60 Prozent von unseren mobilen Geräten auf das Internet zu.
Nachdem nun auch Google offiziell die mobile Nutzerfreundlichkeit zu einem großen Faktor im Ranking gemacht hat, sollte niemand mehr seinen mobilen Webauftritt vernachlässigen, der auch im Jahr 2020 noch Besucher auf seiner Website verzeichnen möchte. So werden wir auch zukünftig nicht von den Begriffen “mobile first” und “responsive” befreit werden.
Zudem bleibt die Einbettung von SVG Dateien weiterhin ein aktuelles Thema. Auch, wenn es keine neuen Informationen sind, verwenden immer noch zu wenige Websites vektorisierte Grafiken. Vor allem auf den kleineren Geräten haben Vektorgrafiken erhebliche Vorteile – etwa schnellere Ladezeiten und außergewöhnlichen Schärfe bei hundertprozentiger Skalierbarkeit.
Spätestens seitdem die DSGVO uns alle in Panik versetzt hat, sind wir uns dessen bewusst, dass unsere Daten gespeichert werden. In Zukunft sollen diese sinnvoller, und mehr auf den Nutzer zugeschnitten, eingesetzt werden. Targeted Ads sind jetzt schon keine Neuheit mehr. Push Notifications werden wir von jetzt an von unseren besuchten Websites erhalten können, auch wenn der Erfolg dieser für uns Websitebetreiber schwer nachvollziehbar sind (Was kommt wirklich an? Was wird tatsächlich gelesen?).
Besonders dann macht der Einsatz von Chat Bots und KI mehr Sinn, da diese auf beidseitiger Interaktion basieren und einen klar erkennbaren Mehrwert für den Verbraucher bieten.
„*“ zeigt erforderliche Felder an
Globale Webdesign Trends
Wir haben erst einmal genug von starren Websites: 2020 wird bewegter und animierter. Bisher wurde das Medium Video im Webdesign relativ sparsam eingesetzt. Schließlich müssen beim Einsatz von Bewegtbild auch immer die Konsequenzen auf die Ladezeit, Absprungrate und das Google Ranking berücksichtigt werden.
Spätestens seit Einführung des neuen webfreundlicheren Formats .webm hat sich das etwas gelockert. Um in Zukunft interessantere Webauftritte zu gestalten, werden wir also öfter animierte Illustrationen in Form von GIFs sehen. Hinzu kommen vermehrt sogenannte Mikrointeraktionen, die die Navigation durch die Websites übersichtlicher und freundlicher gestalten werden.
Mikrointeraktionen sind kleine Animationen, die uns als User zeigen, dass hier gerade etwas passiert und passieren soll. Sozusagen eine verspielte Form des “Feedbacks”. Als Nutzer fühlt man sich dadurch mehr integriert und kann sich leichter mit der Website/dem Produkt identifizieren. Zudem können diese Interaktionen für positive Überraschungsmomente sorgen und als Leitfaden dienen, um die User Journey klarer zu definieren. Der User Flow gestaltet sich dadurch einfacher – der Nutzer findet also eher auf der Website, was er sucht.
Eine Mikrointeraktion kann zum Beispiel so aussehen:
3D und 3D light im Webdesign
Als Nebeneffekt zur Verbreitung von Augmented Reality (AR) und Virtual Reality (VR) erwarten uns künftig mehr 3D Elemente integriert in unsere Webdesigns. Wobei AR/VR auch im nächsten Jahr noch nicht den Durchbruch ins Webdesign schaffen wird. Gründe hierfür sind zum einen zu hohe Kosten. Aber auch der Widerspruch zu den optimierten Ladezeiten und den Designs, die den Fokus auf den Endnutzer legen. Denn der Einsatz neuer Technologien ergibt natürlich am meisten Sinn, wenn es dadurch einen ersichtlichen Mehrwert gibt.
Als kostensparende Alternative, also eine Art “3D light”, sind übereinander platzierte Elemente stark im Kommen. Vor allem mit leichten Schatten unterlegt suggerieren diese eine leichte Dreidimensionalität und erzeugen mehr Tiefe.
Datenschutz im Fokus
Seit Inkrafttreten der Datenschutz Grundverordnung (DSGVO) im Mai 2018 wurden schon einige Verstöße geahndet. Darunter auch schwere, wie Heise Online in diesem Artikel berichtet. Auch hat man sich mittlerweile auf ein Konzept zur Bemessung der Bußgeldhöhe geeinigt, welches u.a. den Umsatz des Unternehmens sowie die Schwere der Tat berücksichtigt.
Des Weiteren erwartet uns im Jahr 2020 voraussichtlich die Erlassung der ePrivacy Verordnung (ePVO), welche die Rechtslage zu Tracking Tools klären wird. Die ePVO sollte ursprünglich mit der DSGVO gemeinsam veröffentlicht werden. Beide Verordnungen dienen erst mal dem Datenschutz. Welche Vorgaben die ePrivacy Verordnung für Websitebetreiber mit sich bringen wird, erklärt Rechtsanwalt Mario Steinberg in diesem Beitrag.
Web Tools und Frameworks
Auch nächstes Jahr werden wir noch mit einem Überfluss an “Programmierhilfen” in Form von Frameworks und einem weiteren Zuwachs an vermeintlich leichter zu lernenden Sprachen leiden. Der Markt hat seine Sättigung allerdings fast erreicht – und unsere Developer ihre Kulanzgrenzen. Die Frameworks, die anfänglich einer einfacheren Implementierung von Designs angedacht waren, haben in ihrer Fülle in der Vergangenheit auch für Komplikationen gesorgt. Zukünftig, wenn auch noch nicht direkt nächstes Jahr, werden hier aber wieder simplere Einheitslösungen angestrebt.
Es wird besonders viel Hoffnung auf React gelegt
JavaScript bleibt weiterhin ein wichtiger Bestandteil in der Webprogrammierung, unterstützt von React – einer JavaScript Library zur Erstellung von User Interfaces.
React hat zwar im Jahr 2019 schon an Wichtigkeit zugelegt, seine Hochphase aber noch nicht erreicht und wird uns auch im Jahr 2020 vermehrt unter die Augen kommen. Mithilfe von React integrieren wir sehr wahrscheinlich auch zukünftig UI Elemente in unseren Websites und Webapplikationen. Für Frontend Developer also definitiv ein Tool, das sich anzueignen lohnt. Das gilt vor allem auch im WordPress Kontext, da der neue Gutenberg Block Editor auf React aufbaut.
PHP, Ruby, Python, Node.js, Java, und .Net bleiben außerdem relativ gleichwertige Programmiersprachen für das Backend.
Der Nutzer wird im Front- und Backend noch mehr im Fokus stehen
In Zukunft werden wir nicht nur Backend Daten generieren und auswerten, sondern diese auch auf das Frontend ausweiten. So werden wir mehr verstehen lernen, was wann wie auf unseren Websites geklickt wird und können somit die UI effizienter anpassen und die UX dauerhaft verbessern.
Fazit: 2020 and beyond
Anhand der aktuellen Entwicklung können wir langfristig davon ausgehen, dass das Web zukünftig noch interaktiver wird. Ich sehe durchaus größeres Potenzial für Erlebnisse, die direkt und individuell auf den einzelnen User zugeschnitten sind. Sei es zum Beispiel durch eine ausgefallene und kreative Navigation der Seite, wie bei dem Portfolio von Bruno Simon.
Generell soll das Internet mehr Spaß machen – sei es durch kreativere und persönlichere Ansätze in der Aufbereitung und Wiedergabe von Informationen. Eine wunderbare und spielerische Zusammenfassung von Webdesign Trends für 2020 bietet die New Yorker Agentur Red Collar auf dieser Seite.
Nicht unerwähnt lassen möchte ich außerdem die Implementierung von Voice Navigation. Auch wenn diese Technik im Jahr 2020 wahrscheinlich noch nicht ihren großen Durchbruch haben wird, können wir uns langfristig darauf einstellen. Sowie, noch mal unter dem Fokus auf die User: Websites, die bedachter auch auf Personengruppen mit Einschränkungen zugeschnitten sind.
Somit können wir abrundend daraus schließen, dass 2020 in puncto Webdesign ein spannendes Jahr wird, in dem wir unser angesammeltes Wissen verfeinern und leichter zugänglich darstellen wollen – und das mit mehr Persönlichkeit und Spaß an der Sache.
Hast du Feedback zu den genannten Entwicklungen oder weitere Webdesign Trends für das Jahr 2020 im Blick? Wir freuen uns über deinen Kommentar!
Webdesign Trends 2020 – deine Fragen
Welche Fragen an Sonja hast du? Nutze gerne die Kommentarfunktion. Du willst über neue Beiträge zum Thema Onlinemarketing informiert werden? Dann folge uns auf Twitter, Facebook, LinkedIn oder über unseren Newsletter.
Hi, sehr interessant. Ist ja jetzt auch schon wieder einige Jahre her. Trotzdem sehr interessant, wie sich Webdesign entwickelt. Liebe Grüße von Webdesign Düsseldorf
Sind Minimalismus und viel Whitespace nicht gefühlt schon immer irgendwie in?
Hier schreibt einer über 2021 und so wie ich sehe, ist das auch dann wieder total angesagt…
https://www.chris-hortsch.de/webdesign-blog/innovative-webdesign-trends-2021.html
Glaube mit Trend hat das wohl nichts mehr zu tun. Wahrscheinlich eher eine Art Basics für jede Gestaltung?
VG, Floyd
Vielen Dank für diese anregenden Design-Einblicke!
Es ist wirklich erstaunlich, wie sich das www entwickelt hat.
Ich komme noch aus einer Zeit, wo man sich Textnachrichten über Modem und Mailbox geschickt hat,
und habe jede Stufe der Entwicklung – sogar Backstage/also als Entwickler – miterlebt.
Auch wenn ich manchmal Bedenken habe, wo uns KI und Digitalismus noch hinbringen werden…
aber vermutlich habe ich als Kind der 80er einfach zu viele Cyber Thriller gesehen. 😉
Hi Sonja
Minimalismus und viel Whitespace – da bin ich vollkommen deiner Meinung. Weniger ist mehr, die wichtigsten Informationen sollen vermittelt werden und erst auf spezifischen Landing Pages auf Details eingegangen werden.
Die Farbe des Jahres hingegen beziehe ich praktisch nie in meine Designs ein – du schon? Ich wage mal zu behaupten, dass Mint längst nicht für alle Websites passend ist und sich deshalb an den Farben eigentlich nie grosse Dinge ändern. Struktur ja, Farbe nein.
Spannend wäre auch zu sehen, wie die Beispiel-Layouts im Beitrag auf Mobile präsentiert werden. Alle Screenshots sind für Desktop, doch für mich gilt immer noch: Mobile first.
Auch sehr interessant fand ich den Abschnitt zum Datenschutz. Da gabs ja tatsächlich schon einige heftige Strafen für die Grossen, von denen ich bisher nichts wusste.
Viele Grüsse
Michael
Hallo Michael,
vielen Dank für deinen Kommentar.
Die Farbe des Jahres habe ich tatsächlich auch mit einem zwinkernden Auge mit aufgenommen. Wobei der Hang zu natürlicheren Ressourcen und damit auch den dazugehörigen Farben doch schon interessant ist und zumindest für mich auch wichtig.
Zum Thema Mobile-First stimme ich dir auch zu. Es gibt ja erstaunlicherweise nach wie vor noch zu viele Webseiten, die nicht auf mobile Geräte ausgelegt sind. Bei meinem nächsten Artikel werde ich daher versuchen auch mobile shots zu integrieren.
Viele Grüße
Sonja