blog.werkstatt

Interaktivität, Responsivität und Dynamik sind nur einige Schlagworte, die aktuell in der Gestaltung des Webs maßgeblich sind. Zumeist sind Technologien wie HTML5 und CSS3 die treibenden Faktoren, die die Trends des Webdesigns bestimmen.

Responsive Webdesign - das Design, das sich dem Endgerät anpasst!

Mobile Geräte wie Smartphones oder Tablets erfreuen sich immer größerer Beliebtheit. Die Zahl der mobilen Internetuser ist stetig im Steigen begriffen. Dieser Trend spiegelt sich auch in der Gestaltung von Webseiten wider. Beim responsiven Webdesign reagiert eine Webseite auf die Eigenschaften des Endgerätes. Content, Bilder und andere Inhaltselemente passen sich der jeweiligen Bildschirmauflösung an, sodass die Usability auf jeden Gerät optimiert wird. Besonders die Anordnung und Darstellung von Texten, Seitenspalten und Navigation sind hier betroffen. Zentraler Aspekt des responsiven Webdesigns ist also, dass das erfahrene Erlebnis (User Experience) auf allen Endgeräten gleich gefühlt und wahrgenommen wird. HTML5, CSS3 und Javascript bilden die technische Basis hierfür. [Q1][Q2]

In diesem Zusammenhang sollte auch aufgezeigt werden, dass Designer aufgrund der Vielzahl an existierenden Bildschirmauflösungen immer mehr auf Vektorgrafiken zurückgreifen. Im Gegensatz zu Pixelgrafiken, haben Vektorgrafiken den riesigen Vorteil auflösungsunabhängig zu sein. Erst wenn die Grafikt ausgegeben werden soll, passiert die Rasterung. Die Grafik wird somit immer optimal ausgegeben unabhängig von der Auflösung des jeweiligen Endgerätes. Bei Pixelgrafiken muss die Auflösung, und somit auch die Rasterung, von Beginn an festgelegt werden. Bei der Ausgabe wird die Grafik auf den Raster des Ausgabegerätes angepasst und kann so in manchen Fällen zu Qualitätsverlusten führen. Für Vektorgrafiken, die für Webanwendungen angedacht sind, wird vor allem auf das Format SVG (scaleable vector graphic) zurück gegriffen, welches in Zusammenspiel mit HTML5 immer mehr an Bedeutung im Webdesign gewinnt. [Q6]

 Quelle: Youtube.com

Mobile first

Die "Mobile first"-Philosophie geht noch einen Schritt weiter. Das Konsumverhalten von Usern ändert sich zugunsten von mobilen Endgeräten. Aufgrund dieser Entwicklung wird das Design von Webseiten oft schon für Tablets und Smartphones optimiert. Da Smartphone-Bildschirme wesentlich kleiner sind, liegt die Herausforderung hierbei, sich auf das Wesentliche zu konzentrieren und unwichtige Elemente von Beginn an auszusparen, es gilt: weniger ist mehr!. [Q1][Q3]

Quelle: Scott E. Bales

Parallax Scrolling

Parallax Scrolling kann als visueller Effekt verstanden werden. Hierbei werden Elemente auf verschiedene Ebenen angeordnet, die sich unterschiedlich schnell bewegen. Der User bekommt durch diesen Effekt einen Eindruck von Tiefe. Parallax Scrolling eignet sich vor allem um Geschichten zu erzählen. Der Effekt soll Dynamik in die Webseite einbringen. [Q4]

Parallax Scrolling wurde von der realen in die digitale Welt übertragen. In der physischen Welt wird in der Wahrnehmungspsychologie von Bewegungsparallaxen gesprochen. Bei einer Zugfahrt, beispielsweise, hat man den Eindruck, dass nahe Objekte wie Häuser oder Menschen sich schneller bewegen als Objekte in der Ferne wie Berge oder Wälder. [Q5]

Nike hat in der Gestaltung der Webseite auf den Effekt des Parallax Scrollings gesetzt, wie untenstehendes Video verdeutlicht.

Quelle: Youtube.com

Mehr Bilder, weniger Text

Full Page Hintergründe treten in den Vordergrund, Texte müssen sich die Aufmerksamkeit durch auffällige Typodesigns erkämpfen: Content tritt zusehends in den Hintergrund und Bilder sorgen für ausdrucksstarke Webseiten - ganz nach dem Motto: "Bilder sagen mehr als Worte". Typographie spielte im Webdesign schon immer eine bedeutende Rolle. Bei dem aktuellen Trend zu mehr Bildern, wird sich der Text in Zukunft durch aufällige Typografie aber behaupten müssen. [Q3][Q4]

Quelle: Stephan Siegrist

Flat-Design

Spätestens nach der Veröffentlichung von Microsoft's Windows 8 erfreut sich das Flat-Design immer größerer Beliebtheit. Es zeichnet sich durch seinen klaren und einfachen Aufbau aus. Vor allem den Ansatz "form follows function" wird Folge geleistet, nicht auffällige Design-Elemente stehen im Vordergrund, sondern die Funktionalität der Elemente. Reduzierte, einfache und flächige Icons bestimmen das Erscheinungsbild.

Durch das flache Design besteht aber auch die Gefahr, dass die Eindeutigkeit der Seite verloren geht. Beispielsweise kann dadurch der Unterschied zwischen Buttons und anderen gestalterischen Elementen durch den Verlust der Tiefenwahrnehmung verloren gehen und dadurch die Usability der Seite beeinträchtigen. [Q6]

Quelle: WIXBlog

So vielfältig wie das Web selbst, gestalten sich auch die Trends in der Gestaltung des Webs. HTML5 und CSS3 üben starken Einfluss auf das Webdesign aus. Die Ausrichtung von Weblösungen an mobilen Endgeräten wird auch in Zukunft eine fundamentale Rolle spielen. Welche Trends sich auch nachhaltig durchsetzen werden, wird sich noch weisen. 

Quellen:

[Q1] chiliSCHARF "Webdesign Trends 2013", aufgerufen am 30. Oktober 2013

[Q2] Wikipedia "Responsive Webdesign", aufgerufen am 30. Oktober 2013

[Q3] t3n "Webdesign-Trends: 10 Dinge, die uns 2013 erwarten", 8. November 2012

[Q4] viminds "Die 5 wichtigsten Webdesign Trends 2013/2014", 6. September 2013

[Q5] t3n "Parallax Scrolling: 25 schicke Beispiele des Webdesign-Trends", 29. Oktober 2013

[Q6] LVA Gestalterische Web-Grundlagen an der Kunstuniversität Linz, Vortragender Gerhard Funk, WS 2013/14