Webdesign Trends 2016 / 2017
Juli 14, 2017
0

Webdesign Trends werden sehr stark durch Technologie, aber auch durch Designgrundsätze und -Philosophien beeinflusst. Meistens beeinflussen die technischen Möglichkeiten (z. B. neue CSS-Eigenschaften) stark die visuellen Trends. Vor Jahren waren beispielsweise abgerundete Ecken plötzlich beliebt, weil die CSS-Eigenschaft für border-radius neu war. Eine ähnliche Entwicklung gab es in den letzten Jahren beispielsweise auch beim Parallax-Effekt.

Das Jahr 2016 wurde von vielen Trends geprägt, besonders im Bereich UI-Pattern, Animationen, Interaktionen und Responsive-Design. Die Highlights im Überblick:

  • Das Hamburger-Menü war lange umstritten, da es nicht eindeutig erkennbar sei, zu modern, zu aufwändig. Doch am Ende hat es sich durchgesetzt und wurde vom Fremdelement zu einem der einprägsamsten Icons.
  • Hero-Images dominieren das Web. Der Header bietet durch das minimierte Menü mehr Platz und generell sind viele Websites minimalistischer und strukturierter geworden.
  • Card-Designs sind heute überall im Web zu finden, da sie Informationen in kleinen Häppchen aufbereiten, welche sich leicht scannen lassen. Jede Card steht für ein einheitliches Konzept und ihre rechteckige Form macht es einfach, sie auf verschiedenen Breakpoints anzuordnen.
  • Beim Flat Design wird auf eine realistische Darstellung von Texturen, Verzierungen, Schlagschatten und dreidimensionalen Elementen verzichtet und der Ansatz „weniger ist mehr“ verfolgt. Im Fokus steht die Reduktion der Gestaltung auf das Wesentliche.

 

Trends 2017


Flat 2.0

Der Flat Design-Trend der letzten Jahre hat bewiesen, dass Flat Design zwar schön anzusehen ist, aber sehr schnell langweilig wird und zu Usability-Problemen führen kann, da der Anwender aufgrund fehlender Plastizität nicht mehr erkennt was angeklickt werden soll. Wir können davon ausgehen, dass wir im Jahr 2017 wieder mehr Tiefe im Webdesign zu sehen bekommen und einen Schritt zurück in Richtung der Realität gehen.

Statt fotografische Elemente in bestimmte Rechtecke zu quetschen, werden Objekte aus ihrer Umgebung genommen und in komplett digitale Landschaften gesetzt. Man lässt ihnen ihr Licht und ihre Schatten und damit ihr dreidimensionales Wesen, aber sie müssen auch nicht mehr nach den Regeln der Realität spielen. Objekte müssen keine realistischen Größen haben und sie können mit digitalen Elementen interagieren.

 

Flat 2.0 Design
Flat 2.0 Design

Videos

Videos werden technisch besser und schneller als bisher. Mit mehr Dynamik ergreifen sie die Aufmerksamkeit der Benutzer und helfen, Kernbotschaften der Unternehmen besser zu transportieren. Sie werden ein wichtiges Element zur Content-Übertragung.

 

Storytelling

Storytelling (Scroll)
Storytelling (Scroll)

Wir sehen einen klaren Trend, bei dem Seiten auf die traditionelle Browser-Scrollbar verzichten und stattdessen eine eigene maßgeschneiderte Lösung für ihren Content erstellen. In der Theorie ist es ein absolut benutzerfreundliches Handling, denn durch Apps sind wir langes Scrollen gewöhnt und müssen keine Seite verlassen, um zu gewünschten Informationen zu gelangen. Es ermöglicht verschiedene Arten des Scrollens wie zum Beispiel ein horizontales Scrollen, hoch und runter zu scrollen verschiebt den Content nach links oder rechts und bringt so das mobile Erlebnis auf den Desktop. Die gängigen Grid-Systeme werden gebrochen und ermöglichen so einzigartige Parallax-Ergebnisse. Content wird auf eine ganz andere Art ausgegeben.

 

 

 

 

Illustrationen

Bisher ist das Web voll mit Hero-Images, leider allzu oft mit schlechten Stock-Images. In Zukunft können wir mit deutlich weniger Bildern dieser Sorte rechnen, denn kundenspezifische Illustrationen rücken mehr in den Fokus. Diese bieten ein Gefühl von Persönlichkeit und Authentizität, was mit Fotografien nur schwer zu erzeugen ist.

 

