Webdesign-Trends 2017

Die Entwicklungen im Webdesign stehen nie still - daher haben wir den Jahreswechsel genutzt, um über die Webdesign- und -development-Trends 2017 nachzudenken. Wir möchten mit diesem Beitrag übrigens auf die zahlreichen Anfragen von Lesern dieses Blogs reagieren, die uns darum gebeten haben, einen Artikel zum Thema »Webdesign-Trends 2017« zu veröffentlichen. Wir danken euch sehr für den Besuch unserer Website im vergangen Jahr, euer Feedback und eure Anregungen, und wünschen euch ein großartiges Jahr 2017!

kulturbanause-Seminare in Berlin!

Unsere Termine im März/April:
CSS – The Next Level, WordPress, SVG, Prototyping, Responsive Design für Konzepter, HTML & CSS, Muse …

Jetzt Tickets sichern!

Wie Webdesign-Trends entstehen

Trends im Webdesign sind immer eine Mischung aus Trends in den Bereichen Design, Technologie und Workflow bzw. Marketing. Meistens beeinflussen die technischen Möglichkeiten (z. B. neue CSS-Eigenschaften) auch stark die visuellen Trends. Vor Jahren waren beispielsweise abgerundete Ecken plötzlich beliebt, weil die CSS-Eigenschaft für border-radius neu war. Webdesigner, die diese neue Technologie einsetzten, erschufen ein damals modernes Layout und lösten den Trend somit aus. Auf diesen Zug sprangen andere Designer auf - kurz danach sah man überall abgerundete Ecken und das Feature war »Mainstream«. Eine ähnliche Entwicklung gab es in den letzten Jahren beispielsweise auch beim Parallax-Effekt. Der Webdesign-Trend ist auf seinem Höhepunkt angekommen, wenn Profis sich am Effekt bereits satt gesehen haben, Kunden aber unbedingt genau diesen Stil wünschen. Wenn der Trend seinen Zenit überschritten hat, erfolgt häufig ein krasser Gegentrend. Der Skeomorphismus wurde vom Flat Design abgelöst, abgerundete Ecken vom Metro UI usw.

Abgesehen von den technischen Möglichkeiten beeinflussen auch Veränderungen im Workflow das Erscheinungsbild von Websites. Auch diesen Effekt bekommen wir in den letzten Jahren teils »schmerzhaft« vor Augen geführt. Der schleichende Wechsel von Designern zu Frontend-Developern sowie der massive Einsatz von Themes, Bibliotheken und Frameworks führt zu einem Einheitslook im Web, der nicht nur von Design-Kollegen sondern auch von Kunden zunehmend kritisiert wird.

Der Webdesign-Einheitslook im Jahr 2016

Der Einheitslook der Jahre 2015 und 2016 wird meiner Ansicht nach vor allem dadurch ausgelöst, dass klassische Webdesigner aus dem Workflow verdrängt wurden und Frontend-Developer das Feld übernommen haben. Der Frontend-Developer hat gegenüber dem klassischen Webdesigner den Vorteil, dass er nicht nur ein Gespür für Ästhetik hat, sondern auch in der Lage ist, seine Ideen technisch mit HTML, CSS und JavaScript umzusetzen. Allerdings hat er auch Defizite: Meiner Erfahrung nach ist der Frontendler immer eher ein Techniker als ein Designer. Er kann zwar sehr gekonnt Farben, Iconsets, Grids und Inhalte zu einem visuell ansprechenden Ergebnis kombinieren, doch er entwickelt nur selten Farbset, Icons, Illustrationen oder Gestaltungsraster selbst. Um es an einem Beispiel festzumachen: Der Designer zeichnet ein neues Icon-Set; der Frontend-Developer nutzt eher fertige Icons in Form einer Icon-Bibliothek. Diese Veränderung im Workflow wird letztendlich im Layout sichtbar.

Soweit ein paar einleitende Worte zum Thema Webdesign-Trends ganz allgemein. In diesem Beitrag versuchen wir zu erahnen, was in diesem Jahr Trend im Webdesign werden wird.

»Nearly« Flat Design

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. Insbesondere im E-Commerce ist die Conversion Rate zahlreicher Websites nach dem Relaunch im Flat Look in den Keller gerauscht. Aus diesem Grund wurde bereits vor über zwei Jahren über »Nearly Flat« oder »Flat 2.0« berichtet. Hierbei ist von einer Weiterentwicklung des Flat Designs die Rede, bei dem zwar nach wie vor im Flat Look gearbeitet wird, aber wieder Schatten und Verläufe eingesetzt werden um Interaktionen zu kennzeichnen. Google hat mit dem Material Design ein Paradebeispiel für »Nearly Flat« geliefert.

Ich glaube, dass Websites 2017 wieder etwas plastischer werden, ohne dass wir dabei in das Zeitalter des Skeomophismus zurückfallen.

Nearly Flat Design, Animation und ein modernes Farbkonzept – stripe.com/radar

 

Illustrationen & mehrfarbige Icons

Einfarbig überlagerte Stock Images, monochrome Icons und Illustrationen im Flat Look haben maßgeblich zum Einheitslook der letzten Jahre beigetragen. 2017 wird es wieder individueller. Wir werden mehr Illustrationen sehen, die einen charakteristischen Stil haben. Auch Icons werden wieder mehrfarbig, ohne dass der flächige Look verloren geht.

