Webdesign-Trends 2014
mario.antunovic.uni-linz, 24. Dezember 2013, 01:27
Das erste was ein User auf einer Website sieht, ist das Design der Seite. Nachdem wir uns nicht mehr am Anfang der 90er Jahre befinden und sich schon einiges getan hat im Bereich des Webdesign, gibt es eine Vielzahl von Möglichkeiten eine Website zu designen. Genauso wie in der Modeindustrie immer wieder neue Looks modern und "in", so sind auch Designs von Websites nicht immer populär. Was sich also im letzten Jahr getan hat und was die Webdesigner ihren Websites im Jahr 2014 "in den Schrank legen müssen", kann man in den Trends ablesen.
Basierend auf den Trendanalysen einiger Agentueren habe ich also eine kurze Liste erstellt:
1. Flat-Design
"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. Farbe hingegen wird oft intensiv eingesetzt, beispielsweise ist Windows 8 deutlich bunter als die Vorversion." [1]
Zu beachten ist hierbei jedoch, dass somit viele Seiten sehr ähnlich aussehen und es damit auch schwerer wird sich designtechnisch von anderen abzusetzen und zu unterscheiden. [4][6]
Das Flat Design am Beispiel von Etch: http://etchapps.com/
2. Responsive Design
In den letzten Jahren wurde das Surfen über mobile Endgeräte immer beliebter. Genauso wie die Beliebtheit dieser steil in die Höhe schoss, schoss auch die Anzahl verschiedener Endgeräte in unendliche Höhen. So sind mitlerweile nicht nur allerlei Smartphones und Tablets am Markt etabliert, sondern sogar Mischungen davon, die sogenannten Phablets. Die verschiedenen Bildschirmgrößen der Endgeräte stellten Webdesigner vor das Problem die richtige und passende Größe Ausgabegröße der Website zu erstellen. Durch das Responsive Design wird dieses Problem gelöst, da nun die Websiten auf verschiedene Faktoren des Users-Geräts reagieren. So wird nicht nur die Bildschirmgröße beachtet sondern auch Eingabemethoden. Ziel davon ist es die Website so gut wie möglich zu präsentieren und auch die bestmögliche Usability zu gewährleisten. [2][4][6]
Hier sehr viele Beispiele mit Bildern: http://designmodo.com/responsive-design-examples/
3. Storytelling
Das Storytelling bedeutet, wie der Name schon sagt, dass eine Geschichte erzählt wird. Hierbei werden in Form von Videos, Bildern und Texten Geschichten direkt auf der Website erzählt. Der User hat hierbei den Vorteil, dass er durch sein Scrollen und Klicken selber entscheiden kann wie schnell oder detailiert er eine Geschichte lesen, sehen oder hören möchte. Hierbei ist es vor allem wichtig einen passenden Weg zu finden um dem User die Story auch schmackhaft zu machen. [3][5][6]
Hier ein sehr gutes Beispiel von Orange: http://orange.com/sirius/histoire/en/history-highlights/
4. One Page Design
Beim One Page Design besteht eine Website wirklich nur aus einer Seite. Diese ist meist sehr lang, wodurch alle Inhalte durch Scrollen erreicht werden können. Hierbei muss beachtet werden, dass nicht alle Websites für diese Art von Design geeignet. Zu erwähnen sei hier das Seiten mit solchem Design auch oft auf Storytelling basieren und mittels Bildern ein konsistenes Bild, so wie eine Geschichte, zeigen. Dies kann unter Umständen, wenn beispielsweise sehr viele Elemente vorhanden sind, zu langen Ladezeiten oder schlechter Usability führen. Der Vorteil ist hierbei aber, dass diese Seiten sehr gut für Responsive Design geeignet sind. [4][5]
Putzengel mit einem guten Beispiel fürs One Page Design: http://www.putzengel.at/#moveto_services
5. Parallax Scrolling
Diese Form von Design stellt einen Effekt einer Seite dar bei dem verschiedene Elemente sich beim Scrollen unterschiedlich schnell bewegen. In der Realität ist dies oft zu beobachten wenn man mit dem Auto fährt und seitlich aus dem Fenster schaut. Nahe Objekte rauschen mit hoher Geschwindigkeit bei einem vorbei, entferntere Objekte hingegen bewegen sich langsamer oder gar nahezu gar nicht bei einem vorbei. Diese Art von Design wird nur als zusätzlicher schöner Effekt auf Websites eingefügt. Die Elemente werden auf verschiedenen Ebenen präsentiert und somit entsteht beim User der Eindruck, gewisse Elemente seien tiefer als andere. Zu beachten ist hierbei, dass dieser Effekt oft sehr leistungsintensiv ist und bei langsamen Internetverbindungen oder schwächeren PCs Probleme verursachen kann. Außerdem darf der Effekt nicht so stark ausgeprägt sein, dass er vom Inhalt der Seite ablenkt. [4]
Hier eines der besten Beispiele für den Parallax-Effekt: http://www.dangersoffracking.com/
6. Off Canvas
Die Off Canvas stellen eine veränderte Version des Responsive Design dar. Hierbei wird das Design wie gehabt auf die Anzeige des Endgerätes angepasst, jedoch nicht alle Elemente untereinander platziert. Vielmehr werden gewisse Elemente lediglich abseits des Angezeigten platziert und dem User durch einen Button zugänglich gemacht werden. Das einfachste Beispiel ist hierbei eine Menüleiste die ausgeblendet wird, jedoch mittels eines Button aufrufbar ist. Somit wird dem User einerseits die Seite im perfekten Format angezeigt und andererseits werdem ihm alle notwendigen Interaktionsmöglichkeiten geboten. [4][5][6]
Hier ein Beispiel für eine Desktop-Version des Off Canvas Designs: http://harbr.co/
Wie man sieht gibt es viele verschiedene Möglichkeiten eine Website aufzupeppen und für den User interessanter zu machen und gleichzeitig die Usability zu verbessern. Es bleibt an dieser Stelle nur mit Spannung zu erwarten, welche Neuerungen und Trends dann in einem Jahr wieder vor uns stehen und vor welchen Herausforderungen die Webdesigner dann stehen werden.
Quellen:
[1] Flat Design auf wikipedia.org, Quelle: http://de.wikipedia.org/wiki/Flat_Design
[2] Responsive Webdesign - die Basics, Liechtenecker, URL: http://liechtenecker.at/responsive-webdesign-die-basics/
[3] Story Telling in Web Design, Web Standards Sherpa, URL: http://webstandardssherpa.com/reviews/storytelling-in-web-design/
[4] Die 5 wichtigsten Webdesign Trends 2013/2014, viminds, URL: http://viminds.de/design/5-wichtige-webdesign-trends-2013-2014
[5] Webdesign Trends 2014, medani, URLs: http://www.medani.at/news/webdesign-trends-2014-teil1/ , http://www.medani.at/news/webdesign-trends-2014-teil-2/
[6] Webdesigntrends 2014, Liechtenecker, URL: http://liechtenecker.at/webdesigntrends-2014/
Basierend auf den Trendanalysen einiger Agentueren habe ich also eine kurze Liste erstellt:
1. Flat-Design
"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. Farbe hingegen wird oft intensiv eingesetzt, beispielsweise ist Windows 8 deutlich bunter als die Vorversion." [1]
Zu beachten ist hierbei jedoch, dass somit viele Seiten sehr ähnlich aussehen und es damit auch schwerer wird sich designtechnisch von anderen abzusetzen und zu unterscheiden. [4][6]
Das Flat Design am Beispiel von Etch: http://etchapps.com/
2. Responsive Design
In den letzten Jahren wurde das Surfen über mobile Endgeräte immer beliebter. Genauso wie die Beliebtheit dieser steil in die Höhe schoss, schoss auch die Anzahl verschiedener Endgeräte in unendliche Höhen. So sind mitlerweile nicht nur allerlei Smartphones und Tablets am Markt etabliert, sondern sogar Mischungen davon, die sogenannten Phablets. Die verschiedenen Bildschirmgrößen der Endgeräte stellten Webdesigner vor das Problem die richtige und passende Größe Ausgabegröße der Website zu erstellen. Durch das Responsive Design wird dieses Problem gelöst, da nun die Websiten auf verschiedene Faktoren des Users-Geräts reagieren. So wird nicht nur die Bildschirmgröße beachtet sondern auch Eingabemethoden. Ziel davon ist es die Website so gut wie möglich zu präsentieren und auch die bestmögliche Usability zu gewährleisten. [2][4][6]
Hier sehr viele Beispiele mit Bildern: http://designmodo.com/responsive-design-examples/
3. Storytelling
Das Storytelling bedeutet, wie der Name schon sagt, dass eine Geschichte erzählt wird. Hierbei werden in Form von Videos, Bildern und Texten Geschichten direkt auf der Website erzählt. Der User hat hierbei den Vorteil, dass er durch sein Scrollen und Klicken selber entscheiden kann wie schnell oder detailiert er eine Geschichte lesen, sehen oder hören möchte. Hierbei ist es vor allem wichtig einen passenden Weg zu finden um dem User die Story auch schmackhaft zu machen. [3][5][6]
Hier ein sehr gutes Beispiel von Orange: http://orange.com/sirius/histoire/en/history-highlights/
4. One Page Design
Beim One Page Design besteht eine Website wirklich nur aus einer Seite. Diese ist meist sehr lang, wodurch alle Inhalte durch Scrollen erreicht werden können. Hierbei muss beachtet werden, dass nicht alle Websites für diese Art von Design geeignet. Zu erwähnen sei hier das Seiten mit solchem Design auch oft auf Storytelling basieren und mittels Bildern ein konsistenes Bild, so wie eine Geschichte, zeigen. Dies kann unter Umständen, wenn beispielsweise sehr viele Elemente vorhanden sind, zu langen Ladezeiten oder schlechter Usability führen. Der Vorteil ist hierbei aber, dass diese Seiten sehr gut für Responsive Design geeignet sind. [4][5]
Putzengel mit einem guten Beispiel fürs One Page Design: http://www.putzengel.at/#moveto_services
5. Parallax Scrolling
Diese Form von Design stellt einen Effekt einer Seite dar bei dem verschiedene Elemente sich beim Scrollen unterschiedlich schnell bewegen. In der Realität ist dies oft zu beobachten wenn man mit dem Auto fährt und seitlich aus dem Fenster schaut. Nahe Objekte rauschen mit hoher Geschwindigkeit bei einem vorbei, entferntere Objekte hingegen bewegen sich langsamer oder gar nahezu gar nicht bei einem vorbei. Diese Art von Design wird nur als zusätzlicher schöner Effekt auf Websites eingefügt. Die Elemente werden auf verschiedenen Ebenen präsentiert und somit entsteht beim User der Eindruck, gewisse Elemente seien tiefer als andere. Zu beachten ist hierbei, dass dieser Effekt oft sehr leistungsintensiv ist und bei langsamen Internetverbindungen oder schwächeren PCs Probleme verursachen kann. Außerdem darf der Effekt nicht so stark ausgeprägt sein, dass er vom Inhalt der Seite ablenkt. [4]
Hier eines der besten Beispiele für den Parallax-Effekt: http://www.dangersoffracking.com/
6. Off Canvas
Die Off Canvas stellen eine veränderte Version des Responsive Design dar. Hierbei wird das Design wie gehabt auf die Anzeige des Endgerätes angepasst, jedoch nicht alle Elemente untereinander platziert. Vielmehr werden gewisse Elemente lediglich abseits des Angezeigten platziert und dem User durch einen Button zugänglich gemacht werden. Das einfachste Beispiel ist hierbei eine Menüleiste die ausgeblendet wird, jedoch mittels eines Button aufrufbar ist. Somit wird dem User einerseits die Seite im perfekten Format angezeigt und andererseits werdem ihm alle notwendigen Interaktionsmöglichkeiten geboten. [4][5][6]
Hier ein Beispiel für eine Desktop-Version des Off Canvas Designs: http://harbr.co/
Wie man sieht gibt es viele verschiedene Möglichkeiten eine Website aufzupeppen und für den User interessanter zu machen und gleichzeitig die Usability zu verbessern. Es bleibt an dieser Stelle nur mit Spannung zu erwarten, welche Neuerungen und Trends dann in einem Jahr wieder vor uns stehen und vor welchen Herausforderungen die Webdesigner dann stehen werden.
Quellen:
[1] Flat Design auf wikipedia.org, Quelle: http://de.wikipedia.org/wiki/Flat_Design
[2] Responsive Webdesign - die Basics, Liechtenecker, URL: http://liechtenecker.at/responsive-webdesign-die-basics/
[3] Story Telling in Web Design, Web Standards Sherpa, URL: http://webstandardssherpa.com/reviews/storytelling-in-web-design/
[4] Die 5 wichtigsten Webdesign Trends 2013/2014, viminds, URL: http://viminds.de/design/5-wichtige-webdesign-trends-2013-2014
[5] Webdesign Trends 2014, medani, URLs: http://www.medani.at/news/webdesign-trends-2014-teil1/ , http://www.medani.at/news/webdesign-trends-2014-teil-2/
[6] Webdesigntrends 2014, Liechtenecker, URL: http://liechtenecker.at/webdesigntrends-2014/
0 comments :: Kommentieren
