Kernkraft

12 UI-Design trends in 2020

Geschrieben von Dennis Nuhn veröffentlich am in der Kategorie Design, UX
Webdesign Trends 2020

Neues Jahr, neue Trends? Ganz so kurzlebig sind Trends im UI-Design glücklicherweise nicht. Im Gegenteil, viele Trends brauchen sogar Zeit um zu reifen und sich erst zu etablieren. Ein konkretes Beispiel dazu folgt gleich. Viele der aufgelisteten Trends sahen wir also schon die letzten Jahre und werden weiter fortgeführt. Einer der vorgestellten Trends ist aber wirklich brandneu. Dazu gleich mehr.

Videos

Dass sie immer häufiger im Web anzutreffen sind, hat einen guten Grund. Sie können Emotionen wecken, authentische Einblicke ermöglichen oder Wissen vermitteln, ohne dass sich der Nutzer durch lange Textwüsten quälen muss.

Auf invisionapp.com beispielsweise läuft im Hintergrund der Bühne ein schickes Moodvideo, welches die Menschen zeigt, die mit dem Produkt Invision arbeiten.



Grelle Farben & verläufe

Auffällige Akzentfarben und Farbverläufe sind weiterhin voll im Trend. Die Farbverläufe bestehen dabei meist aus, im Farbkreis, benachbarte Farben. Blau & Grün, Blau & Violett oder Magenta & Orange. Der Trend begann bereits vor ein paar Jahren und wird sich sicherlich noch ein paar weitere Jahre halten. Instagram zählt dabei zu den prominenten Vorreitern, obwohl sie 2016 für ihr neues Logo teils Spott und Häme ernteten, wie folgendes Meme ganz gut darstellt.



Dies zeigt also, dass sich Trends erst etablieren müssen und es ein paar Jahre dauern kann, bis sie angenommen werden.

Die Landingpage für das Videospiel "Need for Speed: Heat" ist ein weiteres Beispiel für grelle, auffällige Akzentfarben.

Darkmode

Ein Trend, der vor allem von Apple und Google vorangetrieben wird, da iOS und Android seit letztem Jahr einen integrierten Darkmode bieten.
Schont die Augen und in Zeiten von OLED Displays sogar den Akku. Funktioniert auch sehr gut in Kombination, mit den zuvor angesprochenen grellen Farben, da dadurch tolle Kontraste entstehen.
Damit der Darkmode aber auch im Web funktioniert, müssen die Seitenbetreiber mitziehen. Twitter gehört dabei zu den absoluten Vorreitern.


Das Coole: Die Seite erkennt - sofern vom Browser unterstützt - automatisch, ob der Nutzer im Betriebssystem den Darkmode aktiviert hat und knippst daraufhin auch auf der Seite die Lichter aus.

Authentische Fotos

Stockfotografien haben zweifelsohne Ihre Vorteile und Daseinsberechtigung, allerdings können Sie auch schnell aufgesetzt und unglaubwürdig wirken. Daher lohnt es sich für Webseitenbetreiber einen Fotografen zu engagieren, der Sie, Ihr Unternehmen, Ihre Marke oder Produkt authentisch in Szene setzt. Diese „ehrlichen“ Fotos sind natürlicher und wirken auf den Betrachter vertrauenswürdiger. Ein gutes Beispiel für eine Seite mit authentischen Fotos ist die Seite vom Delikatessen Shop Ghorban.

Duotone Fotos

Nach wie vor großer Beliebtheit erfreuen sich die sogenannten Duotone Fotografien. Um diesen Effekt zu erreichen wird einfach ein bestimmter Filter über ein Schwarz-Weiß-Foto gelegt. Bereits 2015 warb Spotify mit genau solchen Fotos. Ein weiterer Vertreter von Duotones ist die Telekom, die die Fotos in ihrem satten Magenta färben. Wirklich schick!
// ToDo: get molecules pictures Duotone-Foto im Telekom-Look // ToDo: get molecules pictures Duotone-Foto im Spotify-Look
Duotone-Foto im Telekom-Look Duotone-Foto im Spotify-Look

Soft UI / Neumorphismus

Der Name ist Programm, denn dank abgerundeten Ecken und sanften Schatten schaut dieser noch wirklich sehr junge Stil wortwörtlich „soft“, also „weich“ aus.

Der Name "Neumorphismus" ist eine Wortneuschöpfung aus den Begriffen "Neu" und "Skeuomorphismus". Letzterer versucht bekannte Materialien wie Holz, Papier, Leder oder Metall zu imitieren und wurde im UI-Design damals vom Flatdesign abgelöst. Schafft es der frische, dreidimensional wirkende Neumorphismus, das Flatdesign abzulösen? Wir werden sehen.

Smarthome App im Stile des Neumorphismus

Minimalismus & Whitespace

