10 Webdesign Trends 2015
Kommentare

Das Jahr neigt sich langsam dem Ende zu, wir haben uns auf die Suche nach den Web-Design Trends für das Jahr 2015 gemacht. Das Ergebnis der Recherche ist ernüchternd, denn zwischen Parallax und Flat Design findet sich wenig neues.

Design-Trends 2015: Wir warten vergeblich auf neue Innovationen

Die Webdesign-Community verwertet lieber alte Trends und gibt ihnen maximal einen neuen Anstrich anstatt eine völlig neue Optik zu konzipieren.

Design-Community innovationsmüde?

Wir werden im nächsten Jahr wohl keine brandneuen Design-Innovationen zu erwarten haben. Diese Ära der Designmüdigkeit hat sich schon vorher angekündigt, betrachte man die neuen Produkte aus dem Haus der Technologie-Riesen: So wurden für das Design des neuen iPhone 6 die Rundungen der ersten iPhone Generation wieder aufgewärmt und auch die Apple Watch erinnert zu stark an ein kleines Smartphone für das Handgelenk und hat uns nicht mit völlig neuen Design-Konzepten vom Hocker gehauen. Hoffen wir also, dass durch die neuen Geräte, Oberflächen, und Formate die Design-Community zu neuen Ideen angeregt wird und es vielleicht doch noch eine Überraschung in 2014 geben wird.

Flat Design wird zu Material Design

Das Flat Design mit seinen klaren Farben und Strukturen wird uns auch im nächsten Jahr weiter erhalten bleiben. Das Design wurde spätestens in der Windows-8-Version von Microsoft eingeführt und später von Apple mit iOS7 aufgegriffen und endgültig salonfähig gemacht. Webdesigner setzen weiterhin auf Minimalismus, mit reduzierten Oberflächen ohne Schattierungen, Material-Imitaten, 3D-Effekte oder Hochglanz. Dabei wird nach wie vor viel Whitespace eingesetzt, der den Grafiken ein fast comicartiges Aussehen verleihen.

Nichtsdestotrotz wird das Flat Design etwas komplexer und wandelt sich, wie Google es nennt, zum „Material Design“. Dieses wird etwas vielschichtiger werden und durch verschiedene Graduierungen und Kombinationen mit anderen Design-Formen, die Flat-Elemente in einen neuen Kontext gesetzt. Außerdem wird der statischen Gestaltung durch Layerings und Animationen ein wenig Leben eingehaucht. Trotz alledem werden aber die Grundprinzipien des Flat Designs beibehalten.

Beispiele: Merlin’s Mustache Lab, <lab21/>

Sceenshot: http://www.ohohohohohohohohohohoh-my-god-lab.com/#

Screenshot: www.ohohohohohohohohohohoh-my-god-lab.com

 

Infinite Scrolling und One-Page-Design

Das Thema Scrolling wird uns auch 2015 beschäftigen. Die Architektur der Websites geht weg vom verschachtelten Seitenaufbau hin zum One Page Design. Mehreren Unterseiten werden damit hinfällig – die User wird es freuen! Scrollen statt klicken – und das manchmal ganz schön weit nach unten, je nach Umfang der Seite.

Durch den neuen Seitenaufbau müssen Webdesigner also neue Wege finden, den Content sinnvoll und übersichtlich zu strukturieren, damit der User auf der Seite nicht den Überblick verliert. Hier wird häufig mit unterschiedlichen Farbabschnitten oder mit kleinen Animationen gearbeitet, die den Besucher wie ein roter Faden durch die Seite leiten. One Page Design und Scrolling-Navigation bedeuten außerdem einen Schritt in Richtung mobile Surfing. Ihre User Experience ist vor allem an mobile Geräte angepasst, bei denen Scrolling einfacher ist, als mit dem Finger Buttons und Links anzuwählen.

Beispiele: World of Swiss, Departement Creatif

Screenshot: http://www.world-of-swiss.com/de

Screenshot: www.world-of-swiss.com/de

Parallax-Scrolling

Das Parallax-Scrolling ist fast schon ein alter Hut, hat uns aber ein neues Scrolling-Erlebnis beschert und wird auch in 2015 vor allem  für die langen One-Page-Seiten verwendet. Auch hier werden wir wohl wenig neues zu sehen bekommen, außer vielleicht mehr Layers oder eine raffiniertere Ausführung ála Swiss. Um diesen Effekt auch Mobile-tauglich zu machen muss definitiv noch an der Ladezeit gearbeitet werden, denn selbst auf Laptop und Desktop-Computer lässt sich das Parallax-Scrolling manchmal nur ruckelig ausführen.

Beispiele: Beauty of Brewing, Akita

Screenshot: http://www.beautyofbrewing.com/

Screenshot: www.beautyofbrewing.com/

Fullscreen-Background Fotos und Videos

Großformatige Bilder haben auch schon in 2014 das Design von Websites maßgeblich geprägt und das wird auch im nächsten Jahr so bleiben. Häufig wird man erst mal von einem Full-Screen-Image willkommen geheißen, das gerne auch mal mit einem Slider kombiniert wird.

Vor allem bei One-Page-Webseiten findet man am oberen Ende der Seite oft ein solches einleitendes Bild oder Full-Screen-Video. Dieser fulminante Auftritt eignet sich hervorragend als Einstimmung auf das Thema oder für Detailaufnahmen von Produkten.

