WEBDESIGN TRENDS 2016.

1. Card Based Design

Inspiriert von der Google Designsprache Material Design hat sich in der letzten Zeit das sogenannte Card Based Design etabliert. Hierbei werden Inhalte in Form von kartenähnlichen Elementen wie z.B. Boxen in einer optisch sehr übersichtlichen Form angeordnet. Das wohl bekannteste Designbeispiel dieser Art ist derzeit Pinterest.

Oftmals werden die Cards mit Schatten vom Hintergrund abgehoben, sodass eine dreidimensionale Optik entsteht. Ein Vorteil des Card Based Design ist, dass sich die Elemente flexibel anordnen lassen, wie das Beispiel Visit Suffolk zeigt. So können Elemente z.B. nebeneinander aber auch untereinander platziert werden, was die Darstellung der Website auf mobilen Endgeräten erleichtert.

2. Hero-Images und HTML5 Video-Header

Ein nicht mehr ganz so neuer aber nach wie vor aktueller Trend im Webdesign sind die sogenannten Hero Images im Header, sprich die bildschirmfüllenden Bilder und Video-Animationen als "Keyvisual" der Website.

Diese Art von Webdesign eignet sich sehr gut für Inhalte mit hohem Inspirationsfaktor. Oftmals werden diese bildschirmfüllenden Videos und Bilder auch mit Parallax-Scrolling kombiniert.

3. Virtuelle 360°-Touren

Der mega Trend Virtual Reality hält langsam aber sicher auch im Webdesign Einzug. So wird immer wieder versucht, mittels 360°-Videos und 360°-Bildern, eine möglichst realitätsnahe Erlebnisdarstellung von Orten und Situationen zu simulieren. Nutzer können sich selbstständig durch den virtuellen Raum bewegen und zwischen Orten hin- und herspringen.

Leider lässt die Qualität der Darstellung oftmals noch stark zu wünschen übrig. Dennoch verdeutlicht das Beispiel von Tourism Australia ziemlich gut, wohin die Reise in Zukunft gehen wird. Bis Ende des Jahres dürfen wir uns hier sicher auf viele Best Practice und in der Kür sogar 3D-360°-Videos im Tourismus freuen.

4. Storytelling meets Webdesign

Dass guter Content im richtigen Context das Fundament jeder Website darstellt, hat sich mittlerweile herumgesprochen. Den Content optisch ansprechend sowie kontextuell sinnstiftend zu präsentieren und mithilfe des Webdesigns eine Geschichte zu erzählen, ist dabei die hohe Kunst.

Ein gelungenes Beispiel hierfür ist die Website der Space Needle in Seattle. Der Nutzer kann sich scrollend durch die Website bewegen und erhält dabei spannende Informationen über Seattles bekannteste Sehenswürdigkeit. Auch die Websites von Zermatt und Grönland sind schöne Beispiele für die Kombination von Storytelling mit Webdesign.

5. Vertical Scrolling

Der mobile-first-Ansatz bzw. die vollresponsive, weitgehend stufenlos skalierbare Optimierung von Websites für verschiedene Screen-Größen ist heute Standard. Besonders bei der Nutzung von Endgeräten mit kleineren Screens wie Tablets, Phablets oder Smartphones, müssen Nutzer für gewöhnlich mehr scrollen.

Dementsprechend hat sich beim inhaltlichen Aufbau vieler Websites eine vertikale Struktur etabliert, durch die sich die Inhalte einfacher und vor allem intuitiver erschließen lassen. Nicht selten werden dabei die gesamten Inhalte auf einer einzigen Longpage abgebildet.

6. Typografie und Illustrationen

Auffällige Typografie oder Illustrationen ins Webdesign einzubauen bedeutet nicht zwangsläufig, dass die Website dadurch kitschig wirken muss. Vielmehr geben diese Elemente der Site einen liebevollen und kreativen Touch, der bei dezentem Einsatz für ein hohes Maß an Inspiration und Individualität sorgen kann, wie die Beispiele Tourism New Brunswick und Visit Dublin beweisen.

Auch für die alternative Darstellung von Karten eigenen sich Illustrationen hervorragend, um Inhalte spielerisch zu erschließen.

Wird eine auffällige Typografie in Kombination mit Bildern verwendet, macht die Schrift oftmals einen klassischen Call-to-action Button überflüssig und hilft somit für eine aufgeräumtere Optik zu sorgen. Diesen Effekt hat Travel Oregon durch den Einsatz von Badges erreicht.

Badges sind in diesem Fall spezielle Illustrationen, die ebenfalls als Navigationselemente dienen und beispielsweise auch durch Google Fonts als ladezeitenreduzierende Schriften (statt Bilddateien) eingesetzt werden können.

• Teaser-Bild © Shubham Dhage on Unsplash