WebWi.clesun

Wie in der Modewelt gibt es auch im Web jährlich neue Designtrends, die oftmals aber nicht ausschließlich auf technische Neuerungen zurückzuführen sind.

In Anlehnung an die Lehrveranstaltung „Gestalterische Grundlagen des Web“ an der Kunstuniversität bei Herrn Prof. Dr. Funk möchte ich hier eine Auswahl an absehbaren Trends für 2014 vorstellen, die sich schon 2013 ankündigten.

Allgemein betrachtet werden Webseiten minimalistischer und aufgelockerter, mit weniger Text, dafür mit einzelnen starken Elementen. Im speziellen wird ein zentraler Trend wohl das sogenannte Flat-Design sein, welches schon durch diesjährige Softwareveröffentlichungen vorgestellt wurde.

Flat-Design

Dieser Trend wurde vom weltweit größten Betriebssystemanbieter Microsoft mit dessen Veröffentlichung von Windows 8 gesetzt und beeinflusst auch zunehmend die Gestaltung von Webseiten. Dabei geht man weg von 3D-Effekten und Schattierungen, hin zu klaren und deutlichen Linien, Formen und Elementen. Wobei der Fokus wieder vermehrt auf Funktionalität gerichtet wird.

Ein Kritikpunkt könnte hierbei sein, dass schnell die Tiefenwahrnehmung, die Erkennbarkeit von Aktionselementen wie „Buttons“, wie auch die Hierarchie zwischen Elementen verloren gehen kann.[Q1]

Bild:Q2

Hier das Metro-Design von Microsoft Windows 8 (oben) im Vergleich zum Flat-Design der Webseite der NGO „The Ecology Center (unten)

Bild: Q3

Responsive-Design

Dies ist ein Beispiel, wie Innovationen im Hardwarebereich und die damit sich ergebenden vielfältigen Möglichkeiten auf das Web zu zugreifen, die Gestaltung von Webseiten beeinflussen können. Mit dem Angebot an Geräten die vom klassischen Desktop Computer, über Laptops bis hin zu immer beliebter werdenden super mobilen Tabletts und Smartphones reichen, ist es nötig geworden Webseiten an die unterschiedlichen Bildschirmgrößen anzupassen.
Mit dem Responsive-Design bietet sich die Möglichkeit eine einzige Webseite zu erstellen die auf allen Endgeräten funktioniert. Das geschiet folgendermaßen: beim Laden wird erkannt um welches Gerät es sich handelt und welche Bildschirmgröße zur Verfügung steht. Darauf wird die Seite passend skaliert oder es werden etwa Elemente anders angeordnet oder nur teilweise gezeigt.

Bild: Q4

(Oben) Ein schönes Beispiel, bei dem auch die unterschiedliche Anordnung von einzelnen Elementen auf diversen Geräten zu sehen ist.

Ein sich durchsetzender Trend beim Responsive-Design ist die Vorgehensweise „Mobile first“. Was bedeutet, Webseiten zuerst für mobile Geräte wie Smartphones zu programmieren und danach erst für z.B. Laptops anzupassen.

Nachteile können bei dieser Designart ein erhöhter Arbeitsaufwand, oder eventuelle Einschränkungen auf einzelnen Geräten sein. Zudem braucht es gut ausgebildete Programmierer und spezielle Design-Kenntnisse.[Q1;Q5]

Auf dieser Seite zum Beispiel können Webentwickler testen, ob ihre Webseite auf den diversen geräten funktioniert: Am I responsive

Was in diesem Zusammenhang Webentwickler sicherlich vor neue Herausforderungen stellen wird, sind innovative Geräte, die vom herkömmlichen Bildschirmprinzip weggehen, wie die „Google- Glasses“.

Bild: Q6

Parallax Scrolling

Eine weitere Möglichkeit auf die Trends in der Webgestaltung zurückzuführen sein können sind neue Technologien auf Softwarebasis. HTML5 und CSS3 und auch die Tatsache, dass Browser damit immer besser umgehen können, führen die Interaktivität von Webseiten auf ein neues Level. Ein herausstechender Trend der damit in Verbindung steht ist das Parallax Scrolling. Damit ist ein visueller Effekt gemeint, der enntseht wenn sich verschiedene Ebenen, beim vertikalen oder horizontalen Scrollen unterschiedlich schnell bewegen.

Mögliche Nachteile:
Der Effekt könnte zu sehr vom eigentlichen Inhalt der Seite ablenken.

Die Webseite funktioniert eventuell wegen der benötigten Rechenleistung auf älteren Geräten nicht zufriedenstellend.[Q7;Q8]

Hier ein gutes Beispiel von Nike:

Video: Q9

Quellen:

1. Webdesign- Trends auf Vminds
2. Windows 8
3. Ecology
4. Washington DC Responsive Design
5. Selbstständig im Netz
6. google glass
7. T3N
8.Medani
9. Nike Webpage