15 wichtige Webdesign Trends 2021 im Überblick

Diese Trenderscheinungen tauchen 2021 beim Surfen im Web immer wieder auf den Screens auf. Grafik: Adobe Stock, (c) monkgraphic

Webdesign-Trends kommen und gehen. Doch auch im Jahr 2021 haben sich bereits einige Trenderscheinungen herauskristallisiert, die wir beim Surfen im Web noch längerfristig auf unseren Screens wiederfinden werden. In diesem Artikel möchten wir die wichtigsten davon zusammenfassen.

In unserer Liste werden Sie nicht nur völlig neue Webdesign-Trends entdecken, sondern auch solche, die sich 2021 weiter gefestigt haben und somit noch relevanter geworden sind.

Die wesentliche Frage beim Konzipieren einer modernen Website lautet: Sollte man den vorherrschenden Webdesign Trends unbedingt folgen oder ist das gar nicht notwendig? Wie so oft kommt das immer auf das jeweilige Projekt an, doch Fakt ist:

Es hat immer einen Grund, warum sich ein Webdesign-Trend so stark etabliert hat. Gesteigerte Benutzerfreundlichkeit, das Schaffen optischer Highlights, bessere Kompatibilität mit verschiedenen Endgeräten und nicht selten auch mehr Conversions – um nur einige Benefits zu nennen.

Sprich: Mit dem Beherzigen der folgenden Trenderscheinungen können Sie Ihre Website unter Umständen performanter, zeitgemäßer und erfolgreicher machen.

Mobile-first statt nur Mobile-friendly

Die Internetnutzung wird immer mobiler und dieser Trend wird sich auch nicht mehr umkehren – ganz im Gegenteil. Insofern sollte eine Website 2021 nicht einfach nur „auch am Handy funktionieren“, sondern primär für Mobilgeräte entwickelt werden. Ein Website-Layout sollte heute also zuerst für kleine Displaygrößen gestaltet werden und erst dann Step-by-Step für Desktop-Monitore. Der Ansatz „Mobile-first“ basiert auf folgende Überlegungen:

  • Was auf kleinen Screens funktioniert, tut das grundsätzlich auch auf größeren Monitoren. Umgekehrt ist das definitiv nicht der Fall.
  • Google und andere Suchmaschinen beachten de facto nur mehr die Mobilversion einer Website, um das Ranking zusammenzustellen.
  • Der Content (also die Inhalte) einer Website werden immer wichtiger, Mobile-first-Designs stellen diesen von Haus aus in den Fokus.
Beim Ansatz „Mobile-first“ werden Website-Layouts zuerst für kleine Dispalys entworfen, und erst in weiterer Folge für Desktop-Screens adaptiert. Grafik: Adobe Stock, (c) Backwoodsdesign

Mobile-first bringt also oft auch direkt verbesserte User Experience mit. Allerdings sollten Sie es mit diesem Webdesign-Trend auch nicht übertreiben. Denn auf vielen eher klassisch geprägten Firmenwebsites überwiegt 2021 immer noch der Desktop-Traffic und beliebte Mobile-Elemente (wie das Hamburger-Menü zum Aufklappen) sind am Desktop schlichtweg selten die Ideallösung. Eine wirklich gute Website funktioniert auf sämtlichen Endgeräten, nicht nur am Handy. Mehr zum Thema Responsive Design.

100% optimiert für Handys und Tablets

Farbwelt: Harmonisch aber abwechslungsreicher

Für das Design jeder Website spielt das Farbschema eine gewisse Rolle. Während Unternehmen bisher oft einfach „blind“ die Farben der Corporate Identity herangezogen haben, wird 2021 einerseits mehr auf Harmonie geachtet, gleichermaßen werden Website-Farben abwechslungsreicher. Warum das kein Widerspruch ist: Für sämtliche Primärfarben gibt es bekanntlich Komplementärfarben, die für das Auge automatisch harmonisch wahrgenommen werden. Harmonische Farbschemata können also auch äußerst bunt sein, ohne völlig chaotisch daherzukommen.

Farbverlauf
Komplexe, großflächige Farbverläufe haben den Vorteil, dass Layouts mit wenig Bildmaterial dadurch aufgelockert werden. Mitunter ein Hauptgrund, warum sie sich im modernen Webdesign so stark etabliert haben. Grafik: Adobe Stock, (c) LIGHTFIELD STUDIOS

2021 besonders im Trend: Sich ähnelnde Farben, die im Farbkreis nebeneinander angeordnet sind, sorgen kombiniert durch Nuancen für harmonische Abwechslung. Beispielsweise: Blau und Türkis oder Orange und Gelb. Im Webdesign geht der Trend bereits jahrelang zu Farbverläufen und Farbüberlagerungen. 2021 werden diese nun mehrdimensional und dynamischer. Verwendet werden bevorzugt gesättigte, lebensechte Farbtöne, wie sie auch in der Natur vorkommen. Ein Vorteil von komplexen Farbverläufen übrigens: Layouts mit wenigen Bildern wirken weniger eintönig und werden aufgelockert.

