Die wichtigsten Webdesign-Trends, die auch 2020 prägend sind

– 18. Februar 2015

Modernes Webdesign ist heute ohne responsive Webdesign undenkbar, so dass sich die Webseite flexibel an verschiedene Bildschirmformate anpassen kann. Dies ist gerade bei mobilen Endgeräten wichtig und hat wiederum Trends hervorgebracht, die auch 2020 das Webdesign weiterhin prägen.

Trend 1: Fullscreen ist angesagt

Der größte Trend beim responsive Webdesign wird auch 2020 die möglichst vollständige Ausnutzung der Bildschirmbreite(n) sein. Bei einer alten Webseite ist der Bildschirm in keinem guten Verhältnis gefüllt – entweder sind die Ränder bei einem großen Bildschrim zu leer oder die Inhalte stehen bei einem kleinen Bildschirm eines Mobilgerätes schlecht lesbar drin. Die Usability ist mäßig. Bei einer neuen Seite mit modernem Webdesign wird die Breite des Bildschirms optimal genutzt, gerade auf einem PC-Bildschirm entstehen so beeindruckend breite „Panorama-Bilder“, oft sogar auch Fullscreen-Bilder: also Bilder, die den Bildschirm in Breite und Höhe vollständig als „Eye Catcher“ ausfüllen (ohne lange Ladezeiten). Es ist klar, dass ein solches Webdesign viel beeindruckender und moderner wirkt als ein beschränktes, statisches Design mit kleinen Bildern.

Trend 2: Flat Design noch immer in Mode

Der zweite Trend wird auch 2020 immer noch das „Flat Design“ sein. Da leistungsfähige LTE-Leitungen im Mobilbereich mit hohen Übertragungsraten immer noch nicht überall verfügbar sind, gab und gibt es bei Smart Phones die Notwendigkeit, Datenmengen klein zu halten. So werden Interfaces und Apps bei Smart Phones bis heute mit „Flat Design“ gestaltet: Flaches Design bedeutet eine minimalistische Darstellung von Grafik- und Design-Elementen ohne überbordenden Schnickschnack oder Schnörkel. Während man bei Webseiten parallel auf aufwendige 3-D-Effekte in der Optik mit Schattierungen und verschiedene Ebenen gesetzt hatte, geht jetzt, inspiriert vom Smart Phone, der Design-Trend bei responsive Seiten zu einfachen Gestaltungselementen zurück. Mit glatten Flächen ohne aufwendige Effekte. Flat Design findet sich heute in der Microsoft-Welt ebenso wieder wie bei Google Android und Apple seit iOS 7. Daher ist es aus dem modernen responsive Webdesign nicht wegzudenken, auch wenn mit Trend 4 (siehe unten) schon ein Nachfolge-Trend auf dem Weg ist (!).

Trend 3: Kachel-Optiken für bessere Klickbarkeit

Das wohl anschaulichste Beispiel für den Trend zur Kachel-Optik und auch für „Flat Design“ ist die Benutzeroberläche von Microsoft Windows 8. Hier werden unaufwendig gestaltete und einfach klickbare Kacheln eingesetzt, die nicht viel Ladezeit benötigen und für Smart Phone User mit dem Finger, aber auch für User mit Mauszeiger eine superschnelle Klickbarkeit gewährleisten.

Inspiriert davon, werden Kacheln im Webdesign auch heute oft und gerne eingesetzt und prägen so einen wichtigen Design- und Usability-Trend. Bei Windows 8 werden dazu noch bunte Farben und einfach Icons eingesetzt. Auch dies wirkt bis heute inspirierend aufs moderne Webdesign ein. Eine Fortführung des Kachel-Designs ist das so genannte „Card Design“, bei dem man die Kacheln vergrößern und oder die Card in verschiedene Kachel-Einheiten aufteilen kann.

Trend 4: „Flat Design“ wird mit „Material Design“ ergänzt

Mitte 2014 stellte Google mit der Begriffsprägung „Material Design“ und einer Art Manifest dazu einen neuen Design-Trend vor: „Material Design“ basiert auf „Flat Design“ und der Anforderung, Mobildesign möglichst minimalistisch anzugehen, es aber im Hinblick auf die Experience des Users stärker zu emotionalisieren. Webdesigner sollen damit aufgefordert werden, die Erfahrungen aus dem wirklichen Leben, der „materiellen Welt“ ins minimalistische Design miteinzubringen, also durchaus Tiefe, Materializität von Oberflächenstrukturen, Ecken, Kanten oder auch physikalische Erfahrungen wie Gewicht, Lichteinfall etc. Es bleibt spannend, wie sich dieser Trend auf die Design-Entwicklung bei Software, Apps und Webinterfaces auswirken wird.

Das „Material Design“ von Google ergänzt Flat-Design um neue Effekte, Ebenen und Erfahrungen, ohne den minimalistischen „Flat-Stil“ zu überwinden.

Trend 5: Responsive-fähige Typographie

