9 innovative Webdesign Trends für 2017

Webdesign muss genau die richtige Balance zwischen Form und Funktion finden. Das macht insofern Sinn, als dass Webdesign Trends sehr durch Technologie beeinflusst werden, sei es durch die Art der Geräte, die wir nutzen, ihre Rechenleistung, wie gut unser Browser ist oder welche Programmierbibliotheken uns zur Verfügung stehen. Aber sie werden auch durch Designgrundsätze und -philosophien beeinflusst.

Die vergangenen Jahre haben uns einige technologische Veränderungen und Fortschritte gebracht, einschließlich:

• die steigende Beliebtheit mobiler Geräte;
• die Einführung von nativem in-Browser 3D Support (via WebGL);
• die Übernahme von HTML5, CSS3 und der Anstieg von Front-End Javascript Frameworks;
• und eine erhöhte Bandbreite (sowohl auf Mobilgeräten als auch zu Hause).

Diese Technologien haben sich zusammengetan, eine große Veränderung der Webdesign-Paradigmen geschaffen und eine vor allem responsive (oder zumindest immer mehr auf Mobilgeräte ausgelegte) Designphilosophie erzeugt.

Auf der ästhetischen Seite war vor 3 Jahren Flat Design vorherrschend. Dann stellte Google Material Design vor, was uns ein wenig vom Abstrakten wegbrachte. 2017 markiert das Jahr, in dem Design einen weiteren Schritt zurück Richtung Realität macht. Ob nun durch Form, Farbwahl oder Funktionalität, 2017 ist das Jahr der Hybride, wo Realität und Technologie aufeinandertreffen, um ein nahtloses Surferlebnis zu erzeugen.

Hier sind die 9 Webdesign Trends, von denen wir glauben, dass sie diese Lücke schließen werden.

1. Menüs, die den Navigations-Paradigmen trotzen

—

Seit dem Mittelalter des Webdesigns (sprich vor 20 Jahren) gab es zwei Standardformen der Navigation: Top und Sidebar. Mit dem Aufkommen von responsivem Webdesign haben wir zusätzlich das Hamburger-Menü auf der Liste. Der Hamburger-Menü ist eine praktikable Lösung für mobiles Design, aber es ist nicht perfekt. Man wirft ihm vor, dass es:

• User Engagement verhindert;
• schwer zu entdecken ist;
• weniger effizient ist (sowohl für Nutzer als auch Design/Development Teams);
• und sogar „nach Nichts riecht.”

Mit diesen eher gemischten, ambivalenten Gefühlen und der weiterhin steigenden Nutzung von mobilen Browsern erwarten wir viele Menü-Experimente im Jahr 2017. Hier sind ein paar Wege, sich gegen den Burger-Trend zu stellen:

Mach dein Menü zu einer kompletten Seite

Nutze überhaupt kein Menü

Man muss Usern nicht mehr sagen, was sie auf einer Website tun sollen; sie wissen, wie man scrollt und werden es von sich aus so lange tun, bis sie finden, wonach sie suchen. Einige Designer entscheiden sich dafür, komplett auf Menüs zu verzichten, und erlauben den Usern, Content organisch zu finden, während sie auf der Seite herumstöbern. Die wachsende Beliebtheit von Smartphones und Tablets eröffnet auch Möglichkeiten für Side-Scrolling.

Lass dich auf den Hamburger ein und mach ihn zur einzigen Navigationsmöglichkeit

Anstatt zwei Menüs zu designen, eines für Desktop und eines für mobile Geräte, entscheiden sich viele Seiten dafür, den Hamburger allgegenwärtig sein zu lassen. Da den Leuten immer mehr bewusst ist, dass diese drei kleinen Linien ein Menü darstellen, gibt es keinen Grund den Platz auf dem Bildschirm mit einer Navigationsleiste zu verschwenden. Natürlich musst  du das echte Hamburger-Icon nicht verwenden. Wir bepbachten auch, wie Designer anfangen, mit Typografie herumzuspielen, um Nutzern zu zeigen, wo sie klicken sollen, um zum Menü zu gelangen.

Lass das Menü aufpoppen

Wir waren so sehr vom “Drop-Down“ Paradigma geblendet, dass wir gar nicht auf eine simple Alternative gekommen sind: Navigation, die aufpoppt! (Oder, wie in diesem Beispiel, in der Mitte des Bildschirms aufpoppt.) Es gibt viele Orte, an denen man ein Menü platzieren kann, die nicht unbedingt oben oder unten sind.