Diese Überlegungen bei der Farbgebung einer modernen Website dienen auch dazu, alle Arten von Ablenkungen zu reduzieren, Barrierefreiheit zu gewährleisten und die Nutzung der Seite so angenehm wie möglich zu gestalten. In diesem Zusammenhang hat sich auch das Anbieten eines „Dark Mode“ für Websites etabliert, bei dem grelle Farben durch dunkle Hintergründe ersetzt werden, um die Augen zu schonen.

Webdesign Trends: Schrift groß und bold

2021 sollen zentrale Website-Inhalte und wichtige Messages noch mehr Aufmerksamkeit bekommen und sich vom Rest der Seite besser abheben. Ein dafür wesentliches Merkmal ist die Typografie, also die Wahl und Gestaltung des Schriftbildes. Folgendes lässt sich zu diesem Trend feststellen:

  • Dank Technologien wie Webfonts und CSS hat man heute schier grenzenlose Möglichkeiten.
  • Website-Text wird 2021 tendenziell größer und stärker.
  • Moderne, serifenlose Schriftarten bleiben die erste Wahl, werden aber zunehmend durch ausgefallene Retro- oder Typewriter-Fonts ergänzt.

Websites als One-Pager oder Microsite

Von der Landing Page für einen ganz bestimmten Zweck bis hin zur vollumfänglichen Firmenpräsenz: Websites können 2021 auf einer einzigen Seite (ohne Unterseiten) dargestellt werden, ohne viele Kompromisse machen zu müssen.

Das bietet moderne und kompakte Lösungen in Sachen Darstellung und Usability, das Nachladen der ganzen Seite bei Klick auf die Navigation entfällt. Eine schöne Inspirationsquelle für solche Umsetzungen ist das Portal onepagelove.com, wo die schönsten „One Pager“ gesammelt werden. Die Kehrseite? Massenhaft Content lässt sich nur schwer integrieren und Single-Page-Websites haben definitiv Nachteile in Sachen SEO, also wenn Sie Ihre Besucher/innen über Suchmaschinen erreichen wollen.

Microsite Konzept
Microsites sind kleine Websites mit reduzierter Navigationstiefe (Frontpage + einige Unterseiten). Prädestiniert sind sie für Marketing-Kampagnen oder Websites zu deutlich abgegrenzten Spezialthemen. Grafik: Adobe Stock, (c) Visual Generation

Im B2B-Digitalmarketing ist ansonsten auch die Microsite absolut im Trend. Das ist eine schlanke Website, die rund um ein bestimmtes Thema, Event oder eine größere Marketingkampagne aufgebaut ist. Anders als bei der Single-Page-Website kann eine Microsite durchaus weitere Unterseiten haben, die Navigationstiefe ist allerdings deutlich reduziert.

Noch mehr Parallax-Animationen

Parallax-Animationen sind ebenfalls schon einige Jahre relevant, werden im Webdesign anno 2021 aber noch wichtiger. Parallax ist ein Effekt, bei dem Hintergrundgrafiken für das menschliche Auge langsamer als Elemente im Vordergrund bewegt werden. Das erzeugt mehr Tiefe und Realismus, ist aber auch ein beliebtes Stilmittel von Webdesigner, die sich kreativ ausleben möchten.

In diesem Video sind schöne Beispielse des Parallax-Effekts zusammengestellt.

Abstrakte Visualisierungen und Magazin-Style

Insbesondere Unternehmen mit redaktionellen Inhalten (Blogs, News-Medien) lehnen Ihre Layouts immer häufiger an Print-Magazine an. In der Szene ist von „Editorial Styled Layouts“ die Rede.

In Blogs und Online-Magazinen nehmen sich Webdesigner immer öfter Print-Magazine zum Vorbild. Deren Layouts sind nicht selten visuell besonders attraktiv. Grafik: Adobe Stock, (c) Akilmazumder

Dank künstlerisch anmutender Illustration kann man so für einzigartige Präsentation des Contents sorgen. Für kleinere Unternehmen ohne Redaktion und Grafik-Abteilung ist dies durch anpassbare Vektorgrafiken realisierbar, die u.a. auf Stock-Plattformen angeboten werden.

Webdesign Trends
Künstlerische Illustrationen sind ein Upgrade für Web-Content und sind 2021 im Web immer häufiger zu sehen. Vektorgrafiken bieten auch kleineren Unternehmen die Möglichkeit, solche Kreation an die eigene Corporate Identity anzupassen. Grafik: Adobe Stock, (c) sodesignby

