Webdesign Trends 2020: Das bringt das neue Jahr mit sich!

Trends kommen und gehen auch wieder. Gerade im Webdesign sind Trends aber enorm wichtig, denn wenn du als ambitionierter Unternehmer zeitgerechte Trends in die Gestaltung deines Auftritts einfließen lässt, stärkst du deine Marke und zeigst, dass du zukunftsfähig bist. Auch für das Jahr 2020 haben sich bereits neue Trends herauskristallisiert. Hier erfährst Du, welche Webdesign Trends 2020 zu echten Boostern und Burnern werden können.

Was bisher geschah…

2019 beherrschen kontraststarke Farben, bewusste Asymmetrie, menschliche Illustrationen und Farbverläufe mit unkonventionellen Proportionen die Design-Szenerie. Über allem steht dabei das Mobile First Prinzip. Es ist trendig, sich mit seinem Webdesign zuerst an Tablets und Smartphones zu orientieren und erst danach an der klassischen Desktop-Ansicht. Wer ein modernes Erscheinungsbild vermitteln möchte, nutzt diese Trends oder zumindest Teile davon.

Was kommt jetzt 2020?

Musst Du Dein Webdesign komplett überarbeiten, Elemente und Komponenten austauschen oder reichen Anpassungen, um die neuen Trends geschickt zu integrieren?

Fest steht, dass es auch 2020 wieder ganz neue Trends gibt. Aber gleichzeitig musst Du auch auf Altbewährtes setzen und die entsprechenden Ideen dahinter optimieren. Außerdem solltest Du Dich nicht ausschließlich auf rein gestalterische Trends fokussieren.

Mobile First & Ladezeiten

Mobile Endgeräte dominieren immer mehr. Der klassische PC führt mancherorts nur noch ein Schattendasein, während vor allem das Handy zum echten Web-Allrounder geworden ist. Du solltest also bei der Gestaltung deiner Website nach wie vor gründlich in Sachen Mobile vorgehen. Dadurch sorgst Du dafür, dass deine User ein besseres Nutzererlebnis haben und spätestens nach dem Mobile-First-Indexing von Google ist das Thema ziemlich schwerwiegend in Sachen Suchmaschinenoptimierung.

Tipp aus dem Wunder-Office: Mobile First Konzepte und Designs machen aus unserer Sicht nicht bei jeder Seite Sinn - zumindest noch nicht. Zu jedem guten Relaunch gehört deswegen immer ein Blick auf die Zahlen: Mobile vs. Desktop sollte dabei über einen längeren Zeitraum betrachtet werden. Aber machen wir uns nichts vor: Auch bei “Desktop First” gilt es, die mobile Version gründlich zu designen und zu optimieren.

Neben den Themen User Experience und Designs hat der Mobile First Ansatz auch Auswirkungen auf Ladezeiten: Die immer schnelleren Internetverbindungen sorgen quasi automatisch dafür, dass die meisten Internetnutzer mittlerweile kurze Ladezeiten gewöhnt sind. Auch 2020 nehmen ein schneller Verbindungsaufbau und optimierte Ladezeiten einen extrem hohen Stellenwert ein. Gleichzeitig präsentieren sich die jeweiligen Websites immer künstlerischer, immer größer und auch viel ambitionierter. Dabei gilt es, eine ausbalancierte Performance zu schaffen.

Videos sind weiterhin auf dem Vormarsch

Sie sind zwar bereits seit mehreren Jahren beliebt, aber 2020 werden Websites ohne Videos aller Wahrscheinlichkeit nach spürbar an Beliebtheit einbüßen. Denn durch Videos respektive Video-Botschaften kannst Du Inhalte und komplexe Themen Deiner Zielgruppe verständlich darstellen. Auch Persönlichkeit und Authentizität lassen sich durch Bewegtbild besser vermitteln, als durch statische Bilder und Texte. Daneben bringen Videos unter Umständen auch Vorteile in Sachen SEO mit sich.

Bei der Streitwerkstatt haben wir uns auch für ein Video im Header entschieden.

Besonders im Trend liegt das Ersetzen von Hintergrundbildern im Header durch sich wiederholende, kurze Videos. Dadurch wirken Seiten frischer und lebhafter. Aber Achtung: Bei größeren Videos solltest du auf verschiedene Dinge achten.

Autoplay mit Ton solltest du keinesfalls auch nur in Erwägung ziehen, das sieht schnell nach Spam aus und wird deine Besucher eher abschrecken. Auch die Konformität hinsichtlich der DSGVO sollte auf deiner To-Do Liste stehen und letzten Endes solltest du immer ein Auge auf die Auswirkungen auf die Ladezeiten deiner Website haben.

Soft UI (Neumorphismus)

Dieser Trend gehört zu den neuesten und wird gerade auf Plattformen wie Dribbble gehyped. Doch auch im echten Leben setzen schon einige (Web) Apps auf Soft UI. Das Konzept dahinter: Weniger Kontraste und ein Look, der fast wie ein 3D-Rendering aussieht.

Der Nachteil daran: Es gibt Einschränkung in Sachen Farbwahl, denn auf der einen Seite werden zwar verschiedene Farbtöne für die Schattierung der Elemente eingesetzt, auf der anderen Seite entspricht die Hauptfarbe der Elemente der des Hintergrunds. Das kann durchaus dazu führen, dass Designs schnell eintönig wirken und/oder Kontraste so gering sind, dass es Usability-Probleme gibt.

Nichtsdestotrotz: Soft UI gehört zu den aktuellsten Webdesign-Trends 2020 und wir werden sicher noch einiges damit sehen.