Oder nutze ein Popover

Eine Variante der Popup-Navigation ist das „Popover“, welches die gesamte Seite mit Navigation bedeckt. Es ist auffallend, aber fühlt sich immer noch natürlich an. Es erinnert ein bisschen an Inhaltsverzeichnisse in Büchern.

2. Split Screens
—

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 oder in eine Side-Panel-Navigation umgewandelt werden.

3. Nutze Farbe mit Vintage-Qualität
—

Farben für eine Website zu wählen, ist kompliziert und wird durch viele Faktoren beeinflusst, einschließlich dem vorhandenen Corporate Design, der Branche, der Farbpsychologie und dem persönlichen Geschmack. Egal ob du Blau magst oder dich eher zu Orange hingezogen fühlst, stell dir vor, die Farben, die du wählst, durch einen Instagram-Filter laufen zu lassen, um ein warmes, nostalgisches Gefühl zu erzeugen.

4. Benutzerdefiniertes Scrolling
—

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. Einige Seiten nutzen „virtuelles Scrollen“, was es den Usern immer noch ermöglicht zu scrollen, dies aber direkt in der App, statt dem Browser die Kontrolle zu überlassen. Die ermöglicht verschiedene Arten des Scrollens wie die Seite von Build in Amsterdam, welche um ein horizontales Scrollen herum designt wurde, aber mit einer gewöhnlichen Maus bedient werden kann; hoch und runter zu scrollen verschiebt den Content nach links oder rechts und bringt so das mobile Erlebnis auf den Desktop.

Andere Seiten sind beim Scrollen einen Weg zugunsten des „Klicken-ziehen-entdecken“-Stils bei der Navigation gegangen. Sowohl Grim London als auch Magic in New York geben den Nutzern eine Karte und ermöglichen es ihnen, das Bild zu bewegen, bis sie gefunden haben, wonach sie suchen, wodurch es scheint, als würden sie das Scrollen in die Hände der User legen. Anstatt sich auf traditionelle Navigation zu verlassen, klicken User dann Bilder an, die auf der Karte verteilt sind, um mehr zu erfahren.

Beinahe alle diese Seiten nutzen dabei eine WebGL-Anwendung, um ihren Content zu erzeugen und anzuzeigen. Grim London nutzt eine besonders kreative technische Implementation: eine eigene Map-Engine, welche auf PixiJS (einer Javascript 2D WebGL Engine) aufgesetzt ist.

5. Verschmelzung von Greifbarem und Digitalem
—

Vor drei Jahren wich Flat Design dem Material Design, welches mehr Schatten und Farbverläufe enthält und so die Illusion eines dreidimensionalen Raums auf einem flachen Bildschirm erzeugt. Dieses Jahr gehen wir noch einen Schritt zurück Richtung Realität. Wir kehren aber nicht zum Skeuomorphismus zurück – die physische Welt in digitalen Räumen imitiert. 2017 dreht sich alles darum, die physische, greifbare, fühlbare Welt nahtlos mit der digitalen verschmelzen zu lassen.

Statt fotografische Elemente in bestimmte Rechtecke zu quetschen –  und augenscheinlich ein Fenster von einem Bildschirm in die „reale“ Welt zu erzeugen, – 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 – ein Buch könnte so groß wie ein LKW sein – und sie können mit digitalen Elementen interagieren. Sieh dir die Seite von Beoplay an: Sie stellt die Kopfhörer überlebensgroß dar und erlaubt es ihnen dann, mit animierten, digitalen Linien, welche Sound erzeugen, zu spielen.

Physische Objekte in einen digitalen Raum zu integrieren, verwischt die Grenze zwischen dem, was auf unseren Bildschirmen und dem, was in unserer Welt ist. Dadurch baut sich eine emotionale Verbindung zu den Bildern auf unseren Geräten auf.

6. Dezente Animationen und Mikrointeraktionen
—

Bewegung zieht unsere Aufmerksamkeit auf sich – das ist das Ergebnis menschlicher Evolution. Speziell große, plötzliche Bewegungen können uns vor Gefahr warnen. Kleine, flüssige Bewegung hingegen signalisiert Leben. Behalte das im Hinterkopf, da du Bewegung in dein Webdesign bringen willst.  Etwas Großes und Auffälliges könnte erdrückend sein und den Betrachter ablenken, aber etwas Dezentes könnte deinem Design ein organisches Gefühl verleihen.

