Webdesign Trends 2020: Was ist 2020 angesagt? Was ist 2021 zu erwarten?

Es ist nicht immer das schlauste, allen Trends im Webdesign zu folgen. Das Jahr neigt sich jedoch langsam dem Ende zu, daher kann man Stand jetzt sagen, welche Webdesign Trends 2020 sich bewährt haben und weiter relevant bleiben. 

Ich empfehle jedem, dass er sich an diesen Trends orientiert. So stellt man sicher, dass die Website auch in Zukunft noch auf positive Resonanz stößt. Denn man kann sagen: Je moderner das Design, desto länger bleibt sie relevant. 

Zusammenfassung: Alle Webdesign Trends 2020

Diese Design Patterns gehören zu den Webdesign Trends 2020:

• Fullscreen Hero Images / Illustrationen,
  
• Mikro -und Makroanimationen,
• Skeumorphism,
• Glassmorphism,
• Typographie basierende Layouts

Diese Entwicklungen geben auch einen Hinweis auf die Webdesign Trends 2021.

Neumorphism und bunte Farbverläufe sind im Abschwung

Neumorphism (auch Soft UI genannt) war am Anfang des Jahres noch oft zu sehen. Gegen Mitte und Ende des Jahres haben jedoch andere Webdesign Patterns übernommen. Großflächig bunte Farbverläufe waren dagegen das ganze Jahr irrelevant. Mein Fazit: Neumorphism kann man immer noch benutzen; von bunten Farbverläufen sollte man die Finger lassen. 

Beim Neumorphism (siehe Abbildung 1) werden durch die Kombination von hellen und dunklen Schatten eine weiche Haptik erzeugt. Dieser Trend sieht sehr futuristisch aus. Außerdem ist er nicht so verbreitet wie man bei einem Trend denken würde.

Grund dafür: dieses Webdesign Pattern ist nicht für alle Branchen sinnvoll. Es wird ein sehr futuristisches und minimalistisches Erscheinungsbild erzeugt. Es werden keine bis wenig bunte Farben verwendet, sondern nur eine Art Off-White und ein Anthrazit grau. 

Neumorphism kann auch 2021 und länger verwendet werden. Dies muss man jedoch individuell in jedem Fall bewerten, ob es zum Unternehmen und Nutzer passt.

Von bunten Gradienten rate ich jedoch klar ab! Sie sehen kindisch aus. Aus Sicht der Web Accessibility (Barrierefreiheit) waren sie auch eher mittelmäßig. Man kann also froh sein, dass dieser Trend vorbei ist.

Abbildung 1: Das ist Neumorphism. Das Design wirkt sehr futuristisch und minimalistisch. Hier lässt sich besonders gut der Darkmode implementieren. Der Look passt jedoch nicht zu jedem, da die Benutzeroberflächen wenig Farben verwenden. Außerdem brauchen Nutzer lichtstarke und hochauflösende Displays (z.B. Retina Displays), damit dieses Design funktioniert. Das ist zwar heutzutage aller meistens der Fall, trotzdem muss man die Zielgruppe beachten.

Abbildung 2: Hier ein Designentwurf meiner Wenigkeit für eine Website aus dem Jahr 2019. Man kann froh sein, dass diese verrückten Farbverläufe nicht mehr so gefragt sind. Insgesamt rate ich von diesem Webdesign Pattern für die Zukunft ab.

Webdesign „Trend“ 2020: Typografische Layouts

Back to the basics, Konzentration auf das absolut Wesentliche! Typografie ist in den richtigen Händen ein extrem ausdrucksstarkes Mittel. Dieser Designtrend ist mit Abstand der anspruchsvollste umzusetzen, da leider die wenigsten Webdesigner mit Schrift umgehen können. Typografie kann man nicht direkt als Trend bezeichnen. Die Art und Weise wie Typografische Layouts umgesetzt werden jedoch schon.

Die modernen Typografischen Layouts haben inzwischen starke Ähnlichkeiten zu Postern. Der Unterschied fängt schon in der Gestaltung an. Während die Elemente in anderen Layouts an einem Grid System ausgerichtet werden, richten sich die Elemente bei den Poster-ähnlichen Layouts an sich gegenseitig aus.

Der Designprozess ist hier sehr komplex. Viele Webdesigner besitzen nicht die Fähigkeit mit Typografie umzugehen. Der veränderte Designprozess ist auch für viele schwierig. Die Umsetzung gestaltet sich ebenso sehr komplex. Es werden sehr viele Breakpoints benötigt, um das Layout responsive zu machen.

