Webwissenschaften

Ähnlich wie in anderen Branchen, zB der Modebranche, ändern sich auch in der Online-Branche die Trends für die Gestaltung regelmäßig. Nicht nur neue Technologien wie beispielsweise HTML5 prägen den Aufbau von Websites, auch die grafischen und ästhetischen Vorlieben werden beeinflusst. In diesem Blogbeitrag werde ich einige der neuesten Trends und Entwicklungen in der Gestaltung des Webs kurz auflisten und erklären.

Bildschirmfüllende Bilder

Mehr Bilder als Text – dieses Ziel wird mit diesem Trend verfolgt. Früher wurde der Hintergrund dezent gehalten, um die Inhalte in den Vordergrund zu rücken. Heutzutage gibt es aber den Trend, großflächige Bilder zu integrieren und weniger Text auf den Startseiten zu platzieren. Dadurch können Emotionen oder die Kernbotschaft der Marke vermittelt werden. Ein bildschirmfüllendes, aussagekräftiges Hintergrundbild sorgt für eine hohe Aufmerksamkeit und bietet für Webdesigner den Vorteil, durch den einfachen Austausch des Hintergrunds, einer Website regelmässig ein neues Look & Feel zu verpassen. Auch Videos als bildschirmfüllender Hintergrund sind immer mehr zu sehen. 

Beispiele: http://www.eastworksleather.com, http://www.nike.com/us/en_us/, http://www.thewood.be/

Vertical Parallax Scrolling

Unter Vertical Prallax Scrolling versteht man, dass bei Webseiten zwei Ebenen übereinander gelegt werden, die beim Scrollen bewegt werden. Dadurch entsteht die Illusion von optischer Tiefe.   In Videospielen wird dieser Effekt schon länger verwendet, nun fand dieser auch ins Web Design. Seiten können diese grafische Darstellung verwenden um Geschichten zu erzählen und sie somit interessanter und spannender zu machen. Dennoch müssen die Grafiker darauf achten, dass dieser Effekt nicht zu sehr vom relevanten, nämlich den Inhalten ablenkt. Zudem kann das Vertical Parallax Scrolling sehr rechnerintensiv sein, was bei älteren Endgeräten oder mobilen Devices zu Schwierigkeiten führen kann. 

Beispiele: http://www.dangersoffracking.com/, http://titanic.q-music.be/, http://www.projekt-spielberg.at/aktuelles/

Sticky Navigation

Unter einer Sticky Navigation ist zu verstehen, dass der Menübereich einer Website auf allen Seiten ersichtlich ist – egal wie weit man nach unten gescrollt hat. Dadurch ist die Übersichtlichkeit auf allen Bereichen der Homepage für die Besucher gegeben – die Usability wird dadurch deutlich verbessert.    

Beispiele: http://kurier.at/, http://www.holcombguitars.com/, http://www.leviwellnessclub.fi/

Responsive Webdesign

Die Verbreitung von Mobilen Endgeräten, sprich Smartphones, Tablets etc., nimmt immer weiter zu. Daher ist es die Aufgabe von Designern und Programmierern die Webauftritte von Unternehmen dahingehend anzupassen. Responsive Webdesign ist die Lösung dafür, Webseiten an unterschiedliche Bildschirmgrößen anzupassen, ohne eine spezielle mobile Webseite anfertigen zu müssen. Die Seite passt sich beim Laden der Seite automatisch an die verfügbare Fläche an. Unter anderem gehören flexible Breiten bzw. skalierbare Bilder sind beispielhafte Methoden zur Anpassung an die verschiedenen Devices. Ein Nachteil ist allerdings, dass der Aufwand zur Programmierung von Responsive Webdesigns deutlich höher ist als die Gestaltung von klassischen Designs. Man muss sich hier aber die Frage stellen, ob es nicht sinnvoll ist diesen Aufwand in Kauf zu nehmen, da die Verbreitung schließlich immer weiter zunimmt.  

Mobile First

Der mobile First Gedanke verfolgt den Ansatz, dass bei einer Konzipierung von Websites zuerst die Variante mit der kleinsten Auflösung erstellt wird, erst dann werden die Designs für größere Bildschirme erstellt. Vorteil dabei ist, dass man sich auf das wesentliche der Seite konzentriert – also was ist wichtig, was muss zwingend auf der Website sein? Bei mobilen Endgeräten ist man meist mit den Inhalten eingeschränkt, weshalb nur die wirklich relevanten Dinge angezeigt werden. Daraus kann man dann ebenfalls die Desktop-Version etwas von überflüssigem Inhalt bereinigen. 

Quellen:

http://liechtenecker.at/webdesigntrends-2013/

http://blog.newmedia.ch/technik/webdesign-trends-2014

http://viminds.de/design/5-wichtige-webdesign-trends-2013-2014

http://www.studiosdigital.at/blog/5-webdesign-trends-fuer-2013

http://viminds.de/design/5-wichtige-webdesign-trends-2013-2014