Themen / Webdesign

UX/UI Trends 2020


Technologie und Anforderungen sind im ständigen Wandel. Aus diesen Veränderungen geben sich laufend neue UX/UI Trends. Jeder will auf dem neuesten Stand sein, den neuesten Trend kennen.

Optimiertes Nutzererlebnis. Modernes Webdesign. Neue Herausforderungen.

Technologie und Anforderungen sind im ständigen Wandel. Aus diesen Veränderungen geben sich laufend neue UX/UI Trends. Jeder will auf dem neuesten Stand sein, den neuesten Trend kennen. Im Folgenden haben wir vier UX / UI Trends aus 2020 zusammengetragen, ein kleiner Ausschnitt aus dem Kosmos der Designtrends, die aktuell aufkommen:

Split-Screen

Split Screen bedeutet die Teilung der Bildschirmfläche in zwei Teile. Dabei ergeben sich zwei vertikale Hälften. Die Umsetzung und Ausprägungen des Split Screen sind vielfältig, dabei können beide Bereiche völlig unterschiedlich designt werden. Beispielsweise kann auf der einen Seite des Screens ein großflächiges Bild platziert sein, während auf der anderen Seite ein Text steht. Dies Darstellung der Inhalte bietet dem Nutzer ein besonderes und emotionales Nutzungserlebnis.

Beispiele für Split-Screen

Splitscreen Beispiel (Design Trend 2020)
Quelle: 7h34.fr

Splitscreen Beispielt (Design Trend 2020)
Quelle: renaterechner.at

Anwendungstipps

  • Split-Screen Design sollte auf die Inhalte ausgerichtet werden. Dabei ist es besonders geeignet für wenige Inhalte und innovative Projekte.
  • Der Nutzer sollte durch diese Darstellung nicht überfordert werden. Dem kann durch ein schlichtes und minimalistisches Design entgegengesetzt werden.
  • Durch die vertikale Teilung des Screens sollte die Nutzerführung über die Seite nicht negativ beeinflusst werden. Der Nutzer sollte weiterhin geleitet werden.
  • Split-Screen kann bei kleineren Screens problematisch werden. Bei der mobilen Version empfiehlt sich die Anordnung untereinander.

Neumorphism

Neumorphism ist eine neue Art des Skeuomorphism, bekannt dafür, dass es Elemente realitätsgetreu darstellt. Durch den Trend des Flat Design hat Skeuomorphism an Bedeutung verloren und kommt nun als Neumorphism, auch Neo-Skeuomorphism genannt, zurück. Bei Neumorphism werden Steuerelemente und Bedienflächen so gestaltet, dass sie realitätsnah wirken. Nutzer sollen durch Interaktion mit Buttons, Schieberegler oder Scrollbars ein realitätsnahes Feedback erleben. Durch Verläufe und Schatten entstehen 3D-artige Effekte, die Elemente nach oben gewölbt aussehen lassen, die bei Bedienung des Elements wirken, als ob sie eingedrückt werden.

Beispiele für Neumorphism

Beispiel Neumorphosm (Designtrend 2020)
Quelle: codepen.io

Beispiel Neumorphism (Designtrend 2020)
Quelle: dribble.com

Anwendungstipps

  • Steuerelemente sollten so gestaltet werden, dass ihr jeweiliger Zustand eindeutig erkennbar für den Nutzer ist (Bsp. eingedrückt vs. nicht eingedrückt)
  • Drop Shadow: Nicht ausgewählte Buttons oder Tasten können durch einen Drop Shadow nach außen gewölbt wirken
  • Inner Shadow: Ausgewählte Buttons können durch einen Inner Shadow eingedrückt wirken
  • Achtung: Barrierefreiheit beachten

Illustrationen

Illustrationen können als gestalterisches Stilmittel eingesetzt werden. Sie können helfen, den Nutzer auf einer visuellen Ebene anzusprechen und durch individuelle Gestaltung einen hohen Wiedererkennungswert schaffen. Häufig werden für Illustrationen abgerundete und dynamische Figuren genommen, die eine Leichtigkeit in ihrem Handeln darstellen. Dabei ist bei der Umsetzung jedoch keine Grenzen gegeben, es gibt Illustrationen in unzähligen Variationen.