Stil-Kompositionen: Verschmelzung von Flat und Realismus

In den vergangenen Jahren war der Flat-Look hinsichtlich Webdesign Trends absolut angesagt. Das bleibt auch 2021 so, jedoch wird dieses Stilmittel heute gerne mit anderen Richtungen kombiniert. Dreidimensionale oder fotorealistische Elemente werden über Flat-Grafiken gelegt (insbesondere auch für Produktpräsentationen im eCommerce) und mit dem zuvor angesprochenen Parallax-Effekt versehen. Auch das schafft kunstvolle Hingucker, ist attraktiv fürs Auge und macht Webdesign realistischer und greifbarer.

Nicht-rechteckige Header

Bisweilen waren parallele Strukturen für Website-Layouts aller Art üblich. Dies ergibt sich durch die Anwendung von HTML-Container bzw. am Raster ausgerichteten Spalten-Layouts, früher wäre ein von dieser Form abweichendes Resultat handwerklich einfach viel schwieriger zu realisieren gewesen – da musste man sich schon, wenig elegant, mit dementsprechend gestalteten Grafiken helfen.

Heute ermöglichen die Stylesheet-Sprache CSS sowie skalierbare SVG-Grafiken kinderleicht verspielte Header-Designs, bei denen sich Elemente auch problemlos überlappend darstellen lassen. Das sorgt für optische Auflockerung im World Wide Web und schenkt dem sogenannten Hero-Bereich oben mehr Aufmerksamkeit.

Scrolling-Transformation

Auch Scrolling-Effekte gehören sicherlich zu den großen Webdesign-Trends 2021. Handelt es sich dabei um eine reine Spielerei? Keineswegs! Denn Scrolling ist Interaktion und diese sichtbar zu machen führt dazu, dass der User die Nutzung der Website als Erlebnis wahrnimmt und sich stärker an sie gebunden fühlt.

Eine subtile aber nützliche Variante davon ist übrigens auch hier am HEROLD Marketing-Blog verbaut: Wenn Sie hier nach unten scrollen, baut sich oben ein schmaler gelber Balken auf, so wissen Sie immer Bescheid, an welcher Stelle eines Artikels Sie sich gerade befinden.

Interaktive Kontaktformulare

Ein lieblos verbautes 08/15-Kontaktformular auf einer Firmenwebsite ist ohne Kontext gleichermaßen unschön wie ineffektiv – die Quote an Eintragungen wird recht niedrig bis kaum vorhanden sein. Glücklicherweise geht der Trend hier zur Gestaltung von interaktiven Formularen mit gewisser Intelligenz:

  • Webformulare, die wie ein Quiz oder Survey aufgebaut sind
  • Innerhalb von Kontaktformularen kann via Chatbots eine Unterhaltung nachgestellt werden
  • Logik hinter optionalen Feldern, welche diese rein kontextabhängig erscheinen lässt
Praxistests haben gezeigt, dass sich die Response-Rate eines funktionell erweiterten und auf die Zielgruppe individuell zugeschnittenen Kontaktformulars im Vergleich zur Basisvariante signifikant erhöhen lässt. Hier wurde ein Standard-Kontaktformular um einen Produktkonfigurator erweitert. Screenshot, Quelle: lamellendach.at

Standard-Templates vs. individuelle Kreationen

Bei diesen Webdesign Trends geht in zweierlei Richtungen: Einerseits ist die Verwendung von standardisierten Themes & Templates 2021 mehr denn je hoch im Kurs, andererseits wollen sich ambitioniertere Webdesigner durch individuelle Kreationen demonstrativ vom Einheitsbrei im Web abheben. Unternehmen können damit Innovationsgeist unter Beweis stellen und mehr Aufmerksamkeit erzeugen.

Standard-Elemente, die sich durch viele moderne Websites (und Templates am Markt) ziehen wären beispielsweise:

  • ein prominenter „Hero-Bereich“ oben mit großflächigem Bild oder Slider
  • Highlight-Text oder Headline in großen, fetten Lettern
  • Darstellung der wichtigsten Facts in Form von Iconboxen, oft 3-spaltig angeordnet
  • Call-to-Action Buttons in Kontrastfarben
Hinsichtlich der Struktur von Firmenwebsites haben sich gewisse Standard-Layouts etabliert. Damit ist es zwar schwieriger, sich von der Masse an Webseiten abzuheben, jedoch finden sich User sofort zurecht. Foto: Adobe Stock, (c) DragonImages

Auch hier gilt wieder, dass es einen Grund hat, dass sich solche Elemente durchgesetzt haben. Diese funktionieren nicht selten am besten, um die Kommunikations- und Marketingziele zu erreichen. Außerdem ist der User damit automatisch mit der Struktur vertraut, da er oder sie bereits vielfach im Web wahrgenommen und angewendet hat. Wer auf der sicheren Seite sein möchte und wenig Budget für individuelle Kreationen hat, ist mit einem Standard-Template demnach oft auf der sicheren Seite. Allerdings hat diese Lösung auch Nachteile, näher haben wir das bereits in diesem Artikel ausgeführt: Website-Vergleich Professionell vs. Selfmade