In Zukunft werden uns diese Large-Format Bilder und -Videos häufiger über den Weg laufen. Optimierungswürdig hier ist jedoch mal wieder die große Datenmenge, die beim öffnen der Seite geladen werden muss. Die Herausforderung für Webdesigner wird es also im neuen Jahr sein, die Daten so weit wie möglich zu komprimieren, um sie auch von mobilen Geräten aus schnell laden zu können.

Beispiele: Garrison Footwear, J.Hornig

Screenshot: http://garrisonfootwear.co.uk/

Screenshot: www.garrisonfootwear.co.uk/

Modern Metro

Auch dieses Design wurde spätestens von Microsoft mit Windows 8 eingeführt und wird von Seiten wie Instagram und Pinterest verwendet. Das Metro-Design ist auch jetzt schon allgegenwärtig und scheint auch weiterhin beliebt bei Webdesignern zu sein. Die Kacheln zeigen meistens ein Foto, optional einen kleinen Text und verleiten auf weitere Inhalte der Website. Das Kachel-Design wird uns erhalten bleiben, wird aber in Anordnung und Format immer komplexer und interaktiver werden.

Das Kachel-Design hat vor allem Potential in Kombination mit der personalisierten Website. Da die Kacheln flexibel und austauschbar sind, sind sie sehr gut geeignet für Empfehlungen oder zur Anzeige personalisierter Informationen, wie es auch schon bei Plattformen wie Pinterest der Fall ist. Wir sind gespannt, inwieweit die Webdesigner diese Features im neuen Jahr noch weiter ausbauen werden.

Das Metro-Design zeigt wie auch schon das One-Page-Design deutlich den Trend hin zu den mobilen Endgeräten, denn die flexiblen Kacheln eignen sich sehr gut für Seiten im Responsive Design und können sich in der Anordnung der Bildschirmbreite anpassen.

Beispiele: Akufen, Coffeebeans Delivered

http://www.akufen.ca/en/home/

 Screenshot: www.akufen.ca/en/home/

Individuelle Typographie

Schriften waren schon immer nicht nur funktional, sondern sind maßgeblich verantwortlich für die Ästhetik. Schon jetzt setzen viele Webdesigner auf aussagekräftige Fonts, individuelle Typographien und gehen weg von den standardisierten Schriften. In Zeiten von Google Fonts und anderen Anbietern ist kein riesiges Budget mehr notwendig, um sich die Type Kits zu leisten.

Ob klar oder verschnörkelt, die Schriften können entweder für sich alleine wirken oder mit den großformatigen Fotos kombiniert werden. Gegenargument ist auch hier wieder die lange Ladezeit, vor allem von den Mobile Devices, die durch die individuellen Fonts entstehen kann.

Beispiele: Paul Rand, The New Yorker

http://www.paul-rand.com/

Screenshot: www.paul-rand.com/

Microinteractions und Ghost-Buttons

Diese beiden Trends prägen das Bild der Websites etwas weniger maßgeblich, sie sind aber trotzdem erwähnenswert. Zum einen werden die Ghost Buttons immer beliebter. Diese Form des Buttons fügt sich dezent in den Hintergrund ein, ohne zu aufdringlich zu sein, denn er besteht nur aus der Outline. Der Ghost-Button kommt optisch am besten rüber, implementiert man ihn vor einem Full-Screen Bild oder Video.

Des Weiteren werden wir wohl immer häufiger über die Microinteractions stolpern. Diese Fenster öffnen sich automatisch sobald man auf einer Website landet und sollen die User zu mehr Interaktion mit der Website animieren. Sie fordern zu Umfragen, Kommentaren, Subscribtions auf oder bieten dem User zusätzliche Hinweise und müssen erst geschlossen werden, wenn man zur eigentlichen Website gelangen will. Hier ist fraglich ob diese positiv zur User Experience beitragen werden oder eher beim Browsen stören.

Beispiele: Coffeebeans Delivered, Studio Dot Studio

https://coffeebeansdelivered.com.au/

Screenshot: www.coffeebeansdelivered.com.au/

Personalisierung und Optimierung statt Neuerungen

Das Jahr 2015 steht eher im Zeichen der Optimierung, statt der bahnbrechenden Neuerungen. Die großen Trends der letzten Jahre werden wohl weiterentwickelt und modifiziert und bekommen hier und da ein paar neue Features verpasst. Siehe Flat Design und Material-Design.

Die nächste große Herausforderung für Developer wird es weniger sein, völlig neue Effekte und Trends zu kreieren, sondern viel mehr die alten im Sinne des Responsive Designs zu optimieren. Dazu müssen Oberflächen kreiert werden, die sowohl auf großen und kleinen Screens funktionieren und mit Maus und Finger bedienbar sind. Auch die Datenmengen und Ladezeiten müssen verringert werden, ohne, dass darunter die Optik leidet, denn viele der hier vorgestellten Effekte und Trends brauchen auf dem Smartphone eine ganze Weile, bis sie vollständig geladen und erfahrbar sind.

Auch Personalisierbarkeit wird ein Thema in der Zukunft sein, denn wo Web-Inhalte mittlerweile fast vollständig mit de Alltag der Nutzer verschmolzen sind, will die User-Experience eine individuelle sein. Website werden uns in Zukunft immer mehr individuelle Inhalte vorschlagen, seien es Produkte, Medien oder Informationen. Dies geschieht mit Hilfe von Cookies und anderweitig gesammelte Daten. Vor allem Shop-Seiten und Medienportale, siehe Amazon und Youtube, nutzen diese Funktion schon. Die Seiten wollen dadurch an Relevanz für den Besucher gewinnen.

Aufmacherbild: Scratched advertising via Shutterstock / Urheberrecht: claudio zaccherini

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -