Dein Wegweiser zu erfolgreichem Webdesign: Diese Trends musst du im Jahr 2021 kennen

Du siehst, die drei Komponenten des e-Success Modells sind keineswegs gesondert zu betrachten, sondern beeinflussen sich gegenseitig. Das Zusammenspiel aller Faktoren wiederum machen den Erfolg aus [8].

Sozial und ökologisch motivierte Designs

Erinnerst du dich noch an die Waldbrände 2019 in Australien oder an die Black-Lives-Matters Bewegung? Du merkst, online wie auch offline weckten soziale und ökologische Themen das Interesse und Bewusstsein von uns Menschen in letzter Zeit am häufigsten. Diese Themen sind auch im Jahr 2021 in aller Munde und nehmen sogar an Bedeutung zu [12].

Du fragst dich bestimmt, was gesellschaftliche Themen mit Webdesign zu tun haben. Aktuelle Medieninhalte sind nun mal “Eye-Catcher”.  Gesellschaftliche Bemühungen, insbesondere in aktuellen Krisen wie dem Klimawandel oder der Corona-Pandemie, sind so wichtig geworden wie nie zuvor. In schwierigen Zeiten wird gesellschaftliches Engagement von Menschen umso mehr wahrgenommen. Digital Marketing Engineers nutzen im Jahr 2021 daher sozial und ökologisch motivierte Designs als Blickfang.

Hier ein Beispiel wie das Ganze aussehen kann:

Welches Ziel wird damit verfolgt?

Unternehmen wie auch Individuen, die sich rund um Themen wie Klimawandel engagieren, geniessen durch solche “Hot Topics” grosse Aufmerksamkeit und gewinnen Pluspunkte für ihr Image. Ausserdem kann Webdesign die Werte einer Marke, wie beispielsweise Nachhaltigkeit oder gesellschaftliches Engagement, hervorheben. Website-Besucher:innen erhalten dadurch das Gefühl, diese Werte miteinander zu teilen. Dies steigert die emotionale Nutzererfahrung und somit die Kundennähe eines Unternehmens erheblich [14]. 

Wie gehst du nun vor, wenn du sozial oder ökologisch motivierte Designs selber einsetzen möchtest?

Deine Besucher:innen sollen Nachhaltigkeitsbemühungen oder dein soziales Engagement nicht mehr nur als Randnotiz deiner Website wahrnehmen, sondern im Fokus der Komposition. Das erreichst du nicht nur, indem du sie textuell hervorhebst. Du musst sie auch farblich passend in Szene setzen. Farben sind dabei ein zentrales Gestaltungsmittel, um Emotionen zu wecken und eine Botschaft an deine Zielgruppe/n zu senden. Mit Farben kannst du bestimmte Eindrücke erwecken, deine Besucher:innen in eine bestimmte Stimmung versetzen oder sie gar zu Entscheidungen bewegen. Beispielsweise assoziieren Menschen grüne Töne und Farbschemata unterbewusst oft mit Natur, Nachhaltigkeit oder Frische [15].

Zum gezielten Einsatz von Farben nutze zusätzlich auch Bilder, Videos, Visualisierungen oder Simulationen mit sozialem oder ökologischem Kontext [16]. Kleiner Tipp: Fotos können im Vergleich zu informativen Abbildungen oder abstrakten Grafiken einen grösseren psychologischen Effekt bei den Betrachter:innen bewirken, weil sie realitätsnaher sind. Gesellschaftsbezogene Fotos mit emotionalem Kontext können Betrachter:innen zum Handeln animieren [15].

Barrierefreiheit

«Design for All» und «Nutzer:innen im Zentrum» lautet das Credo. Ziel ist es, die eigene Website so zu designen, dass die grösstmögliche Anzahl User:innen, unabhängig von Einschränkungen, von der Website Gebrauch machen können.

Gemäss Statistik sind bei einer Wohnbevölkerung der Schweiz von etwa 8,4 Mio. ungefähr 1 Mio. Personen von einer leicht funktionellen Einschränkung betroffen (Seh-, Hör-, Geh- oder Sprechvermögen) (BFS Stand 2017 [17]). Ein barrierefreies Webdesign trägt zur Inklusion dieser Personen und zur generellen Verbesserung der Usability und User Experience der Website bei [18].
Du siehst also, Barrierefreiheit ist keineswegs unbedeutend. Als Anbieter:in ist es unserer Meinung nach sogar deine Pflicht, auf die Bedürfnisse derjenigen einzugehen, die Unterstützung beim konsumieren deiner Inhalte benötigen.

Worauf du bei Barrierefreiheit alles achten solltest

Um eine barrierefreie Website zu designen, benötigst du die richtige Technologie. Ein passendes Content Management System und Layoutvorlagen beeinflussen die Barrierefreiheit deiner Website grundlegend. Dabei ist auf die Kompatibilität mit Drittprogrammen wie Screenreadern zu achten.