Bei der Gestaltung beschränkt man sich auf wenige Designparameter. Also wenig Farben, Formen und Grafiken. 

Also tendenziell sehr kompliziert und viel Potential, dass es schlecht wird. Wenn du jedoch den richtigen Designer gefunden hast wird das Ergebnis herausstechen.

Zeitlos – Zeitloser – Typographie

Richtig ausgeführt müsstest du theoretisch nie wieder das Design deiner Website überarbeiten lassen. Wieso? Weil Typographie in 50 Jahren den selben Stellenwert haben wird wie heute. Wieso weiß ich das? Weil es vor 50 oder 100 Jahren genauso war. Typography matters!

Webdesign Trend 2020: Glassmorphism

Beim Glassmorphism wird optisch opakes Weißglas über Elemente gelegt. Dadurch sind die darunterlegenden Farben zu erkennen; Umrisse erscheinen jedoch unscharf. Designs mit Glassmorphism sehen futuristisch aus. Glassmorphism ist bei Designer besonders Richtung Ende des Jahres 2020 in Aufschwung gekommen. Außerhalb der Design Community ist der Trend noch nicht sehr verbreitet. User werden es als einzigartig wahrnehmen.

Beim 3. Beispiel im Image Slider werden z.B. bunte Farbverläufe mit Glassmorphism kombiniert. Weiter oben habe ich die die bunten Farbverläufe als einer der abgelaufenen Trends abgetan, die man nicht mehr benutzen sollte. In Kombination mit dem Glassmorphism entsteht jedoch eine neue Richtung.

Durch die dahinterliegende unscharfe erzeugt Glassmorphism ebenfalls Räumlichkeit. Dies ist in den ersten beiden Slides zu erkennen.

Dieser Webdesign Trend ist überhaupt gar kein Trend: it's timeless

Der Einsatz von Glassmorphism ist auch noch in Zukunft ohne Probleme möglich. Schlichtweg weil dieses Design futuristisch wirkt. Dieses Webdesign Pattern lässt sich also getrost beim Relaunch deiner Website einsetzen.

Webdesign Trend 2020: Fullscreen Hero Images / Illustrationen

Bilder, die das Produkt (emotional) in den Vordergrund stellen, sind sogenannte Hero Shots. 2020 war besonders ein Jahr für illustrative Hero Shots. Der Vorteil von Illustrationen ist, dass man viel mehr Dinge abbilden kann als mit Fotos. Somit lassen sich einfacher besser passende Illustrationen finden als Fotos. 

Die Hero Shots sind perfekt in die restliche Seite eingearbeitet. Sie wirken nicht als Fremdkörper, sondern als fester Bestandteil.

Außerdem hier zu sehen: Skeumorphism und Animationen. Alle Grafiken wirken dreidimensional. Oftmals werden sie zusätzlich durch Animationen zum Leben erweckt. Zwei weitere Trends, auf die ich später nochmal eingehen werde.

Im Image Slider unten sind 3 exemplarische Beispiele dieses Trends.

Dieser Trend ist auch in Zukunft verwendbar

Es ist sicher zu sagen, dass dieses Design in den nächsten Jahren nicht aus dem Trend gerät. Damit dieser Stil funktioniert müssen passende Illustrationen verwendet werden. Die Illustrationen sollten zum:

• Thema passen,
  
• (Farb-)Ton der Seite harmonieren

Wenn es keine relevanten Illustrationen gibt empfiehlt es sich einen Illustrator zu beauftragen. Vorteil bei extra angefertigten Illustrationen: man hat volle Kontrolle über das was dargestellt wird.

Webdesign Trend 2020: Mikro -und Makro Animationen

Microanimationen oder auch Microinteractions (z.B.: Sliden, Mouseover Effekte, Overlay Effekte) unterstützen den Nutzer bei der Bedienung des Interface. Auf jeder guten Website sind Microinteractions zu finden. Großflächige Animationen werden jedoch inzwischen ebenso inflationär verwendet. Aufwändige Scrolling Effekte und Animationen, die die ganze Seite überspannen. Joy of Use ist sehr hoch. Aus User Experience und Accessibility Sicht ist das jedoch kritisch zu bewerten.

Video 1: Sieht schon extrem lässig aus! Aber Barrierefrei ist etwas anderes. Menschen mit Einschränkungen bekommen hier Probleme. Selbst auf meinem Mac, der bis zum Anschlag konfiguriert ist, ruckelt die Website. Anderes Beispiel ist die Website von Ultra Super New. Es macht zwar Spaß diese Website zu bedienen, die Seite ist jedoch nicht besonders robust, also nicht wirklich kompatibel mit älteren Software Versionen.

