11 Webdesign-Trends für das Jahr 2021

Dreidimensionale Figuren bzw. Grafiken haben bis dato noch keine große Rolle im Webdesign gespielt. Wer sein Webprojekt mit 3D-Effekten schmücken wollte, hat hierfür bisher in erster Linie Videos verwendet. Ein spannender neuer Webdesign-Trend schickt sich an, diese statische Einbindung von dreidimensionalem Content abzulösen: So finden Nutzer immer häufiger Websites mit 3D-Elementen vor, die sich per Mausklick bzw. Fingerberührung bewegen lassen. Insbesondere für den E-Commerce bieten derartig interaktive Objekte ein riesiges Potenzial: Kunden können sich ein Produkt auf diesem Weg bequem von allen Seiten und jedem Blickwinkel aus anschauen, um einen optimalen Eindruck von der Ware zu gewinnen – ganz ähnlich wie beim Kauf im lokalen Geschäft, wo man das Objekt der Begierde in die Hand nimmt und inspiziert.

Dreidimensionalität spielt auch beim nächsten Webdesign-Trend für das Jahr 2021 eine wichtige Rolle: Der Neumorphismus (auch „neuer Skeumorphismus“) bringt mehr Realismus in die teilweise sehr abstrakt gewordenen Website-Designs. Insbesondere den sehr flach gestalteten, kartenbasierten Layouts soll mit dem modernen Ansatz mehr Leben eingehaucht werden. Die verschiedenen UI-Komponenten der Seiten werden zu diesem Zweck in einem 3D-artigen Stil dargestellt, indem beim Design via CSS gezielt mit helleren und dunkleren Schattierungen gearbeitet wird. In der Folge scheinen die einzelnen Elemente aus dem Screen hervorzutreten, bis sie vom Nutzer ausgewählt und dadurch – zumindest optisch – eingedrückt werden, was einen realitätsnahen Eindruck hinterlässt.

Das Bildformat SVG ist nicht wirklich neu, hat aber Vorteile, die immer wichtiger werden: Es sorgt für eine geringe Dateigröße, ist flexibel skalierbar und – das macht das Format zu einem Webdesign-Trend 2021 – mit CSS formatierbar. Da es sich bei SVG prinzipiell um ein XML-Dateiformat handelt, kann der Quelltext (und damit eben auch die Grafik an sich) direkt mit der Stylesheet-Sprache verändert werden. Durch die Kombination können Webdesigner Grafiken in den Webauftritt einbauen, die sich flexibel an das verwendete Display anpassen oder sogar direkt durch Nutzer verändert werden können. Wahlweise finden Sie im Web diverse einsatzfertige Vektorgrafiken (kostenlos und kostenpflichtig) oder erstellen die Grafiken bei Bedarf einfach selbst.

Soziale und ökologische Themen haben in den vergangenen Jahren erheblich an Bedeutung gewonnen. Immer häufiger wird diese Tatsache für Unternehmen zum Anlass, intensiver und auf einer tieferen Ebene mit Kunden bzw. Nutzern in Kontakt zu treten. Die Corona-Pandemie hat hierbei die Notwendigkeit bzw. Wichtigkeit einer aktiven Teilnahme im World Wide Web vor Augen geführt – sei es in sozialen Medien oder in Form einer eigenen Homepage.

Nachhaltigkeitsbemühungen oder das gesellschaftliche Engagement stellen immer häufiger mehr als nur Randnotizen dar und haben deutlich größeren Einfluss auf das Webdesign als noch vor ein paar Jahren. Prominent platzierte Fotos, Videos, Visualisierungen oder Simulationen sind dabei ebenso im Trend wie ein konkretes Design, das direkt mit den Bemühungen des Unternehmens bzw. Website-Betreibers in Verbindung steht.

Parallax-Effekt

Auch Parallax Scrolling gehört nicht zu den neuesten Webdesign-Trends, wird aber weiterhin von Bedeutung sein. Der Effekt der Bewegungsparallaxe wird schon seit einigen Jahren als Baustein moderner Websites verwendet. Dadurch, dass sich die einzelnen Ebenen der Website unterschiedlich schnell bewegen, entsteht ein Effekt der Tiefenwahrnehmung. Idealerweise bietet die Website neben dem Bewegungseffekt auch Elemente, die den Besucher zu einer Handlung auffordern. Das Parallax Scrolling lässt sich dadurch hervorragend mit dem Interactive Storytelling kombinieren. Sehr anschaulich verdeutlicht das beispielsweise die Seite „Every Last Drop“.

Die zielgruppengerechte Darstellung von Webinhalten gehört zu den Grundprinzipien des modernen Webdesigns. Vor allem im E-Commerce sollten sich die Auswahl der Inhalte und deren Präsentation an den Ansprüchen potenzieller Kunden orientieren. Standen dabei bisher abstrakte Personengruppen im Vordergrund, rückt 2021 die User-Experience des Einzelnen weiter in den Fokus.