Ein strukturierter Seitenaufbau mit Navigation, Überschriften und Absätzen ist Voraussetzung für ein barrierefreies Design. Dabei ist die Komposition entscheidend. Die Inhalte sollten linearisierbar sein, um die Verwendung von Screenreadern zu unterstützen. Dies bedingt, dass die Reihenfolge der Inhalte in sich schlüssig ist [19].

Versehe deine Bilder mit Alt-Tags, sodass bei Gebrauch eines Screenreaders die User anhand einer kurzen, nützlichen Beschreibung erfahren, was auf dem Bild zu sehen ist [20]. Ein weiteres Plus der Alt-Tags der Bilder: Sie unterstützen in der Suchmaschinenoptimierung (SEO). Wähle den Bildbeschrieb also bewusst aus! 

Verwende eine gut sicht- und lesbare Typografie. Ermögliche den Nutzer:innen das Vergrössern der Textinhalte. Ausreichende Kontrastverhältnisse der Farben unterstützen die Usability speziell für Sehbeeinträchtigte [19].

Ein weiterer Treiber der Barrierefreiheit ist der Inhalt und die Komplexität des Inhalts. Dieser sollte der Sache und Zielgruppe entsprechen und in leichter Sprache verfasst sein. Inhalte, die physische oder psychische Reaktionen hervorrufen können, sollten vermieden oder mit einem Warnhinweis versehen werden. Das WAVE Evaluation Tool von Google kann dir dabei helfen, deine aktuelle Website auf Barrierefreiheit zu untersuchen. Falls du das Thema vertiefen möchtest, findest du hier einen weiteren spannenden Blogbeitrag dazu.

Hast du es geschafft Barrierefreiheit auf deiner Website erfolgreich zu integrieren, kannst du dir das auch über den internationalen Standard für Web-Inhalte zertifizieren lassen: Web Content Accessibility Guidelines

Nachfolgend findest du je ein Beispiel einer vorbildlich barrierefreien Website und ein Beispiel, das Obengenanntes weniger berücksichtigt.

Neumorphismus

Dieser Webdesign Trend beschränkt sich auf das User Interface deiner Website. Der Name setzt sich aus den Worten “neu” und “Skeuomorphismus” zusammen. Es handelt sich um die Abwendung von Flat Designs zurück zu einem reliefartigen 3D Gefühl hin [23]. Der starke Kontrast des Flat Designs fällt weg. Dadurch wirkt der Trend auf Anhieb ästhetischer [24]. Der Einsatz von Licht und Schatten sowie die abgerundeten Ecken lassen das Design “soft” wirken. Deshalb wird es oftmals als “Soft User Interface" bezeichnet [25].

Was es zu beachten gibt

Barrierefreiheit und neumorphistisches Design sind nur schwer kompatibel. Für Personen mit Sehschwäche oder schlechten Displays ist der Trend ein Nachteil. Ein Beispiel dafür sind Buttons: Ein Wechsel in der Aktivierung (z.B. on / off) ist nur schwer erkennbar. Ein weiterer Knackpunkt ist der Mangel an Methoden, um es effizient zu programmieren. 

Beispiel zu Neumorphismus [26]

Parallax Scrolling

Stell dir vor du sitzt im Zug, schaust aus dem Fenster und beobachtest die schöne Landschaft in der Weite. Dabei fällt dir auf, dass sich die Bäume und Häuser in der Nähe viel schneller bewegen als die Wälder und Berge im Hintergrund. Aber weshalb ist das so? Wahrnehmungspsychologen nennen diesen (scheinbaren) Geschwindigkeitsunterschied Bewegungsparallaxe [27]. Parallaxe ist die dreidimensionale optische Illusion, die entsteht, wenn nahe Objekte sich schneller zu bewegen scheinen als Objekte, die weiter weg sind [28]. Der Effekt der Bewegungsparallaxe wird schon seit einigen Jahren als Baustein moderner Websites verwendet. Nichtsdestotrotz wird dieser Trend im 2021 nicht weniger wichtig.

Wie funktioniert das genau?

Die Website-Besucher:innen navigieren mit der Scrollfunktion durch deine Website. Da sich die einzelnen Ebenen der Website beim Scrollen unterschiedlich schnell bewegen, entsteht ein Effekt der Tiefenwahrnehmung [16]. Bilder sehen aus, als würden sie sich tiefer in der Website befinden als der restliche Inhalt. So können Webdesigner bestimmte Elemente hervorheben [29]. Du siehst, mit Parallax-Scrolling kann die User-Experience auf der Website aufregender und dynamischer gestaltet werden.

