Hinweis: Dieser Beitrag ist von 2021 und zeigt den damaligen Stand. Was sich beim Thema nachhaltige Websites seitdem getan hat, liest du in unserem Artikel Nachhaltiges Webdesign: Wie viel CO₂ steckt in deiner Website?
Der Austausch mit Gleichgesinnten war uns bei memedia schon immer wichtig. Deshalb haben wir uns sehr gefreut, beim B2B Digital Day 2021 (öffnet neues Fenster) mitwirken zu können. Das ist ein Format unserer Partneragentur eMinded, das News und Events rund um B2B Digital Marketing bietet und regelmäßig verschiedene Branchen zusammenbringt.
Zu diesem Anlass haben wir einen Überblick über die wichtigsten Webdesign-Trends des Jahres 2021 gegeben.
Hier findest du eine Zusammenfassung unseres Vortrags. Die Aufzeichnung kannst du dir auch als Video (öffnet neues Fenster) anschauen.
Parallax Scrolling
Der erste von mehreren Scrolling-Effekten, die immer häufiger auf Websites zu finden sind, ist das sogenannte Parallax Scrolling. Beim Scrollen entsteht eine gewisse Tiefe, weil verschiedene Ebenen der Seite unterschiedlich schnell animiert sind.
Vorteile:
- verleiht der Website optische Tiefe
- lenkt die Aufmerksamkeit der Besucher
- steigert die Emotionalität der Seite durch Realitätsnähe
Nachteile:
- kann die Seite langsam und hakelig wirken lassen
- drosselt die Performance der Seite
- ist aufwendig in der Herstellung
Beispiele:
Ragna Sturm (öffnet neues Fenster)
Firewatch (öffnet neues Fenster)
Horizontales Scrolling
Viele moderne Websites ändern die gewohnte Scrollrichtung. Ob das sinnvoll ist, hängt vor allem vom Inhalt und Zweck der Seite ab. Du solltest abwägen, ob es sich lohnt, gegen die gewohnte Bedienung zu arbeiten und Besucher womöglich zu verwirren.
Vorteile:
- unterstützt breite Ansichten und eine horizontale Leserichtung
Nachteile:
- geht gegen die gewohnte Bedienung
- kann verwirrend wirken
Beispiel:
Prevint (öffnet neues Fenster)
Scrollytelling
Eine neuere Art, einer Seite mehr Leben einzuhauchen, ist das sogenannte Scrollytelling. Dabei werden einzelne Bilder animiert, während du zu ihnen scrollst. Ein Aha-Effekt ist vorprogrammiert. Wie der Name schon sagt, eignet sich Scrollytelling besonders, wenn du Besuchern eine Geschichte erzählen und sie lebendiger machen willst.
Vorteile:
- unterstützt lebhaft das Storytelling einer Seite
- hilft, Inhalte verständlicher darzustellen
- erhöht die Aufmerksamkeit der Besucher
- ist mit wenigen Bildebenen gut darstellbar
- gilt als mobilfreundlich
- ist ein cooler Begriff!
Nachteile:
- funktioniert nicht mit jedem grafischen Inhalt; der sollte am besten eigens dafür konzipiert sein
Beispiel:
New York Times (öffnet neues Fenster)
3D, Grafiken und Icons
3D is back! Plastisch wirkende Grafiken, Icons und Designelemente waren in modernen Websites lange verpönt, jetzt zeigt sich ein Gegentrend. Der größte Unterschied zum Webdesign der 90er und frühen 2000er: 3D-Elemente werden heute mit mehr Bedacht und mit Blick auf die Funktion eingesetzt. Dazu erlaubt die heutige Rechenleistung interaktive 3D-Objekte, was besonders bei der Präsentation von Produkten von Vorteil sein kann.
Vorteile:
- gibt der Website eine schöne plastische Tiefe
- macht besonders Produktdarstellungen lebendiger und greifbarer
Nachteile:
- kann aufwendiges 3D-Rendering voraussetzen
Beispiele:
Dogstudio (öffnet neues Fenster)
Farben und Layout
Bei Farbgebung und Seitengestaltung gibt es inzwischen eine Vielzahl von Trends. Wichtig ist wie immer, dass die Gestaltung zum Inhalt der Website passt. Hier ein paar Beispiele, die wir besonders interessant finden:
Angenehme, organische Farben
Sie werden vor allem im Bereich Kosmetik und Beauty eingesetzt und sollen natürlich und sanft wirken.
Schwarz-Weiß
Eine schwarz-weiße Seite lenkt den Fokus stärker auf den Inhalt und fällt durch ihre Schlichtheit auf. Sie passt nicht zu jedem Thema, kann aber wie in der Fotografie in Einzelfällen sehr stimmig wirken.
Geometric Grid
Eine Darstellung, die fast wie ein technisches Dokument wirkt: feste, übersichtliche geometrische Strukturen, oft verbunden mit einer ungewöhnlichen Navigation.
Abstrakte Kunst
Eine Verbindung von Kunst und Design. Sie fällt besonders auf, wenn Besucher eher gewöhnliche Icons und Grafiken gewohnt sind.
Illustrationen
Auch hier hebt sich ab, wer auf Standard-Icons und -Grafiken verzichtet und eigens angefertigte, hochwertige Illustrationen einsetzt.
memedia.de, 2021
Unschärfe (Blur)
Ob als Hintergrund oder als Mouseover-Effekt: Unschärfe wird immer häufiger eingesetzt. Sie soll neugierig machen und die Aufmerksamkeit lenken.
Dark Design
Spätestens seit viele Websites und Apps einen Dark Mode anbieten, werden dunkle Designs immer mehr Teil unserer Internetlandschaft.
Sustainable Webdesign
Neben den gestalterischen Trends gibt es auch Trends, die sich um technische und inhaltliche Aspekte einer Seite drehen. Ganz oben steht dabei das sogenannte Sustainable Webdesign: Websites, bei deren Erstellung und Betrieb auf Nachhaltigkeit geachtet wird.
Weniger Energie, weniger Daten
Hier geht es vor allem um die Auswirkungen, die eine Website auf unsere Umwelt haben kann.
Laut websitecarbon.com verbrauchte das Internet 2021 rund 416,2 Terawattstunden pro Jahr, etwa so viel wie ganz Deutschland. Wäre das Internet ein Land, hätte es damit den sechstgrößten Stromverbrauch der Welt.
Bei 10.000 Besuchern im Monat kam eine Seite laut dieser Berechnung auf 211 kg CO₂ im Jahr. Für eine einzige Seite!
Das Internet in Zahlen
Was eine Website verbraucht.
416,2 TWh
Stromverbrauch des Internets pro Jahr, etwa so viel wie Deutschland
211 kg CO₂
pro Jahr für eine Seite mit 10.000 Besuchern im Monat
11 Bäume
bräuchte es, um so viel Kohlenstoff in einem Jahr aufzunehmen
3.138 km
könnte ein Elektroauto mit dem Strom fahren
Stand 2021, Website Carbon. Das Berechnungsmodell wurde seitdem überarbeitet.
Um den Energiebedarf einer Website zu senken, gibt es mehrere Möglichkeiten:
Hosting
Einige Hoster geben an, Strom aus erneuerbaren Energien zu nutzen. Was genau, steht auf ihren Websites. Ein Verzeichnis von Hostern, die gegenüber der Green Web Foundation (öffnet neues Fenster) Strom aus erneuerbaren Energien nachgewiesen haben, findest du dort.
Design
Die ersten wichtigen Schritte passieren in Planung und Gestaltung. Ein kompaktes Seitenkonzept sorgt dafür, dass die wichtigsten Informationen schnell und einfach ankommen. Weniger Seiten und weniger Daten senken in der Regel auch den Energiebedarf. Genauso kannst du schon bei der Planung der Inhalte darauf achten, nicht verschwenderisch mit Datenmengen umzugehen. Am Ende geht es darum, dass Besucher schnell ans Ziel kommen, ohne unnötig Daten zu laden.
Entwicklung
Bei der Entwicklung solltest du darauf achten, dass die Seite am Ende so schnell wie möglich lädt. Dabei hilft vor allem, Bilder, Videos und Skripte möglichst klein zu halten. Einen guten Einblick in die Performance deiner Seite geben Online-Tools wie Google PageSpeed Insights (öffnet neues Fenster).
Inklusives Design
Zur Nachhaltigkeit einer Website kann man auch inklusives Design zählen. Dazu gehören Barrierefreiheit, Diversität und gendergerechte Sprache. Das betrifft nicht nur Texte, sondern auch Bilder und Videos.
Wir hoffen, du hast einen interessanten Überblick über die Webdesign-Trends 2021 bekommen. Vielleicht ist ja ein Trend dabei, der dir besonders am Herzen liegt? Wir sind jedenfalls gespannt, was die Zukunft des Webdesigns noch bringt!
Über den Autor: Benno Schmidtler hat memedia gegründet und baut seit über 30 Jahren Websites. Er führt jedes Projekt persönlich, von der Strategie bis zur Betreuung.