Virtuelle Realitäten (VR) kennen die meisten Nutzer bisher vor allem aus dem Entertainment-Bereich: Besonders die Computerspielbranche investiert viel in die Entwicklung von Virtual-Reality-Brillen und entsprechende Games. In den jüngsten Jahren sind zudem immer mehr Apps im Smartphone-Bereich auf den Markt gekommen, die Augmented Reality (AR) nicht nur als spielerisches Konzept haben, sondern die Technik auch für praktische Zwecke einsetzen. So wird die reale Umgebung zum Beispiel mit digitalem Input vermischt, um die Inneneinrichtung einer Wohnung zu planen oder Kleidungsstücke virtuell anzuprobieren. Nun macht auch das World Wide Web diesen Schritt. Mit WebXR hat das W3C eine Schnittstelle geschaffen, die die bestehende, allerdings fehlerbehaftete WebVR-Technik ersetzt und es Browsern ermöglicht, VR- und AR-Inhalte anzuzeigen.

Programme für Kommunikationsaufgaben sind nicht neu. Chatbots entspringen dem Forschungsgebiet der Künstlichen Intelligenz (KI) und kommen schon heute auf Unternehmenswebsites oder in Onlineshops zum Einsatz. In der Regel handelt es sich um kleine Dialogfenster, die Nutzerfragen entgegennehmen und automatisch generierte Antworten ausspielen. Diese lassen sich dank Machine-Learning-Algorithmen personalisieren. Für den Nutzer entsteht der Eindruck, es handle sich um einen menschlichen Mitarbeiter, der Rede und Antwort steht. Zum Einsatz kommen Chatbots als virtuelle Shopping-Assistenten oder als Alternative zum klassischen FAQ-Bereich.

Ein Trend, der sich nicht nur durchs Web, sondern durch den kompletten Software-Sektor zieht: der Dark Mode. Immer mehr Nutzer legen Wert darauf, eine Alternative zur grellen Anzeige zu haben. Beispielsweise bieten Betriebssysteme wie Windows einen Dark Mode, und auch in Browsern wie Google Chrome kann einen Dark Mode aktivieren. Besonders bei schlechtem Umgebungslicht sind helle Interfaces störend. Während man viele Programme und Apps inzwischen ohne Probleme umschalten kann, springen einem die meisten Websites noch mit viel Weiß entgegen. Doch das ist gar nicht nötig.

Eigentlich weniger ein Trend als vielmehr ein Grundprinzipgut designter Webseiten: Geschwindigkeit wird immer wichtiger. Das ist zum Teil der mobilen Revolution zu verdanken; schließlich wollen Webseitenbetreiber, dass ihre Seiten auch mobil leicht und volumensparend erreichbar sind. Je schneller Internetseiten laden, umso besser ist das Nutzererlebnis – das war schon vor zehn Jahren der Fall. Auch 2021 setzt sich der Trend fort, auf zeit- und speicherintensive Elemente zu verzichten und intensiv mit Lazy Loading zu arbeiten, um eine schnellere Nutzung der Website zu ermöglichen.

Viele andere Trends im Webdesign setzen hier an. So bedeutet der zunehmende Minimalismus bei der Ausgestaltung von Websites, dass weitgehend auf speicherintensive Medien verzichtet wird und lieber Formate gewählt werden, die den Speicheraufwand gering halten. „Long scrolling“-Webseiten, die alle notwendigen Informationen auf einer einzigen scrollbaren Seite platzieren, punkten mit der Tatsache, dass nur diese eine geladen werden muss – und nicht anschließend mehrere Unterseiten. Auch der immer beliebter werdende ‚White Space‘ bedeutet die Abwesenheit von Elementen, die die Ladegeschwindigkeit einer Webseite drosseln könnten.

Die Performance einer Website wirkt sich direkt auf die User-Experience aus. Dabei ist zwischen tatsächlicher und gefühlter Ladezeit zu unterscheiden. Problematisch sind Verzögerungen nur dann, wenn sie vom Nutzer als solche wahrgenommen werden. Webdesigner setzen daher u. a. auf folgende Maßnahmen, um höhere Ladezeiten aufzufangen:

Fortschrittsanzeige

Wenn der Besucher schon warten muss, sollte er wenigstens wissen, wie lange. Der Fortschrittsbalken verkürzt die Ladezeit zwar nicht, kann diese jedoch zumindest kurzweiliger gestalten, wenn er interessant designt ist. Der Nutzer soll zumindest nicht dazu verleitet sein, die Seite wieder zu verlassen, wenn er zum Warten gezwungen wird. Schließlich ist die Toleranzspanne des modernen Internetnutzers immer geringer geworden, je schneller die Leitungen wurden.

Schlüsselelemente zuerst laden

Webseiten sollten so programmiert werden, dass die „Above the fold“-Inhalte zuerst abgerufen und im Browser dargestellt werden. Es handelt sich dabei um die Teile der Seite, die für den Betrachter ohne Scrolling sichtbar sind. Sind diese Inhalte verfügbar, ist es für den Nutzer zunächst unerheblich, ob weitere Inhalte („below the fold“) erst später nachgeladen werden.

Progressive JPEG

Bilder, die als Progressive JPEG eingebunden werden, bauen sich beim Laden nicht von oben nach unten in der endgültigen Auflösung auf. Stattdessen kommt das Zeilensprungverfahren zum Einsatz: Dem Betrachter wird zunächst ein Vorschaubild in geringer Qualität präsentiert, das sich nach und nach verfeinert, bis die Daten für die gewünschte Bildqualität komplett geladen wurden.