Bewegung sieht einfach gut aus, es wirkt spannend. Dagegen lässt sich auch nichts sagen. Dennoch haben Websites neben dem ästhetischen eine funktionale Funktion. Übermäßige Animationen machen es zunehmend schwieriger, diese Inhalte zu konsumieren.

Komplexe Animationen verbrauchen außerdem viel Rechenleistung. Nicht jeder Nutzer hat den besten PC/Mac; das führt zu unschönem ruckeln und schlechter User Experience

Hinsichtlich der Barrierefreiheit sieht es genauso suboptimal aus. Die 4 Designprinzipien für Barrierefreiheit: 

• Wahrnehmbarkeit, 
• Bedienbarkeit, 
• Verständlichkeit sowie 
• Robustheit (Kompatibilität mit älteren Softwareversionen, Cross-Browser Support)
  

...werden beim übermäßigen Einsatz von Animationen nicht erfüllt.

2019 betrug die mobile Internetnutzung schon 74%, Tendenz steigend. Daher wären die Ressourcen sinnvoller in die Optimierung der mobilen Webseiten gesteckt. Denn auf Smartphones sind solche Animationen schlichtweg nicht realisierbar. Oder wenn überhaupt nur in stark abschwächter Form.

Denn diese komplexen Animationen kosten einiges an Geld. Design und Implementation der Animationen ist nämlich extrem aufwändig.

Dieser Trend ist mit Vorsicht zu genießen!

Ich möchte nicht sagen, dass diese Art und Weise des Webdesign keine Zukunft hat. Hier kommt es ausschließlich auf die Ausführung und Zielgruppe an. Der Einsatz von Bewegung benötigt einen Designer, der sich mit User Experience und Web Accessibility auskennt. Viele Webdesigner wissen leider nicht, worauf es bei Motion ankommt. Dann entstehen Webseiten, die „flashy“ und „fancy“ aussehen, aber nicht wirklich gut für deine Nutzer sind.

Webdesign Trend 2020 (again): Skeumorphism

Skeumorphism versucht mit Schatten und Farbverläufen Elemente so realistisch wie möglich darzustellen. Diese Designs waren vor 10-15 Jahren angesagt. Die Entwicklung war jedoch hin zum Flat Design. Nun kann man einen Trend zurück erkennen. Schon als Apple beim diesjährigen WWDC 2020 mit Big Sur das neue Design vorgestellt hat, war klar wo die Reise hin geht: Rückkehr zum Skeumorphism!

Abbildung 6: Entwicklung von links nach rechts: Skeumorphism → Flat Design → Skeumorphism. Anhand der Designs der großen Betriebssysteme lassen sich Designtrends ablesen. Die Icons des neuen Apple OS zeigen: Es geht tendenziell wieder zum Skeumorphism zurück.

Fairerweise muss man festhalten, dass das neue Skeumorphism eine Kombination des ganz alten Skeumorphism und des Flat Designs ist. Textur und Haptik sind also wieder im Kommen.

Du kannst also durchaus Räumlichkeit (Skeumorphism) bei deiner Website in Betracht ziehen. Sei es bei Abbildungen, Icons oder sonstigen Interaktionselementen auf deinen Webseiten.

Fazit: Welche Trends sind am vielversprechendsten für die Zukunft?

Von allen genannten Trends ist das Typografische Design mit Abstand am vielversprechendsten. Wenn ich dir also ein Webdesign für dein Website empfehlen kann, dann sind es Layouts, die auf Typographie basieren. Der Einsatz von Schrift muss gelernt sein, daher achte darauf, wen du für dein Vorhaben anheuerst. Lass dir am besten ein Sample machen!

Glassmorphism, Neumorphism und Skeumorphism sind schon deutlich mehr trendy und etwas weniger timeless. Sie sind jedoch trotzdem eine sichere Wahl für die Zukunft.

Die Screenfüllenden Hero Illustrationen sind inzwischen eher einfallslos. Webdesigner haben dieses Design bis zum Geht-nicht-mehr für Webseiten verwendet. Ich würde daher eher abraten. Objektiv gesehen werden sieh es jedoch modern aus. Man kann sich also sicher sein, dass es auch in Zukunft weiterhin verwendet wird. Nur ws sieht leider nicht modern aus.

Der Einsatz von übermäßigen Animationen kann einen negativen Einfluss auf die Accessibility und User Experience haben. Ich rate dir daher einen Experten hinzuzuziehen!