Wie du das anstellst? Für eine solche Desgintechnik brauchst du eine Single-Page-Website (OnePager), deren Seitenelemente in Vorder- und Hintergrundextreme getrennt sind. Die Gestaltungselemente müssen sich unabhängig voneinander in horizontaler oder vertikaler Richtung bewegen lassen. Technisch lassen sich Parallax-Scrolling-Websites bereits mit grundlegenden Webstandards wie HTML5 (Hypertext Markup Language 5) und CSS3 (Cascading Style Sheets 3) realisieren. Um die Tiefenwahrnehmung zu verstärken, wird auch die Skriptsprache JavaScript oder das JavaScript-Frameworks jQuery eingesetzt [27]. Bist du jetzt noch neugieriger geworden? Im Web findest du zahlreiche Beispiele zur Umsetzung wie hier.

Es ist nicht alles Gold, was glänzt

Parallax Scrolling lässt sich hervorragend mit Interactive Storytelling kombinieren. Es fordert deine Website-Besucher:innen zu einer Handlung auf [27]. Während Nutzer:innen auf der Website scrollen, werden sie direkt in die Geschichte miteinbezogen [28] und tauchen vollständig in eine virtuelle Realität ein (Immersion) [30]. Um einen stärkeren Immersionseffekt zu erzielen, kann Parallax-Scrolling mit Sound- und Video-Effekten ergänzt werden.

Aber Achtung! Ein übermässiger Einsatz kann sich negativ auf die Performance der Website auswirken [27]. Überlege dir ein gutes Konzept bevor du es einsetzt, da du deine Besucher:innen ansonsten überfordern könntest.  

Du fragst dich wie Websites mit Parallax-Scrolling aussehen? Sieh dir die Beispiele im nachfolgenden Video an:

3D Animationen

Moderne Werbung ist ohne den Einsatz von Animationen kaum noch denkbar. Animationen beziehen Nutzer:innen emotional stärker mit ein als reine Bilder. Doch ein einfaches GIF (Graphics Interchange Format) reicht selten aus, um diesen Effekt zu erzielen. Heutzutage ist dank zunehmender Performance von Geräten der Einsatz von 3D Objekten immer einfacher umzusetzen - dies sowohl auf Desktop- als auch auf Mobilgeräten [32]. 

Wo und wie kommt 3D Animation zum Einsatz?

Insbesondere im E-Commerce haben 3D Objekte ein riesiges Potenzial [16]. Durch die Einführung von 3D Objekten verstärkt sich die Interaktion mit deiner Marke und du kannst deinen Kund:innen deine Produkte oder Dienstleistungen realitätsnaher präsentieren [32]. Es gibt dabei zwei Ansätze, wie du 3D Objekte in deine Website einbinden kannst: Augmented Reality (AR) und interaktive 3D Objekte. Bei der Augmented Reality können Konsument:innen beispielsweise in einer App ein Produkt in einem virtuellen Raum testen [33]. Mit interaktiven 3D Objekten können sich Kund:innen ein Produkt im Web bequem per Mausklick bzw. Touchscreen von allen Seiten und jedem Blickwinkel aus anschauen, um einen optimalen Eindruck vom Produkt zu erhalten [16].

In der Vergangenheit konnten nur die grösseren Firmen Augmented Reality Elemente und 3D Objekte einsetzen, da die Umsetzung oft sehr teuer war. Mit neuen Tools ist die Einbindung jetzt auch für Unternehmen mit kleinerem Budget möglich geworden [33]. Die Technologien, die dazu verwendet werden können, sind zum Beispiel: WebGL (Web Graphics Library), 3D Software (Blender) oder JS (JavaScript) [32]. 

Anhand unserer Beispiele haben wir dir gezeigt, dass die Palette an Webdesign Trends im Jahr 2021 sehr vielseitig ist. Für die Auswahl eines passenden Webdesigns, hast du gelernt, dass sechs Kriterien berücksichtigt werden müssen: Farbe, Bilder, Typografie, Layout und Komposition sowie Textur und Technologie. Gelungen ist das Webdesign erst dann, wenn es zielorientiert und nutzenstiftend eingesetzt wird. Dabei versuchst du das richtige Zusammenspiel mit deinem Unternehmen oder Produkt, deinem Markenbild, deiner Zielgruppe und deiner Marketingstrategie zu finden. 

Du weisst nun auch, dass Trends und neue Technologien sich ständig weiterentwickeln, so dass Webdesigns grundlegend verändert werden. Bleibe also am Ball und setze dich mit den Webdesign Trends auseinander. Nur so kannst du deine Webseite auf die Erwartungen und Anforderungen von morgen aufrüsten und deine Website als digitale Visitenkarte gewinnbringend einsetzen.

Hat dir dieser Beitrag gefallen? Dann teile ihn mit deinen Freund:innen und Arbeitskolleg:innen!