Ein Weblayout im responsive Webdesign und die flexible Ausgabe auf diversen Endgeräten stellt erhöhte Anforderungen an die verwendete Webschrift. Hier ist eine responsive-fähige Typographie gefragt. Die Schrift muss mit speziellen Schriftschnitten in verschiedenen Größen eine gute Lesbarkeit gewährleisten. Das ist gerade bei schlanken Schriften ein Problem, da sie oft bei kleinen Punktgrößen „wegbrechen“ und nicht mehr scharf erscheinen. Wichtig ist außerdem, dass die Schrift eine große Auswahl an Zeichensätzen bietet für globale Einsetzbarkeit und kleine Datenmenge für rasche Ladezeiten. Google stellt hier eine Reihe tauglicher Schriften zur Verfügung. Wichtig ist, nach der Auswahl der richtigen Webfont eine sinnvolle Beschränkung an Schriftgrößen und -schnitten vorzunehmen, um die Lesbarkeit und Usability für alle Geräte zu verbessern.

Trend 6: Nach unten scrollbare Webseiten

Beim responsive Design verschieben sich Internetseiten heute nicht nur flexibel in der Breite, sondern damit automatisch auch in der Höhe. Der daraus resultierende Design-Trend lautet, daraus eine Tugend zu machen: nach unten scrollbare Webseiten sind angesagt. Das geht auch auf die Usability mobiler Endgeräte zurück: Hier ist es nämlich deutlich einfacher und schneller, eine Seite mit dem Finger nach unten zu scrollen als sich durch einen verschachtelten Seitenbaum zu klicken und mit Buttons oder gar Links (!) zu navigieren. Schon sind so genannte „One Pager“ im Trend, bei denen man bei Bedarf den gesamten Seiteninhalt auf eine Seite zum Scrollen verpackt (eignet sich jedoch nicht nur für kleine Webseiten mit überschaubaren Themen, nicht für große Firmen- oder Portalseiten). Hinzu kommt: Wenn eine Seite auf Mobilgeräten auf jeden Fall nach unten gescrollt werden muss, dann muss man sich als Webdesigner auch Gedanken machen, wie man die Informationen in sinnvolle Teileinheiten gliedert, um die Informationsaufnahme und Usability zu verbessern. Dieser neue „Zwang“ zur Seitenstrukturierung bringt es mit sich, dass die neuen Webseiten wieder bewusster wie früher Image-Broschüren gestaltet werden und man den Space dazu benutzt, Geschichten zu erzählen. Die Navigation wird oft so programmiert, dass sie oben eingeblendet bleibt, ganz gleich wie tief man in die Seite eingestiegen ist.

Trend 7: Leichte Moves und Parallaxe

Bedingt durch das Nach-Unten-Scrollen können nun auf Webseiten neue Strukturen und neue Effekte eingebaut werden. Dies bringt neue Benutzerführungen und Seitenaufteilungen mit interessanten Effekten hervor. Ein Effekt-Bereich ist das Bilden von Bewegungen und oder Parallax-Effekten. Dabei wird die Seite in verschiedene Ebenen aufgeteilt, die übereinander oder durcheinander geschoben werden. Auf diese Weise erfährt die Seite den Effekt einer Animation, ohne dass man wirklich mit Animationen arbeiten müsste. Daneben gilt es als u.a. chic, Buttons mit Animations-Effekten wie dem CSS3-Attribut „Animate“ zu versehen, um die Aufmerksamkeit zu erhöhen.

Trend 8: Overlays für Call-to-Action einführen

Früher hieß es Pop-up, war verpönt, da fast immer mit Werbung und oft mit unlauterer Werbung verbunden und wurde daher mit dem Pop-up-Blocker bedacht und somit nach und nach abgeschafft. Die Intention hinter dem Pop-up ist jedoch nie aus der Mode gekommen: Den Besucher der Webseite prominent auf etwas hinzuweisen und oder ihn zu einer Aktion zu bewegen. Dies hat gerade im Zeitalter von Kundengewinnung via Internet mit Content-Marketing, E-Mail-Marketing und Marketing Automation eine Renaissance erfahren. Eine Webseite soll heute nicht nur in Schönheit sterben, sie soll aktiv Kunden und Interessenten generieren, und das heißt heute: E-Mail-Adressen, Adress-Daten und Permissions zur Kontaktierung einsammeln. Aus diesem Grund setzt man heute verstärkt auf strategisch platzierte Overlays in Webseiten. Hierbei schiebt sich ein Kasten über oder neben den Webcontent, um Aufmerksamkeit zu erlangen. Auch Chat, Funktionen arbeiten manchmal mit diesem Prinzip. Dieser Trend ist wichtig und erzielt auch positive Effekte – solange dem Kunden die Möglichkeit geboten wird, das Overlay mit einem schnellen Klick nachhaltig aus dem Blick zu entfernen, wenn man an den Angeboten kein Interesse hat.

Overlays sollen Webseitenbesucher in Interessenten und Kunden verwandeln sowie Adressen generieren helfen oder einen Call-to-Action ausführen.

Fazit: Wer kein neues Webdesign einsetzt, sieht bald alt aus

2020 ist ein Jahr, in dem jede Firma, sofern sie es noch nicht getan hat, auf modernes responsives Design umstellen sollte. Hier hat Webdesign nicht nur eine ästhetische Funktion, sondern erfüllt auch technische Notwendigkeiten und sogar vertriebliche Ziele. Wer kein modernes Responsive-Design mit den entsprechenden Trends einsetzt, sieht buchstäblich alt aus. Und zwar so, dass es auch für den Laien ersichtlich ist. Früher war ein Webdesign oder die Notwendigkeit zu einem Webrelaunch nur eine Geschmacksfrage – im Jahr 2020 steckt deutlich mehr dahinter. Also, packen Sie es an, machen Sie Ihre Internetpräsenz responsive, und zwar topmodern responsive!

Christian Born