Beispiele für Illustrationen

Illustrationen Beispiel (Designtrend 2020)
Quelle: freepik.com

Illustrationen Beispiel (Designtrend 2020)
Quelle: freepik.com

Anwendungstipps

  • Individuellen Illustrationen können Standard Icons ersetzen und einen Wiedererkennungswert schaffen
  • Neue und individuelle Illustrationen brauchen seine Zeit. Die Gestaltung sollte daran ausgerichtet sein, welche Wirkung und visuelle Sprache vermittelt werden soll.

Große Bilder & Video Hintergründe

Moderne Webseiten spielen häufig große Bilder, die Abwechslung zur Flut an Textinhalten bieten. Dabei bieten Bilder eine schnelle Möglichkeit Emotionen aufzubauen und können durch einen rationalen Text ergänzt werden. Genutzt werden große Bilder, und auch Videos, nicht nur am Anfang von Webseiten, sie können auch im weiteren Verlauf der Seite eingesetzt werden und so Inhalte auflockern und emotionalisieren. Videosequenzen die, im Hintergrund gespielt werden bringen Dynamik und Lebendigkeit auf die Seite.

Beispiel für große Bilder & Video Hintergründe

Moodboard Film
Quelle: moodboard-film.de

Beispiel Große Bilder & Video Hintergründe (Design Trend 2020)
Quelle: couleecreative.com

Anwendungstipps

  • Individuelle Bilder und Videos hinterlassen einen bleibenden Eindruck, dabei sollte auf Standardbilder verzichtet werden.
  • Bilder und Videos sollten inhaltlich, als auch optisch auf die Webseite und Marke angepasst sein. Konsistenz einer Farb- und Bildsprache sollte eingehalten werden.
  • Die Ladezeit der Seite darf durch die großen Bilder und Videos sich für den Nutzer nicht länger anfühlen. Bilder und Videos können optimiert werden, um das Datenvolumen zu reduzieren.
  • Liegt Schrift über dem Bild oder Video sollte diese gut lesbar sein.

Fazit

Gibt es den einen Trend, dem man folgen sollte?

Es entstehen ständig neue Trends, alte verschwinden oder werden verändert wiedergeboren. Fast jedem Trend steht ein Gegentrend entgegen. Daher sollten Trends als Anregung und Inspirationen dienen. Die Aufgabe eines guten UX Designers ist es weiterhin, das passende für den Kunden und die Anwendung auszuwählen und einzusetzen, denn nicht jeder Trend passt zu jeder Zielgruppe oder Projekt.

Wenn Du wissen möchtest, was zu deinem Projekt oder deiner Zielgruppe passt, kontaktiere uns gerne unter:
0821 / 567 342 900

codeblick


Wir sind eine Digital- & E-Commerce Agentur mit einem hochqualifizierten Expertenteam. Wir entwickeln auch für Sie und Ihr Unternehmen den passenden und effektiven digitalen Weg und stehen Ihnen als Ihr Partner bei der Digitalisierung zur Seite.

Bereits zahlreiche Kunden aus ganz Deutschland werden von uns unterstützt, schenken uns Ihr Vertrauen und lassen Sich von neuesten Technologien sowie modernstem Know-How & Lösungen täglich begeistern.

Wir sind eine qualifizierte und erfahrene Contentful- und Shopware Partner Agentur, sowie Partner von Facebook, Google und vielen weiteren. Kurz gefasst: Digitale Lösungen sind unsere Stärke - Lassen Sie uns gemeinsam digital überzeugen!

Google Partner Agentur codeblick aus Augsburg
Shopware Partner Agentur codeblick aus Augsburg, München und Umgebung.
codeblick Ihre Contentful Agentur aus München.

Suchen Sie einen Partner mit dem Sie Ihr Vorhaben umsetzen können?