medani-pixel
news
29
Dez 15

Webdesign Trends 2015/2016

Kurz vor Jahreswechsel möchten wir die Chance für eine Retroperspektive nutzen. Welche Designtrends haben sich heuer im Web bereits abgezeichnet und wie wird das gebotene Panorama in der nahen Zukunft aussehen? In diesem Beitrag schildern wir unsere Einschätzungen und Beobachtungen …

Good Practices

Spätestens seitdem Google im Frühjahr 2015 mobile friendly Websites besser einstuft als andere, ist responsive Design ein „MUST HAVE“ Kriterium geworden. Responsive Design ist weit mehr als ein Trend, es hat sich in den letzten Jahren bewährt, durchgesetzt und ist zur „Good Practice“ im aktuellen Webdesign geworden.

 

Responsive Design basiert wie in der Branche gut bekannt ist, auf gewissen Darstellungsgrundlagen, wie zum Beispiel ein auf flexiblen Spalten aufgebautes Grundgerüst. Bekannte Frameworks (Rastersysteme) wie zum Beispiel Bootstrap und die große Verbreitung von WordPress Templates, die oft auf Bootstrap oder ähnlichen Grids aufbauen, haben ihren Teil dazu getan, dass eine Vielzahl der aktuellen Websites auf ähnlichen Grundgerüsten basieren. Dies erzeugt einen Trend, dass viele Webseiten einander vom Grundaufbau her stark ähneln. Das kommentiert auch ein aktueller Artikel der bekannten CSSAwards. Ebenso haben sich gewisse Eingabemasken und Dialogfenster (User Interface Patterns) in den letzten Jahren als bewährt herausgezeichnet und sind ebenso weit verbreitet. Hier meinen wir zum Beispiel Prominent gesetzte Suchfelder, Warenkörbe, One-Page Checkouts, Hamburgermenüs (wie zum Beispiel das Menüsymbol mit den 3 Strichen), Registrierformulare, etc.

 

Dass sich diese Elemente sehr verbreitet wiederfinden kann kritisch gesehen werden, ist jedoch auch ein klarer Vorteil für die Benutzerfruendlichkeit, da Website-Nutzer bekannte Elemente generell einfacher bedienen können als Neu zu erlernende. Des Weiteren finden sich auch Website-Nutzer schneller auf diesen Seiten zurecht und können so die Seite intuitiver nutzen.

 

 

Weitere UI Trends

Card Layouts

Eingeführt und populär gemacht von der Bildsharing Plattform Pinterest, finden sich Kartenlayouts aktuell beinahe überall im Web. Prominente Seiten wie airbnb, Adobe, Google Now, The Guardian und viele weitere Webseiten verwenden diese Layoutlösung. Aber auch Windows 8 verwendete ein kartenbasiertes Layout bereits 2006. Die Lösung ist im aktuellen Webdesign und Appdesign so verbreitet, dass das Fachmagazin TheNextWeb sogar von einer „default option“ spricht.

 

Warum? Card Layouts basieren auf Kreditkarten-ähnlich aufgebauten Bereichen, die visuell klar voneinander abgrenzbare Informationshäppchen bilden. Sie sind für das Auge optimal wahrnehmbar und bestehen meist aus Text, Bild und Call to Actions. In der Regel beinhaltet eine Karte einen informationshappen plus einer weiterführenden Aktion.

 

Ideal am Kartenlayout ist die flexible Darstellungsweise. Auf Bildschirmen mit unterschiedlichen Dimensionen können Karten als Informationshappen in der gewünschten Priorisierung neu angeordnet werden, um Klarheit und Orientierung, sowie ein wiedererkennbares Grundlayout zu erhalten. Gerade auf Mobiltelefonen ist das Kartenformat ideal, ist es ja nahezu ident mit dem Bildschirmformat. Daher wird die Benutzerfreundlichkeit gefördert und ist somit ein klarer Pluspunkt. Die Kunst für das Webdesign dabei ist, sich bewährte User Patterns zu Nutze zu machen und sich durch eine individuelle Gestaltung gezielt abzuheben. Beispiele dazu sind: aribnb, jornig

 

Full Screen Navigation

Off Canvas (außerhalb des Bildschirms platziert) Navigationen sind seit einigen Jahren üblich im Webdesign. Neuer hingegen ist der Trend „Off Canvas Menüs“ über die ganze Bildschirmbreite hin zu gestalten. Das hat den Vorteil, dass die Navigation prominent und klar positioniert werden kann und die Corporate Typografie im großen Format eine tolle Wirkung erzielen kann. Full Screen Navigationen eignen sich besonders gut für kleine Navigationsstrukturen mit maximal zwei Ebenen und wenigen Menüpunkten. Für komplexere Strukturen ist sie nicht gut geeignet, da die Übersichtlichkeit leiden kann. Ein weiterer Nachteil von dieser Navigationsart besteht generell darin, dass die aktuelle Position in der Webseite erst bei erneuten öffnen der Navigation gekennzeichnet ist. Sehr gut gelöst wurde das Menü auf der Seite fiber sensing. Auch das aktuelle populäre WordPress Template Salient bietet diese Art von Navigation an. Der Versuch mehrere Navigationsebenen zu ermöglichen, überzeugt hier allerdings aus unserer Sicht noch nicht mit der nötigen Übersichtlichkeit.

Quelle: Salient

Quelle: Salient

Quelle: Fiber Sensing

Quelle: Fiber Sensing

 

Imagery & Animation Trends

Aufgrund des Paradigmenwechsels in der Nutzung bzw. auch des Ersatzes von Flash durch aktuelle Webtechnologien wie HTML5, Javascript und CSS, haben Animationen in unterschiedlichsten Formen und Zwecken erneut große Verbreitung im aktuellen Webdesign erhalten. Wir zeigen hier drei Beispiele, in denen Animation gelungen und unterschiedlich eingesetzt wurde:

E.Leclerc

Diese Landkarte besteht aus animierten Figuren und stellt wie ein großes Suchbild das Innenleben der Brauerei dar. Unsere Einschätzung: Sehr gelungen.

Quelle: eLeclerc

Quelle: eLeclerc

Biskitty

Diese Website verwendet ein animiertes User Interface (UI) um User die hauseigenen Torten persönlich gestalten zu lassen. Die animierten Elemente sind sehr schlicht gehalten, haben aber große Wirkung! Die gesamte Menüführung ist intuitiv und lädt zu Probieren ein. Unsere Einschätzung: Schlicht mit einer großen Wirkung und guter Usability. Hier geht es zur Website

Biskitty

Quelle: Biskitty

Fiber Sensing

Animierte Hintergrundfotos und Illustrationen sorgen hier für eine bewegte, elegante und sehr zeitgemäß anmutende Wirkung. Unsere Einschätzung: Sehr trendig (vollflächiges Design) mit einem ansprechenden Farb- und Gefühlsspiel, sehr gelungen. Zur Website.

Quelle: Fiber Sensing

Quelle: Fiber Sensing

 

Wen das Thema Animationen und ihre verschiedenen Anwendungen im Webdesign im Detail interessieren, findet hier einen interessanten Artikel. Weitere Trends folgen im zweiten Teil dieses Artikels in Kürze.

 

 

 

SENDEN
SENDEN