Jahrelang haben wir Animationen gesehen, die User für eine bestimmte Handlung „belohnen“ sollten. Beispielsweise bewegt sich etwas, wenn man mit der Maus darüber fährt oder anklickt. Seit Kurzem allerdings sehen wir dezente Animationen, die als Designelement in die Seiten integriert sind und benutzt werden, um die Aufmerksamkeit des Users zu erregen. Insbesondere haben wir viele Waypoints gesehen, welche es bestimmten Ereignissen ermöglichen, etwas auszulösen, wenn ein User eine Seite herunterscrollt, was bedeutet, dass wir die Menschen dazu bringen können, genau da hinzuschauen, wo wir sie hinschauen lassen wollen.

Ob sie nun mit Javascript oder CSS implementiert sind, Mikrointeraktionen erfüllen nicht nur einen UX-Zweck, sondern geben einer Seite auch eine Persönlichkeit

7. Aufgabe des Seitenverhältnisses zugunsten von Art Direction
—

Etwas Kleines und Breites wird großartig auf einem Retina Cinema Bildschirm aussehen, aber vollkommen deplatziert auf einem hochkant gehaltenen Smartphone. Komposition ist eines der grundlegenden Elemente von Design. Wie also willst du ein responsives Universum, in dem Content auf Bildschirmen und Browsern dargestellt wird, mit einer unendlichen Kombination von Seitenverhältnissen zusammenbringen? Du musst es beschneiden. Aber wie stellst du es so an, dass die Integrität des Designs unangetastet bleibt? Willkommen in der Welt der Digital Art Direction.

In jüngster Zeit haben wir eine Reihe von Tools auftauchen sehen, die es uns ermöglichen, Kompositionen bewusst und intelligent zu kontrollieren, während man den traditionellen Fehlern des automatischen Beschnitts aus dem Weg geht. Das führt zu einem Umdenken; statt Content als statisches Bild zu betrachten, sollten wir es als Material betrachten. Welche Geschichte willst du mit deinen Bildern erzählen? Mach es deutlich und gib den Usern dann die Kontrolle über den Bildschirm.

Einige Websites haben entschlossen, das Seitenverhältnis komplett zu ignorieren und geben dem Betrachter die Kontrolle über die Komposition. The Hidden World of the National Parks verwendet ein Vollbild-Video – welches auch der Hauptinhalt ihrer Seite ist – das sich über die gesamte Breite des Browsers erstreckt, egal in welcher Form.

8. Filmische Erlebnisse
—

Große Videohintergründe wurden 2015 zum Trend. Aber sie sind noch beliebter geworden, seit sich die Technik weiterentwickelt hat und schnellere Ladezeiten für Videos ermöglicht. Fortschritte in WebGL haben es diesen Hintergründen auch ermöglicht, interaktiv zu werden und umfassende filmische Erlebnisse im Web zu erzeugen.

Auf der anderen Seite wurden diese filmischen Erlebnisse zurückgefahren mit kleinen Videoelementen, die genutzt werden, um einer Seite Leben einzuhauchen und Betrachter auf eine subtilere Art anzusprechen.

9. Gamification
—

Gamification bezeichnet „ die Anwendung spiel­typischer Elemente in einem spielfremden Kontext“, mit dem Ziel, das User Engagement zu erhöhen. Mit anderen Worten: Willst du, dass die Leute sich an deine Seite erinnern? Sie tiefer ergründen? Sorg dafür, dass sie ihnen Spaß macht!

Ein großartiges Beispiel für Gamification ist die WebGL-basierte Seite für den Film Swiss Army Man. Die 3D-Elemente auf dieser Seite sind nicht einfach nur irgendwelche coolen Effekte. Du bekommst eine Figur zur Verfügung gestellt und kannst diese durch einen Raum, in dem es Schwerkraft und physikalische Effekte gibt (einschließlich Strömungstechnik), werfen. (Du kannst auch andere, eher schwachköpfige Dinge tun lassen, wenn du darauf stehst.)

Anderer Websites nutzen Gamification, um ihren Usern neue Sprachen oder etwas über die Geschichte der Raumfahrt beizubringen.

2017 verspricht ein aufregendes Jahr in Sachen Webdesign zu werden, da digitale Design Trends wesentlich fühlbarer werden.