• Lösungen
    • Alle Lösungen
    • Content & Commerce
    • Shopware
    • Oxid
    • Digital Jetzt
  • Leistungen
    • Alle Leistungen
    • Beratung & Strategie
    • UX & Design
    • Web-Development
    • Schnittstellen & Anbindungen
  • Referenzen
    • Erfolgsgeschichten
    • Projektverlauf
  • Partner
  • Agentur
  • Blog
  • Karriere
  • Kontakt

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 Sie wissen möchten, was zu Ihrem Projekt oder Ihrer Zielgruppe passt, kontaktieren Sie uns gerne unter:
0821 / 567 342 90

Blog Artikel Slider aus Themenbereich: Webdesign

Bild zum Beitrag UX/UI Design Trends

Webdesign

UX/UI Trends 2020

Vorschaubild mit einem Handy in der Hand für den Blogbeitrag Mobile First Design von der Digitalagentur Codeblick in Augsburg

Webdesign

Mobile First Design

Bild zu Blogbeitrag Schnellere Projektumsetzung mit Content Elementen

Webdesign

Schnellere Projektumsetzung mit Content Elementen

Das Thumbnail für den Blogbeitrag zu webflow

Webdesign

webflow - Website-Programmierung für Designer

Neuste Blog Artikel

Mit Fokusgruppen ans Ziel

Digitale Strategien

Gemeinsam ans Ziel mit Fokusgruppen

Umfragen

Digitale Strategien

"Sag mal, wie findest du eigentlich…?" - Umfragen im UX Research

Online Shop selber erstellen

E-Commerce

Shopware 6 Shop erstellen - Das kommt auf Sie zu

German Web Award

Insights

German Web Award 2022 - Wir haben gewonnen!

A/B Testing

Digitale Strategien

A/B-Testing - Gewissheit statt Spekulation!

UX Research

E-Commerce

User Experience Research

Data Analytics

Digitale Strategien

Data Analytics - Kein Fortschritt ohne Datenanalyse

 Conversion Rate optimieren und steigern

E-Commerce

Conversion Rate Optimierung

Titelbild zum Blog Beitrag Einblicke in die App-Entwicklung

Website & Apps

Einblicke in die App-Entwicklung

Mit wem wir arbeiten

Logo Mobilcom
Logo Happy Dog
Logo GO IN
Logo Thüga
Logo Modellbau Härtle
Kontakt-Avatar

Kontaktieren Sie uns

hello@codeblick.de

Tel.: 0821/567 342 90

Sie erreichen uns von Montag bis Freitag von 09:00 Uhr bis 17:00 Uhr oder nach Absprache.
Wir freuen uns auf Ihren Anruf!

hello@codeblick.de
+49 821 567 342 90
Mo.- Fr. 09:00 bis 17:00 Uhr

  • Lösungen
    • Content & Commerce
    • Shopware
    • Oxid
    • Digital Jetzt
  • Leistungen
    • Beratung & Strategie
    • UX & Design
    • Web-Development
    • Schnittstellen & Anbindungen
  • Referenzen
    • Erfolgsgeschichten
    • Projektverlauf
  • Partner
  • Agentur
  • Blog
  • Karriere
  • Kontakt
  • Contentful
  • Storyblok
  • AGB
  • Datenschutz
  • Impressum
  • Datenschutz

Made with in Augsburg
© 2022 codeblick GmbH. Alle Rechte vorbehalten.