Abschnitte und vorgefertigte Elemente

2021 wird im Webdesign weniger auf der Ebene von Seiten oder Verzeichnissen gedacht. Jede Einzelseite einer Webpräsenz kann verschiedene, wiederkehrende Elemente beinhalten. Dank fortschrittlicher Page-Builder und Content Management Systemen lassen sich so in Windeseile neue Bereiche einer Website erstellen, die zwar aus zig unterschiedlichen Elementen bestehen, am Ende aber vom Look & Feel her perfekt aufeinander abgestimmt scheinen. Gängige Verwendungszwecke für solche Abschnitte sind:

  • Navigationselemente im Content-Bereich
  • Content-Abschnitte zur Hervorhebung bestimmter Inhalte
  • Teaser-Blöcke (z.B. die neusten Blogartikel oder beliebte Produkte)
  • Slideshows und Galerien
  • Call-to-Action und Kontaktaufnahme

Comeback der Popups

Was in jüngeren Jahren des World Wide Webs schon recht üblich war, zwischenzeitlich aber als zu nervig abgestempelt und vermieden wurde, erlebt 2021 gewissermaßen ein Comeback: Die Verwendung von aggressiven Popups.

Denn insbesondere auf umfangreicheren Firmenwebsites hat man bald das Problem, dass wichtige Angebote zu wenig in den Fokus geraten und von den Besucher/innen übersehen werden.

Popups, Promo-Bars, Slide-Ins & Co sind (leider?) recht effektiv, um die eigenen Marketing- oder Website-Ziele zu erreichen. Oft kommt man nur so zu Newsletter-Eintragungen, Kurs-Anmeldungen oder eBook-Verkäufen. Doch zweifelsohne sollte die Usability nicht zu sehr beeinträchtigt werden, wenn man solche Maßnahmen einsetzt. Jedes Popup sollte auch Mehrwert für den User haben, plumpe Werbung alleine ist, was sie nunmal ist: nervig und entbehrlich

Infinite Scrolling und Long-Pager

Users DO scroll – Menschen sind es gewohnt, auch in den unteren Bereichen einer Webseite nach den passenden Informationen zu suchen. In den 90er-Jahren und in der Zeit unmittelbar nach der Jahrtausendwende war es noch nicht so (da Webangebote damals anders konzipiert waren). Heute überschlagen sich die Untersuchungsbefunde zu diesem Thema und es ist eindeutig geklärt, dass man auch „below the fold“ wichtige Inhalte platzieren kann, weil die Leute intuitiv scrollen.

Infinite Scrolling (also Websites die beim Runterscrollen automatisch und schier endlos weitere Inhalte laden) und das Publishing von multimedial angereicherten Long Reads sind Webdesign-Trends, welche sich auf diesen Erkenntnissen stützten. Mit umfangreichen Content-Seiten möchte man maximalen Mehrwert bieten und die Menschen ans eigene Webangebot binden.

Infinite Scrolling lässt den User schier endlos neuen, spannenden Content entdecken und erhöht die durchschnittliche Sitzungsdauer. Webdesigner müssen das Feature aber sauber umsetzen, damit die Usability nicht leidet. Foto: Adobe Stock, (c) deagreez

Es empfiehlt sich in diesem Fall eine „Fixed Navigation“ (also ständig sichtbare Menüleiste) sowie einen „Back-to-top„-Button zu verwenden. Außerdem gilt es – je nach Themengebiet – immer abzuwiegen, ob tatsächlich ein Long-Pager die beste Lösung ist, oder die User Infos hier lieber prägnant statt verschachtelt serviert bekommen wollen.

Responsive Logos

Zu guter Letzt hat es noch ein Detailaspekt in unserer Webdesign-Trends 2021 geschafft: Responsive Logos. Das sind Markenemblems, die sich nicht nur der Bildschirmgröße anpassen, sondern auch völlig unterschiedliche Darstellungsformen – je nach Endgerät – bieten.

Das heißt in der Praxis meist: Am Smartphone wird eine Logo-Version mit weniger Details im Sinne der einwandfreien Wiedererkennbarkeit gewählt, während am Desktop auf die komplexere und detailreiche Variante gesetzt werden kann. Während man diese Lösung nur fallweise beobachten konnte, wird dies ab 2021 sicherlich zum Standard bei professionellen Websites werden.

Profi-Website vom HEROLD zum mtl. Fixpreis

Michael Schifflhuber

Michael Schifflhuber

Weitere Artikel

Michael Schifflhuber