Webdesign Trends 2020

Die Top 16 Webdesign Trends 2020

incad Allgemein


Das Jahr 2020 bringt, wie auch jedes Jahr davor, wieder seine ganz eigenen Trends zum Thema Webdesign zum Vorschein. Webdesign Trends sind jedoch hierbei nicht ausschließlich gestalterischer Natur, sondern können sich auch mit technischen Themen beschäftigen. So sind Trends, wie z. B. die erhöhte Verwendung von Serifenschriften darauf zurückzuführen, dass Bildschirmauflösungen und somit auch die Lesbarkeit besagter Schriften immer besser werden. Auch bessere Browserunterstützungen können Trends zur Folge haben, wie z. B. die erhöhte Verwendung von Verläufen durch CSS3.

Wir stellen nun die 16 wichtigsten gestalterischen und technischen Webdesign Trends für 2020 vor.

Mobile First

Die mobile Version einer Webseite ist heutzutage wohl einer der wichtigsten Punkte, auf dem ein großer Fokus liegen sollte. Immer mehr Benutzer verwenden ihr mobiles Endgerät um Webseiten zu besuchen.

Daher ist es nicht verwunderlich, dass sich ein Trend entwickelt hat, in dem Entwickler und Designer sich zuerst auf die Konzeption der mobilen Ansicht für Smartphone und Tablet konzentrieren und dann erst etwaige andere Ansichten wie Desktop konzipieren. Somit wird mobilen Benutzern ein besseres Erlebnis zuteil, was die Nutzung der Webseite deutlich erhöhen kann.


Person mit Smartphone

Single Page Webdesign

Obwohl dieser Trend ebenfalls schon einige Zeit in Verwendung ist, wird er sicherlich noch eine Weile länger bestehen bleiben. Beschrieben wird mit Single Page Design eine Form von Webseite, welche aus exakt einer einzigen HTML-Seite besteht. Das bedeutet keine Unterseiten oder ähnliches.

Die Umsetzung solcher Seiten, im Kontext von SEO, ist definitiv schwieriger auszuführen als die Umsetzung herkömmlicher Seiten. Andererseits haben sie den Vorteil von Suchmaschinen präferiert zu werden, weil sie durch ihre kleine Dateigrößen schnell heruntergeladen sind.

Als Beispiel dient die Seite https://tempusturner.com.au, welche durch ihren einfachen Aufbau sehr leicht zu bedienen ist.

Hamburger Icon

Das, von mobilen Versionen schon bekannte Hamburger Icon, hat sich nun auch auf den Desktop verirrt und lässt mit einem einzigen Klick ganze Menüs erscheinen. Dass dieser Trend Seiten schlanker aussehen lässt ist nicht zu bestreiten, jedoch ist auf Desktop-Versionen meist genug Platz um eine Navigation von Beginn an anzuzeigen.

Wenn eine Navigation jedoch unerwünscht ist, da vielleicht zu viele Navigationspunkte existieren, oder es ästhetische Gründe dafür gibt, hilft ein Hamburger Icon, um Benutzer schnell auf ein Fullscreen Menü zugreifen zu lassen und etwaige Probleme mit der klassischen Navigation zu umgehen.

Ein Beispiel dafür finden Sie auf der Seite einer unserer Kunden: https://www.krainerhuette.at.


Hamburger Icon

3D-Modelle

Interaktive 3D-Objekte sind ein Blick in die Zukunft, auch im Bereich des Webdesigns. Immer mehr Designer verwenden 3D-Modelle auf Ihren Seiten, um die Schwelle zwischen digitaler und echter Welt noch mehr verschmelzen zu lassen.

Dadurch wird nicht nur eine völlig neue Stimmung erzeugt, welche Benutzer erfahren dürfen, sondern auch potenziell ein ganz eigener Stil für die Webseite erzeugt.

Eine Webseite, welche dies hervorragend umsetzt ist z. B. https://play.date.


3D Modell auf Webseite

Mikrointeraktionen

Ähnlich wie große Animationen helfen Mikronteraktionen die Augen der Benutzer auf die jeweils gewünschte Stelle zu lenken. Außerdem wird den Benutzern sowohl klar gemacht was gerade passiert und dadurch die Seite verständlicher gemacht, als auch eine gewisse Professionalität des Webauftritts vermittelt.

Die Seite https://www.kombudrinks.com nutzt Mikrointeraktionen nicht nur bei der Navigation, sondern auch den restlichen Inhalten.