In unserer komplexen Welt, mit einer immer größer werdenden Informationsflut, ist der Trend des Minimalismus kein Wunder. Wir Menschen haben Dinge gerne möglichst simpel und verständlich.

Der großzügige Umgang mit dem ohnehin unbegrenzt vorhandenen Platz, sowie die Reduktion auf das Nötigste, helfen dabei. Beides führt dazu, dass wir uns besser auf das Wesentliche konzentrieren können. Ganz ohne das negative Gefühl der Überforderung.


Google Stadia

Microinteraktionen

Kleine Animationen, die beim Interagieren von Elementen ausgelöst werden, sorgen nicht nur für mehr Würze bei der Bedienung, sondern helfen auch dabei den Blick des Nutzers zu lenken und die jeweilige Funktion hinter Elementen verständlicher zu machen. Sei es der Button, der sich beim Hovern umfärbt, oder ein Textlink, bei dem sich der Unterstrich animiert aufbaut. In beiden Fällen wird dem Nutzer so verdeutlicht, dass er an dieser Stelle eine bestimmte Aktion ausführen kann.

Invision

Die Animationen haben einen weiteren entscheidenden Nutzen. Sie eignen sich nämlich auch hervorragend als Belohnung für den Nutzer. Der Nutzer wird dadurch motiviert länger auf einer Seite zu verweilen und Aktionen wiederholt durchzuführen. Das kann das Hinzufügen von Produkten in den Warenkorb sein, oder das Liken eines Beitrages auf Facebook. Macht eine Aktion Spaß, ist die Wahrscheinlichkeit größer, dass der Nutzer seine Aktion wiederholt.

Ghorban

 

Facebook

Split-Screen-Design

Ein seit bereits mehreren Jahren beliebtes Layout, bei dem der Screen in zwei Teile geteilt wird. Meist 50/50 oder aber auch Eindrittel-Zweidrittel. Eignet sich vor allem für große Viewports und wirkt aufgeräumt.
// ToDo: get molecules pictures Twitters Startseite mit Anmeldemaske im Split Screen Design // ToDo: get molecules pictures Startseite von Dropbox mit Anmeldemaske im Split Screen Design
Twitters Startseite mit Anmeldemaske im Split Screen Design Startseite vom Dropbox mit Anmeldemaske im Split Screen Design

Broken Grid Layout

Wem das Split Screen Design zu langweilig ist, der kann zum Broken Grid Layout greifen. Die Überlappungen und fehlende Bündigkeit der Elemente können im ersten Moment wie ein Unfall aussehen, sie sind aber gewollt. Sie wirken besonders künstlerisch, erzeugen Spannung und eine gewisse Räumlichkeit.
// ToDo: get molecules pictures Beispiel für ein Broken Grid Design // ToDo: get molecules pictures Beispiel für ein Broken Grid Design mit Bild
Beispiel für ein Broken Grid Design Beispiel für ein Broken Grid Design mit Bild

Bottom Navigation

Sie ist aus der Welt der Apps rübergeschwappt und kommt in den kleinsten Viewports, also auf Smartphones zum Einsatz.
 Die klassische Platzierung der Navigationsleiste, am oberen Ende der Seite, wurde damals vom Desktop übernommen und bis heute aufgrund der Gewohnheit beibehalten, bringt aber ein großes Problem mit sich. Sie ist einhändig nur sehr schwer mit dem Daumen zu erreichen. Folgende Heatmap zeigt dies sehr gut auf.


Das Platzieren der Navigation, am unteren Ende des Displays, löst dieses Problem und ermöglicht eine problemlose, einhändige Bedienung. Zugegeben: Im Web ist sie leider noch recht selten, bei Designern aber bereits beliebt. Aufgrund der für Web-Verhältnisse ungewohnten Darstellung, entschieden sich Seitenbetreiber bisher meist für die klassische Top-Navigation.



mobile.twitter.com
reihenhaus.de

Fixed / Sticky Navigation

Eine gewöhnliche Navigation ist stets am Seitenanfang, sodass man zunächst immer zurück hochscrollen muss, um wieder zur Navigation zu gelangen.
Eine Sticky- oder auch Fixed-Navigation hingegen verschwindet beim Scrollen nicht. Sie verbleibt dauerhaft im sichtbaren Bereich, damit der Nutzer zu jeder Zeit navigieren kann, ohne hochscrollen zu müssen.
Der einzige Nachteil ist, dass sie dadurch auch ein wenig Platz in Anspruch nimmt und der verfügbare Platz somit schrumpft.


Playstation.com


Alternativ gibt es daher auch eine Semi-Sticky Navigation, die beim Herunterscrollen verschwindet und beim leichten hochsollen wieder auftaucht. So hat man die Vorteile der beiden anderen Varianten vereint. Sehr praktisch! So auch im neu überarbeiteten Seitenbereich "Parken" vom Flughafen Düsseldorf.


dus.com/parken