Serifenschriften

Es ist nicht so, als hätten Designer nicht auch in den letzten Jahren Schriftarten mit Serifen genutzt, aber zumindest so wie wir das wahrgenommen haben, wurden deutlich mit seriflose Schriften genutzt. Das liegt mitunter daran, dass Sans-Serif-Schriften in der Regel deutlich moderner wirken und der Trend vor allem im B2B-Bereich ganz klar in diese Richtung ging.

Klar ist aber auch, dass Serifschriften sich nach wie vor großer Beliebtheit erfreuen und gut eingesetzt auch richtig gut wirken können, sowohl was Überschriften angeht, als auch für Fließtext.

Wir glauben, dass 2020 das Jahr der Serifen wird: Große Überschriften mit viel Kontrast und einem Highlight-Faktor werden wir bestimmt noch häufiger in diesem Jahr sehen.

Organische Formen

2018 und 2019 setzte das Webdesign verstärkt auf klare und geometrische Formen. Dies impliziert Verantwortungsbewusstsein und Verlässlichkeit. Der Trend schlägt zukünftig die umgekehrte Richtung ein: Besucher sollen sich auf einer Seite wohlfühlen.

Das erreichst Du durch den Einsatz organischer - also natürlicher - Formen. Das setzt quasi gemütliche Akzente, die den Wohlfühlcharakter erhöhen, erzeugt Sympathie und bringt ein bisschen Verspieltheit in dein Design. Außerdem kommt durch spontan wirkende Formen unterschiedlichster Art mehr Bewegung in statisch wirkende Online-Präsenzen.

Osano hat unserer Meinung nach dabei einen besonders guten Job gemacht: Trotz organischer Formen, verspieltem Design und starken Farben wirkt die Seite seriös, aber nicht langweilig. Organische Formen können also auch in eher konservativen Branchen durchaus eingesetzt werden.

Mikrointeraktionen

Mikrointeraktionen lenken die Augen der Seitenbesucher auf die vom Webdesigner bzw. Website-Betreiber gewünschten Stellen. Bislang werden hierfür vor allem große Animationen genutzt. Mikrointeraktionen sorgen hier für mehr Verständlichkeit hinsichtlich der Intention, was die Transparenz und die Usability erhöht. Zudem vermittelt der Webauftritt durch Mikrointeraktionen mehr Professionalität.

Screenshot von Stripe

Großer Vorreiter in Sachen Mikrointeraktion ist unserer Meinung nach Stripe: Trotz des sehr aufgeräumten Designs, sind viele kleine Mikrointeraktionen bei Icons, Buttons und Animationen zu erkennen.

Broken Grid Layouts

Neue Layouts, die das typische Schema verlassen, zählen ebenfalls zu den Webdesign Trends 2020. Hier ist vor allem das Broken Grid Layout zu nennen, bei dem gezielt einzelne Elemente aus dem Raster herausragen. Dadurch wird das gesamte Layout aufgelockert und erhält einen einzigartigen Touch.

Dieses Design haben wir auf Behance gefunden.

Allerdings solltest Du dieses Layout verstärkt für Websites nutzen, deren Zielgruppe über ein gewisses visuelles Know-how verfügt. Denn gerade ein Broken Grid Layout kann die Informationsaufnahme für den Benutzer erschweren.

3D-Modelle

Auch im Webdesign-Bereich ist die 3D-Technologie kräftig auf dem Vormarsch. 2020 werden immer mehr Webdesigns mit 3D-Objekten und Renderings angereichert. Dadurch wird die reale mit der digitalen Welt noch prägnanter miteinander verschmelzen. Der gesamte Auftritt erzeugt sowohl für die Website an sich als auch für die Besucher eine völlig neue Stimmung.

Richtig und durchgängig umgesetzt wird ein solches Design zum echten Hingucker und Alleinstellungsmerkmal.

Variable Fonts

Bei herkömmlichen Fonts werden die einzelnen Schriftschnitte in jeweils eigene Dateien gespeichert. Dies hemmt zum einen die Kreativität und zum anderen teilweise die Ladezeit. Im Rahmen der Webdesign Trends 2020 rücken zukünftig die variablen Fonts in den Blickpunkt.

Unsere Quelle für variable Fonts ist übrigens V-Fonts.com

Diese Fonts werden nicht in eigenen Dateien gesichert. Zudem kannst Du zum Beispiel die Schriftbreite und -stärke, die optische Größe sowie die Neigung gezielt verändern. Selbst die Kontraste, Konturen und die Werte für die Serifenform lassen sich flexibel bestimmen. Variable Fonts erhöhen somit Deine kreativen Möglichkeiten deutlich.

Noch gibt es nicht allzu viele Ressourcen für Variable Fonts und auch den Einsatz auf echten Websites haben wir nur sehr vereinzelt bis jetzt gesehen, aber wir sind uns sicher, dass in Zukunft noch deutlich mehr davon zu sehen sein wird.

Nicht alle Trends und Entwicklungen haben universellen Charakter

Natürlich musst Du stets genau abwägen, welcher aktuelle Trend tatsächlich auch zu einer Website passt. Neben diesen aktuellen Trends gibt es noch zahlreiche weitere Entwicklungen und Trends, die 2020 eine dominante Rolle im Webdesign-Bereich einnehmen.

Diese orientieren sich stark an den sich geänderten Bedürfnisse und Vorlieben der Webseitenbesucher, denn User- und Customer Experience werden immer wichtigere Themen.