Typografie – Serifenschriften und fette Texte

Jede Person, die sich schon einmal ein bisschen mit Typografie auseinandergesetzt hat weiß: Serifenschriften sollten nur für Printmedien verwendet werden. Jetzt geht der Trend jedoch in eine Richtung, in der sie am Bildschirm Sans-Serif-Schriften Konkurrenz machen. Dadurch, dass Serifenschriften für dekorative Zwecke und für das Hervorheben von Texten weitaus besser geeignet sind, als serifenlose Schriftarten, werden sie gerne für Seitenelemente wie Überschriften eingesetzt.

Weiters ist ein Trend in der Verwendung von fetter und großer Schrift zu erkennen. Durch den Einsatz von solch markanter Typografie können Aufmerksamkeit erregt und ästhetisch wertvolle Ergebnisse erreicht werden.

Die erfolgreiche Verwendung dieser beiden Trends kann auf http://www.peregrinewines.co.nz/winery beobachtet werden.


Fette Serifenschrift bei Webauftritt

Fixed Navigation

Fixe Navigationen, welche auch beim Hinunterscrollen sichtbar bleiben, sind immer häufiger vertreten.  Da Menüpunkte immer erreichbar sind, haben fixe Navigationen einen großen Vorteil im Bereich der Usability. Navigationspunkte und Unterseiten sind immer schnell verfügbar, ohne lange suchen oder scrollen zu müssen. Dadurch sind sie bei Benutzern beliebt und verringern deren Frustration bei der Bedienung der Website.

Andererseits nehmen sie Platz ein und können gestalterisch als unvorteilhaft angesehen werden, wenn z.B. das Design nicht darauf ausgelegt ist.

Auf der Seite https://www.oberneukirchen.at ist diese Art von Navigation vorhanden.

Ehrliche, echte Fotos

Dies ist einer der Trends, welcher zwar vom Budget abhängt, ansonsten aber eigentlich immer angewendet werden sollte. Die Rede ist von Fotos im Webauftritt, welche speziell dafür erstellt wurden.

Stockfotos wirken meist zu gekünstelt und erwecken keinen authentischen Eindruck, eher das Gegenteil. Weiters sind sie unpersönlich und können daher auch nicht mit selbst erstellten Fotos mithalten. Daher empfiehlt es sich einen professionellen Fotografen zu engagieren, um aus der Masse hervorzustechen und Webauftritten Persönlichkeit zu verleihen.

Sehr persönlich und emotional sind beispielsweise die Fotos der Seite https://mpdguardians.com.


Foto von Polizist und Kind auf Webseite

Kurze Ladezeiten

Durch immer schnellere Internetverbindungen sind Benutzer kurze Ladezeiten gewohnt, wodurch auch den Entwicklern mehrere Möglichkeiten geboten sind. Dadurch werden Websites immer größer, künstlerischer und ambitionierter. Jedoch sollte eines stets bedacht werden: die Performance ist immer noch von hoher Wichtigkeit.

Die schnelle Ausgabe einer Webseite nimmt sowohl bei der SEO (Search Engine Optimization) eine wichtige Position ein, als auch bei mobilen Benutzern, welche mit einer weniger starken Internetverbindung unterwegs Seiten aufrufen wollen. Wenn Sie wissen wollen, wie Sie Ihren PageSpeed optimieren können, klicken sie hier um unseren Beitrag darüber zu lesen.


Vektorgrafik einer Person im Büro

Illustrationen, Vektorgrafiken und Animationen

Obwohl Videos in den letzten Jahren als beliebte Alternative für statische Hintergrundbilder verwendet wurden, setzen sich jetzt auch größere Animationen durch, welche meist weniger Speicherplatz verbrauchen. Auch Illustrationen und Vektorgrafiken werden immer beliebter. Unternehmen nutzen diese, um sich einzigartig zu präsentieren bzw. um ganze Geschichten damit zu erzählen.

Die Seite https://bzx.network veranschaulicht nicht nur Vektorgrafiken, sondern auch die Animierung dieser.


Vektorgrafik einer Person im Büro

Parallax-Effekt