Modernes Webdesign und charakteristisches Design – mojobar.co.uk

Animationen

Illustrationen können dank SVG-Technologie unkompliziert animiert werden. Das werden wir 2017 verstärkt zu sehen bekommen. Ob animierte Hintergründe, Interaktionen bei Icons, Infografiken oder illustratives Schmuckelement. Animierte Illustrationen werden in qualitativ hochwertigen Projekten stark zunehmen.

Übrigens: Der Ammonit ist das Key-Visual von kulturbanause, da er den perfekten goldenen Schnitt in der Natur widerspiegelt und somit stellvertretend für gutes Design steht. Firefox-User hier her.

Im Detailbereich werden sog. Mikroanimationen zunehmen und 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.

Mikroanimation bei der Formulareingabe

Videos

Ob als animierter Hintergrund für den Header einer Website oder informativ eingesetzt im Inhaltsbereich: Videos werden großen Einfluss auf die Gestaltung haben.

Viel Bewegtbild bei conference.awwwards.com

 

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: Im Skeomorphismus wurden Verläufe inflationär eingesetzt um Plastizität zu erzeugen. Im Flat Design waren sie verboten. Nun sind sie wieder da und sorgen für Leuchteffekte und subtile Plastizität.

Organische Formen, kräftige Farben und Verläufe bei 2016.cssconf.com

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.

Comic-Layout mit CSS Grids: http://codepen.io/tutsplus/pen/pNgZpj

Performance

Der Stellenwert von Performance hat in den letzten Jahren stetig zugenommen. Geschwindigkeit wird heute von vielem Agenturen als Design-Aspekt begriffen und es ist bekannt, dass eine Performance-Optimierung am Ende des Projekts nur begrenzt funktioniert. Der Trend hin zu Websites, bei denen die Performance als wesentliches Element des Workflows verstanden wurde, wird sich auch 2017 fortsetzen. Wir werden daher sehen, dass Designer ihre gestalterischen Entscheidungen auch auf Grundlage von Performance-Werten treffen.

Modulare Denkweise

Im Responsive Design wird das Layout u. a. mit Hilfe von Media Queries angepasst. Das Problem an Media Queries ist, dass sie auf die Größe des Viewports reagieren. Besser wäre es, wenn Breakpoints nicht in Abhängigkeit zur Viewportgröße gesetzt würden, sondern in Abhängigkeit vom Platz, den die jeweilige Komponente zur Verfügung hat. Die sog. »Element Queries« sind ein Ansatz in diese Richtung, der aktuell mittels JavaScript implementiert werden muss. Wichtiger als die technische Umsetzung von Element Queries ist mir jedoch die Denkweise in Komponenten. Designer haben lange Zeit in Geräteklassen und Seitentypen gedacht. Langsam etabliert sich auch in der Design-Szene ein modularer Ansatz.

Größere Webdesign-Projekte werden häufig in Frontend Styleguides dokumentiert, die alle Komponenten der Website mit Text, Demo und Code-Snippet beschreiben. Der Aufbau eines solchen Styleguides ähnelt stark der Dokumentation eines Frameworks wie Bootstrap.

Salesforce-Styleguide – lightningdesignsystem.com

Wir haben bereits im letzten Jahr bemerkt, dass Kunden verstärkt nach modularen Ansätzen wie Atomic Design fragen und von sich aus die Dokumentation der Website in Form eines Frontend-Styleguides wünschen. Dieser Trend wird sich 2017 voraussichtlich spürbar verstärken.

Content und Design im Einklang

Inhalte von Websites werden immer wichtiger und das Layout hat die Aufgabe diese Inhalte bestmöglich zu vermitteln. Inhalte und Layout werden daher immer häufiger gemeinsam entwickelt um das bestmögliche Ergebnis zu erreichen. Ob Storytelling mit Hilfe von Web-Animationen oder Online-Comic dank CSS Grids. Wir werden hier voraussichtlich sehr interessante Projekte sehen.

Moderne Farben, eine individuelle Grafik, sauber gesetzte Typo … riiotlabs.com

Negativ Trends

In den letzten Jahren hat die Qualität von Layouts im Bereich der Usability teils dramatisch abgenommen. Viele gestalterische Trends sehen zwar modern aus, erzeugen aber messbar schlechtere Produkte. Schlanke Schriften oder Icons die nur noch aus dünnen Outlines bestehen sehen beispielsweise modern aus, sind für Menschen mit Sehschwäche aber schlecht erkennbar. Eine Hauptnavigation die am Desktop hinter einem Hamburger-Icon versteckt wird erzeugt zwar ein aufgeräumtes Layout im »Mobile First Look«, erschwert aber möglicherweise die Übersicht und reduziert die Klicks auf weitere Unterseiten.

Ich würde mir für 2017 wünschen, dass Designer wieder mehr über ein Stilmittel nachdenken bevor sie es verwenden.

Beispiel von zu geringem Kontrast
Der Kontrast zwischen Text und Hintergrundfarbe ist zu gering. Das Ergebnis ist ein »Fail« entsprechend der Web Content Accessibility Guidelines