Illustration
Illustration

 

Mehr Interaktionen und Animationen

Menü Animation
Menü Animation

Interaktionen, vor allem die Mikro-Interaktionen, spielen heute eine wichtige Rolle im UI- und UX-Design. Diese Interaktionen sind nicht nur klein und unterhaltsam, sondern sie visualisieren dem Benutzer viel mehr ein Feedback. Im Detailbereich werden sie starken Einfluss auf die Gestaltung von Formularfeldern, Buttons, Navigationsleisten und anderen interaktiven Elementen nehmen. Das Ziel von Mikroanimationen besteht darin, durch dezente Effekte die Benutzerfreundlichkeit und die User Experience zu erhöhen.

Es werden aber auch immer öfter dezente Animationen verwendet, welche als Designelement in die Seiten integriert sind und benutzt werden um die Aufmerksamkeit des Users zu erregen. Zum Beispiel bei Waypoints, welche einen Effekt auslösen, wenn ein User eine Seite nach unten scrollt.

 

Buntere Farben und Verläufe

Die Farben der letzten Jahre waren bunt aber gebrochen. Nun wird es wieder gesättigter, ohne dass wir in den Neon-Look des Web 2.0-Zeitalters zurückfallen. Auch Verläufe sind wieder wichtig um Plastizität zu erzeugen. Im Flat Design waren sie verboten doch nun sind sie wieder da und sorgen für Leuchteffekte und subtile Plastizität.

 

CSS Grids

Die CSS Grids-Layout-Technik wird 2017 einen praxistauglichen Browser-Support erreichen und wir werden zunehmend Layouts sehen, die auf diesem Layoutmodell basieren. Mit CSS Grids ist eine verschachtelte, abstrakte und komplexe Website-Architektur möglich – wir dürfen uns also auf individuellere Layouts freuen.

 

Split Screens

Split Screen
Split Screen

Eine vertikale Aufteilung des Bildschirms in zwei gleich große Teile, mit klar zu erkennender Trennung, ist etwas, von dem wir erwarten, es 2017 wesentlich mehr zu sehen. Dies ist ein visuell extrem auffallender Trend, der an ein offenes Buch erinnert und der Seite ein natürliches Feeling verleiht. Der Trend ist ebenfalls ziemlich vielseitig; auf kleineren Bildschirmen/Geräten können die zwei Teile zu aufeinanderfolgenden Blöcken gestapelt werden.

 

 

 

Fazit für Onlineshops

Auch im Bezug auf dem E-Commerce-Bereich sehen wir vor allem positive Veränderungen durch die Design-Trends. Da mit dem Flat 2.0 Design wieder mehr Tiefe in die Webseite gebracht wird und die User dadurch schneller erkennen, was angeklickt werden soll, wird die Usability hingehend zum Produkt und dessen Kauf stark erhöht. Außerdem kommen auch die neuen Mikro-Interaktionsmöglichkeiten der Benutzerfreundlichkeit zu Gute, da die Kunden durch ein dynamisches Feedback beispielsweise im Login- oder Bestellprozess die Formulare besser erfassen können. Zudem werden durch Animationen, wie bei dem gezeigten Menü, Prozesse klarer dargestellt und einfacher verstanden.

Durch die optimierten Darstellungen von Videos lassen sich Produkte nun noch einfacher dynamische in Szene setzen und auch durch die trendigen Illustrationen können individuelle Blickfänger gestaltet werden, die definitiv eine gute Alternative zu den oft langweiligen Stockfotos bieten.

Alles in allem hält der aktuelle Webdesign Trend einige Optimierungen und Vorteile für den E-Commerce-Bereich bereit und lässt viel kreativen Spielraum und einen großen Hang Richtung Individualität offen. Gehen Sie also mit dem Trend und lassen Sie sich Ihre Webseite individuell gestalten!

Avatar for Annkathrin Seefeldt

Annkathrin Seefeldt

Mediengestalterin bei omeco GmbH
Annkathrin ist gelernte Mediengestalterin und beschäftigt sich derzeit intensiv mit der Kreation und der Umsetzung von Onlineshop-Designs auf Basis der Onlineshop Software von MONDO MEDIA.
Avatar for Annkathrin Seefeldt

Letzte Artikel von Annkathrin Seefeldt (Alle anzeigen)

Schreibe einen Kommentar