Obwohl Parallax Scrolling schon in den letzten Jahren von modernen Webseiten benutzt wurde, wird dieser Trend nicht weniger wichtig. Der Parallax-Effekt erzeugt einen Effekt der Tiefenwahrnehmung, da sich die verschiedenen Ebenen einer Seite unterschiedlich schnell bewegen. Somit kann man Effekte erzielen, in denen z. B. Bilder aussehen, als würden sie sich tiefer in der Seite, oder gar im Bildschirm, befinden als der restliche Inhalt.

Dieser Effekt kann auf der Seite https://www.monogranofelicetti.it/en/ sehr gut beobachtet werden.

Experimentelle Designs und Broken Grid Layout

Experimentelle Layouts trauen sich typischen Schemas zu entsagen und schaffen durch das Herausragen einzelner Elemente aus dem Raster, auch Broken Grid Layout genannt, das Design aufzulockern und sich dadurch einzigartig aus den Template Webseiten hervorzuheben. Jedoch sind sie damit schwerer zu erstellen, erfordern dadurch mehr visuelles Knowhow und können dem Benutzer die Informationsaufnahme erschweren.

Die von uns technisch umgesetzte Seite https://www.hochschober.com enthält Elemente, welche aus dem Raster herausragen und erzielt somit eine ganz eigene Wirkung.


Broken Grid Layout

Designtemplates

Templates erfreuen sich durch ihre einheitliche und simple Art erhöhter Beliebtheit. Sie bestechen nicht nur durch ihre visuelle Attraktivität und erleichterter Erstellung, sondern auch durch eine benutzerfreundliche und einheitliche Bedienung.

Ein klassisches Beispiel dafür ist die Seite https://designmuseum.dk/en, welche durchaus visuell ansprechend und leicht zu bedienen ist.


Nützung von Desingtemplate auf Website

Videos, Videos, Videos

Videos auf Webseiten sind schon seit einigen Jahren Gang und Gäbe und werden auch immer beliebter. Durch Videos können nicht nur Inhalte verständlicher dargestellt und Zielgruppen besser angesprochen werden, auch im Bereich SEO sind sie von Vorteil.

Verwendung finden sie in sowohl inhaltlicher Form, als auch dekorativer. So werden statische Hintergrundbilder im Header immer öfter von kurzen, sich wiederholenden Videos ersetzt, welche Seiten lebhafter und erfrischender wirken lassen.

Die eingebetteten Videos von https://radioaktivefilm.com sind sowohl inhaltlich, als auch dekorativ wertvoll.

Organische Formen

Geometrische Formen werden benutzt, wenn Themen wie Verlässlichkeit und Verantwortungsbewusstsein im Vordergrund stehen.

Der Trend zu natürlicheren, menschlich erzeugten Formen befasst sich hierbei mit dem Gegenteil. Webseiten werden durch organische Formen gewisse bequeme und gemütliche Akzente verliehen.

Der natürliche Flair wird durch verschiedenste spontan wirkende Formen erzielt und erzeugt Bewegung in sonst eher statisch aussehenden Auftritten.

Die runden, bunten und freundlichen Grafiken sind ein Hauptbestandteil der Webseite http://www.indofolio.com.


Organische und bunte Formen

Farbverläufe und knallige Farben

Wenn keine Bilder vorhanden sind, können Farbverläufe bis zu einem gewissen Grad Abhilfe schaffen. Der Trend der Farbverläufe ist 2019 voll im Gange und sorgt für Tiefe in vielleicht sonst eher flachen Designs.

Auch gesättigte, laute Farben können dabei helfen einen Tiefeneffekt zu erzielen. Die bunten und auffälligen Farben stehen im Gegenteil zu den, in den letzten Jahren massenweise benutzten, zurückhaltend dezenteren Farben. Es wird sich 2020 mehr getraut, um Webauftritten mehr Aufmerksamkeit zu verleihen.

Die bunten Elemente auf der Seite https://easterneuropeanmovies.com vereinen sowohl bunte, kräftige Farben, als auch Farbverläufe und wirken dadurch sowohl modern, als auch auffällig.


Webseite mit kräftigen Farbverläufen

Fazit

Trends kommen und gehen, jedoch ist es wichtig als Designer die wichtigsten Trends zu verfolgen und sich einen guten Überblick zu verschaffen. Durch das Anwenden von zeitgerechten Trends kann ein moderner Auftritt geschaffen werden.  Man sollte jedoch immer abwägen ob ein Trend zu einer Webseite passt, oder nicht, da diese Trends nicht universell bei jeder Seite die gleiche Wirkung erzielen.


Diesen Beitrag Teilen: