Die 10 wichtigsten WebDesign Trends für 2016

Ausblick auf das Jahr 2016

Das Web entwickelt sich ständig weiter. Neben dem technischen Fortschritt spielen dabei auch ein geändertes Nutzerverhalten – mehr mobile! - aber auch sich ändernde Sehgewohnheiten eine entscheidende Rolle. Dabei bilden sich immer wieder Trends heraus. Nur wenige aber halten sich dauerhaft. Viele verschwinden schon nach wenigen Monaten wieder oder überleben nur in einer Nische.

Ich wage ausgehend von den Trends der letzten Monate und Jahre einen Ausblick auf das Jahr 2016 und versuche aktuelle Entwicklungen einzuordnen und zu bewerten.

1. Onepager

Bei einem Onepager findet der Besucher alle wesentlichen Informationen direkt auf der Startseite der Website. Ende 2011 kam dieser neue Seitentyp in Deutschland an und wird seit dem stetig beliebter. Dieser WebDesign Trend hängt eng damit zusammen, dass immer mehr Menschen mobil surfen, denn auf dem Smartphone ist Scrollen angenehmer als zielgenaues klicken bzw. tappen.

Wenn man es übertreibt, dann hat der Onepager aber auch seine Schattenseiten: Das infinite scrolling macht bei facebook noch Sinn, ist aber nicht für alle Seitentypen geeignet. Gerade bei Unternehmensseiten, bei denen es nicht nur um zwei-drei Produkte oder Dienstleistungen geht, stößt der Onepager schnell an seine Grenzen.

Ich denke daher, dass der Onepager Trend zwar noch ein wenig Luft nach oben hat, aber nicht mehr so stark wie bisher wachsen wird. Ansätze zu dieser Einschätzung finden sich bei Google Trends.

2. Storytelling

Einer der heißen Trends in allen Bereichen des Online Marketings ist das Storytelling. In der Theorie fängt man den User mit einer spannenden Geschichte ein und bringt ihm so das Unternehmen oder Produkte und Dienstleistungen anschaulich näher.

Letztlich hat man im Marketing schon immer mit User Stories gearbeitet, um gerade erklärungswürdige oder abstrakte Produkte und Dienstleistungen greifbarer zu machen. Dabei geht es vor allen Dingen um den Kundennutzen und die Emotionalisierung.

In der Praxis bewegt man sich aber auf einem schmalen Grat, denn wenn das Storytelling zu langatmig wird oder die Produktmerkmale zugunsten der Story zu sehr in den Hintergrund rücken, dann kippt das Ganze und der User ist nur noch genervt, weil er keine konkreten Informationen bekommt oder sich dafür zu lange mit der Story beschäftigen muss.

Wenn der User die Geschichte nicht einfach nur erzählt bekommt, sondern sich aufgrund von Useraktionen wie Scrollen oder Klicken die Geschichte vorangetrieben wird, dann spricht man von interactive storytelling. In den USA wird das schon seit Jahren gemacht – ein paar Beispiele findet man bei t3n und den webkrauts. In Deutschland wird das zur Zeit nur von Zeitungen als neues Format für Webreportagen verwendet; meist jedoch recht sperrig umgesetzt. Beispiele finden sich auf www.onlinefeature.de und bei stift-und-blog.de.

3. Kundenzentriertes Design & Inhalte

Beim Customer-Centric Web Design geht es darum, den Kunden auf seiner Customer Journey zu begleiten und zu führen. Ein einfaches Beispiel: Statt einer herkömmlichen Produktnavigation (Bohrmaschine) kann man eine problemorientierte Navigation (Loch bohren) oder eine Branchennavigation (Handwerker, Arzt, Landwirt) einsetzen.

So langsam setzt sich bei immer mehr Unternehmen die Erkenntnis durch, dass gerade im b2c der Kunde im Mittelpunkt der Seite stehen sollte. Die Schar derer, die weiterhin egozentrische Wir-Botschaften verbeiten wird glücklicherweise kleiner.

Je mehr die Informationsflut anwächst, umso wichtiger wird es, den Nutzen für den Kunden in den Vordergrund zu stellen, damit er vom Kunden sofort in den ersten Sekunden wahrgenommen werden kann. Deshalb wird die Bedeutung des kundenzentrierten Webdesign weiter zunehmen.

4. Typografie & Icons

Seit 2010 gibt es die Google Web Fonts und später kamen die Adobe Edge Web Fonts hinzu. Seit dem ist man bei der Auswahl der Schriftart für eine Website nicht mehr nur auf eine Hand voll System-Schriftarten begrenzt und kann einen Webfont wählen, der der Hausschrift möglichst nahe kommt. Zudem müssen ausgefallene Überschriften oder Menüs jetzt nicht mehr als Grafik eingebunden werden.

In den USA und UK sieht man seit Jahren schon Websites, die Typografie als Stilmittel sehr kreativ einsetzen. Deutschland ist in diesem Bereich leider noch sehr konservativ. Ich erwarte aber, dass dies weiter aufbricht und wir in Zukunft mehr typografie-lastige Designs sehen werden.

Icon-Fonts

Auch die Icon-Fonts gehören zu diesem Trend dazu, allen voran Font-Awesome, Schaut man sich den weltweiten Google-Trend an, so zeigt die Kurve steil nach oben – während Deutschland gerade erst die Icon-Fonts entdeckt.

Mit Plugins wie dem TinyMCE-FontAwesome-Plugin wird es für Online-Redakteure zunehmend einfacher, schicke Icons in Textelementen zu verwenden. Zudem sind die Icon-Fonts ein wichtiges Design-Element für das Flat- und semi-flat Desgin.

5. semi-flat Design

Beim Flat-Design geht es darum, die grafische Gestaltung einer Website oder Benutzeroberfläche stark zu reduzieren. Oft werden nur einfarbige Flächen als Hintergründe verwendet.

Der Große Vorteil des Flat Design besteht darin, dass es eine starke Klarheit ausstrahlt und sehr übersichtlich ist. Allerdings mit dem ebenso großen Nachteil, dass das Design schnell austauschbar und gelegentlich langweilig und unkreativ wirkt. Bei vielen Seiten könnte man noch nicht einmal die Branche erkennen, wenn man das Logo wegließe und den Text unleserlich machen würde.

Dank CSS3 entwickelt sich das Flat Design weiter. Boxen können nun einfach einen sanften Hintergrundverlauf, (ungleiche) runde Ecken, einen Schatten oder eine ausgefallene Geometrie bekommen. Das öffnet den Raum für mehr gestalterische Kreativität – ohne dass der Grundgedanke das Flat Design verloren ging.

Dieses neue semi-flat Design sieht man seit ein-zwei Jahren immer öfter. Dennoch stelle ich immer wieder fest, dass viele deutsche Designer (und auch WebEntwickler) diese neuen Techniken von CSS3 noch gar nicht richtig auf dem Schirm haben. Hier sehe ich noch großes Wachstumspotential.

6. Parallax-Scrolling

Kennen Sie dieser Webseiten wo sich beim Scrolling nicht alle Seitenelemente gleich bewegen? Der Hintergrund bewegt sich langsamer oder es fliegen Elemente von Links und Rechts ins Bild hinein? Das fasst man im allgemeinen unter dem Begriff Parallax Scrolling zusammen.

Der Parallax-Effekt galt 2014 als heißer Design Trend. Mittlerweile ist etwas Ernüchterung eingetreten, denn ein Nachteil ist eine hohe Ladezeit, die vor allen Dingen bei der mobilen Darstellungen große Nachteile bringt. Zudem kann eine Seite durch den Parallax-Effekt auch sperrig wirken und schlecht umgesetzt leidet die Usability massiv.

Dennoch sehe ich Chancen für ein Revival des Parallax- und anderer Animationseffekte. Und zwar in Verknüpfung mit dem Trend zum Storytelling. Denn dort sind diese Effekte nicht nur schicke Spielereien im Hintergrund, sondern unterstützen aktiv den Content und sind Teil der erzählten Geschichte.

7. Megamenu

Fährt man bei einer herkömmlichen Seitennavigation mit der Maus über einen Navigationspunkt, dann öffnet sich eine schmale Unternavigation und man sieht die direkten Unterpunkte. Beim Megamenü klappt dagegen eine Unternavigation auf, die über die gesamte Content-Breite geht und nicht nur die nächst tiefere Navigationsebene zeigt, sondern gleich auch noch die darunter liegende Unternavigation. So kann man mit nur einem Klick direkt tief in den Shop eintauchen.

Ein paar Onlineshops und große Websites setzen das Megamenü schon ein, denn es hat sich in der Praxis sehr gut bewährt. Wir werden es also in Zukunft häuiger sehen. Wer für 2016 den (Re)Launch einer komplexen Website mit einer tiefen Seitenstruktur plant, sollte über den Einsatz eines Megamenüs nachdenken,

8. Hochwertige Fotos

Auch als Gegentrend zum Flat Design sind zur Zeit hochwertige Fotos angesagt. Konnte man diese früher nur teuer über eine Stockagentur ankaufen oder noch teuerer selbst produzieren, so gibt es jetzt mit unsplash, picjumbo, pixabay und Co. einige Bildquellen im Netz, die professionelle Fotos in hoher Auflösung kostenlos zur freien Verwendung anbieten.

Die Sache hat allerdings einen Haken: Im Moment stürzt sich jeder auf diese Fotos und man sieht sie immer öfter auf allen möglichen Websites. Vor allen Dingen unter Bloggern und Content Marketing Fans sind die kostenlosen Fotos beliebt. Dadurch nutzen sich die Bilder ab und die Seiten verlieren an Individualität und Wiedererkennungswert, Aber der Masse der Blogger und Leser wird das weiterhin egal sein.

Wer jedoch in Zukunft aus der Masse herausstechen will, der sollte auf authentische und persönliche Fotos setzen.

9. Hintergrundvideos, Vine und Cinemagraphs

Im Moment sieht man noch recht selten Videos anstatt eines Sliders als eröffnendes Element auf der Startseite einer Website. Erste Seiten experimentieren schon mit seitenfüllende HTML5-Hintergrund-Videos, die aber meistens als eigentständiges Inhaltselement dienen und nicht so sehr der Gestaltung.

Mit Vine sind zur Zeit aber kurze Videos mit einer Länge von 7 Sekunden in und die animierten Gifs, "Cinemagraphs" genannt, sind sehr beliebt auf Facebook und Twitter. Da ist es nur noch eine Frage der Zeit, bis diese Videokunst Einzug in das Webdesign hält.

Gerade die Cinemagraphs würden sich aufgrund der meist ruhigen und begrenzten Bewegung für die unterstützende Gestaltung und Belebung von Websites eignen. Außerdem lassen sich Ultra-Kurzvideos und Cinemagraphs gut im Rahmen des Storytelling einsetzen.

Bewegte Inhalte eigenen sich dennoch nicht für jede Website. Deshalb wird sich der Video-Trend eher in einer kleinen Nische etablieren.

10. Responsive WebDesign

63,4 Prozent der 1.000 größten Onlineshops in Deutschland verfügen 2015 über eine mobile Webseite oder Shopping App. Das ist ein Zuwachs von 17,8 Prozent gegenüber dem Vorjahr. Aber immer noch recht wenig. (Q: Statista / EHI)

Für kleine und mittlere Onlineshops liegt die Quote sicherlich deutlich niedriger. Und das, obwohl mobile Shopping in ist. Die deutsche eCommerce-Branche hat hier also noch gewaltigen Nachholbedarf.

Und auch bei den reinen Unternehmens-Websites sieht es nicht besser aus. Im April 2015 sorgte Google mit der Verkündung für großes Aufsehen, dass die mobile-friendliness nun auch ein Rankingsignal für die mobile Suche ist, doch die Unternehmen tun sich weiterhin schwer damit, Ihre Website den neuen Anforderungen anzupassen.

Doch eine deutliche Veränderung ist seit dem spürbar: Es gibt kaum noch neue Websites, die nicht responsiv sind. Das heißt: Responsives WebDesign ist vom optionalen Feature zu einer Grundanforderung an eine neue Website geworden.

Fazit

Auch wenn ich nicht jede meiner Voraussagen mit belastbaren Daten und Fakten belegen kann, so befinde ich mich mit meinen Progrnosen in doch guter Gesellschaft. So ergibt sich eine deutliche Schnittmenge mit den WebDesign Trend Voraussagen von z.B. grayboxpdx.com und onlinemarketing.de.

Einen guten Überblick über weitere 10 Prognosen findet man auf zeta-producer.com.