Du betrachtest gerade Die Webdesign Trends 2016

Die Webdesign Trends 2016

  • Beitrags-Autor:
  • Beitrags-Kategorie:Trends

Das Jahr 2016 steht gerade in seinen Startlöchern und schon geht’s weiter. Ich wage heute mal einen dezenten Ausblick in das, was uns dieses Jahr alles erwarten wird und könnte.

Mobil optimierte Webseiten – responsive Design

responsive Design2015 gab es einige Aktionen, die sich auf die folgenden Jahre und insbesondere noch auf das Jahr 2016 auswirken. Dazu gehört vor allem die Ankündigung von Google, nicht mobil optimierte Internetseiten (z.B. ohne responsive Design), ab dem 21.April 2015, bei der Sichtbarkeit schlechter zu bewerten.

Zwar wurde von Google schon seit 2013 auf die Wichtigkeit mobil optimierter Webseiten hingewiesen, da hier aber nie eine Reaktion seitens Google erfolgte, wurde das Thema mehr oder weniger „übersehen“. Entsprechend groß war dann die Überraschung, als Google 2015 ernst machte und die Mobilfähigkeit von Webseiten als Rankingfaktor verkündete.

Wer jetzt noch nicht genau weiß, ob seine Seite mobil-freundlich ist, der kann diese unter folgendem Link testen: https://www.google.com/webmasters/tools/mobile-friendly/

Die Usability und die Ladezeiten sind hierbei auch nicht zu vernachlässigen. Bedenkt man, dass Smartphone-Nutzer meist Volumenverträgen nutzen, liegt diesen mehr daran, dass die Seiten schnell auf den Phones geladen sind. Dem Thema Perforance haben sich die grosen Player wie Facebook, Apple und Google bereits verschrieben und werden hier 2016 einiges an Features und Richtlinen auf den Markt bringen. Google startete hier bereits mit dem Projekt AMP (Accelerated Mobile Pages) und konnte schon ein paar namhafte Unternehmen zu Mitarbeit bewegen.

Infinite Scrolling

infinite scrollIm Zuge der Optimierung der Webseiten für die Darstellung von Inhalten auf mobilen Endgeräten mußten sich die Designer und Programmierer Platz schaffen. Dafür gibt es eigentlich nur 3 Lösungen, entweder die Inhalte werden auf dem Smartphone horizontal oder vertikal aneinandergereiht oder man bastelt ein entsprechendes Menü. Das Gro der Nutzer empfand das vertikale scrollen am angenehmsten, dieses war man auch schon aus Facebook und Co gewohnt.

So wird sich der Trend des scrollens auf „meterlangen“ Seiten auch ins Jahr 2016 retten und weiterentwickeln. Dabei wird vor allem die Platzierung der Inhalte in der Vorschau eine wichtige Rolle spielen. Von einspaltig bis mehrspaltig, fullscreen oder auto, responsive oder parallax, die Funktion setzt sich durch und wird dieses Jahr bestimmt wieder ein paar optische Highlights hervorbringen.

Glaubt man so manch einer Studie, werden wir in nächster Zeit noch mehr scrollen, denn Infinite Scrolling ist eine praktische Funktion für das Content-Marketing und damit einhergehend für das Storytelling.

Storytelling

storytellingWer sich schon länger mit dem Thema SEO befasst, hat es schon mitbekommen. Der Content einer Webseite nimmt einen immer stärkeren Platz beim Ranking für Webseiten ein. Seit Jahren bastelt Google schon an seinen Algorythmen guten Content von schlechtem zu unterscheiden. Die spiegelte sich in den vielen Updates des Suchmaschinengiganten wieder, 2015 wurde hierfür das passende „Panda“ Update herausgebracht. Der Prozess ist noch lange nicht abgeschlossen, zeigt aber die Wichtigkeit von gutem, aktuellem Content.

Modernes Content-Marketing setzt hierbei verstärkt auf das Storytelling. Hierbei werden Inhalte optisch verpackt und kombiniert. So entstehen Geschichten, durch die sich der Nutzer hindurch bewegt. Es gilt den Inhalt für den Nutzer so aufzubereiten, dass dieser neugierig und gespannt am dargestellten hängen bleibt. Natürlich sollte der Inhalte der Story auch authentisch bleiben, darf hier aber gerne auch unterhalten.

Menü-Design – Full, Card oder Hamburger

menuestrukturMit den neuen Ansprüchen der Internetauftritte an die mobilen Endgeräte, änderte sich auch der Aufbau der Menüstruktur. Hier hat sich ein klarer Trend entwickelt, der in 2016 seinen Feinschliff

bekommen wird. In der mobilen Variante auf Smartphones und Co hat sich das reduzierte Menü in Form des Hamburgers durchgesetzt. Für größere Bildschirme bleibt dem Entwickler immer noch die Qual der Wahl erhalten, Navigation oben, unten, rechts oder links, erlaubt ist was dem Nutzer gefällt.

Um den Content mit einer Art Navigation zu versehen, entwickelte Pinterest eine sehr schöne Art und Weise. Hierbei wurden „Cards“ entwickelt, die eigentlich nichts anderes sind als kleine Container mit Inhalten in Form einer Preview. Diese „Cards“ kann man nun bequem mit den diversen, responsiven Grid-Layouts kombinieren und erhält so eine komplette Menü-Oberflüäche.

Durch die rechteckige Form der „Cards“ wird es auch einfacher, diese in einem fullscreen Layout zu platzieren. Diese Forme der Navigation wird uns 2016 öfter begegnen, da sie nicht nur für mobile Engeräte optimal ist, sondern auch für alle anderen.

HD Images und HD Movies

Wer kennt das nicht, gerade in Branchen wie Banken, Unternehmensberatungen oder Kanzleien, tauchen immer wieder die gleichen Bilder auf. Berühmt berüchtigt ist das Stockfoto mit den schüttelnden Händen, ein Klassiker. Dank der sozialen Medien wurden diese Bilderchen so stark verteilt, dass manch einer nur noch genervt weiter klickte, vor allem wenn man das gleiche Bild innerhalb von Stunden zigfach in seiner Facebook-Timeline wiederfindet.

Einer der Gründe, warum soziale Medien so erfolgreich sind, ist die Möglichkeit der Selbstdarstellung. Hier kann sich jede/r so präsentieren wie sie oder er es möchte, von natürlich bis overdressed. Manch eine Dame verbringt Stunden damit, das richtige Selfie zu erschaffen und optimiert dieses zusätzlich über ein Grafikprogramm. Warum? Ganz einfach, sie möchte Reaktionen auf ihr Bild und damit auf ihr Aussehen bekommen.

Diese Selbstdarstellung gilt nicht nur für Menschen, sondern auch für Unternehmen, Produkte usw.

Die Nutzer möchten keine Stockfotos mehr, sondern das echte Leben und die Personen, Produkte, die dahinter stecken. Zeigt uns wer Ihr seid, seid authentisch – aber bitte in HD.

Denn wir wollen nicht nur alles genau und scharf sehen sondern auch überall. Hochauflösende Bilder und Videos dienen nicht mehr nur als Header oder in Galerien als Blickfang. Sie finden auch begeisterte Verwendung als Fullscreen Hintergründe um die Webseiten optisch in Szene zu setzen.

Fullscreen

fullscreenDa selbst auf optimierten Smartphones der Platz für Content begrenzt ist, gilt es diesen maximal auszunutzen. So ist es kaum möglich Inhalte auf Smartpones sinnvoll nebeneinander zu platzieren ohne die Textgröße ins unleserliche zu versenken. Daher nutzt man hier die komplette Breite des Screens maximal aus. Ähnlich verhält es sich mit anderen Displays – warum Platz verschenken. Bilder werden als Fullscreen Hintergründe eingetragen und der Content darüber verteilt. Die verschiedensten Grid-Layouts waren geboren und werden uns auch im Jahr 2016 begleiten.

Flat-Design

flat-designFür jeden Trend gibt es eine Gegenbewegung, bei den HD Bildern und fullscreen Videos ist dies der Minimalismus, das Flat-Design gepaart mit einer neuen Form der Typographie. Bereits 2014 stellte Google die Designsprache „Material Design“ vor. Diese beinhaltet definierte Vorschriften und Anweisungen für sämtliche Formfaktoren auf Laptops, Tablets, Smartphones, TV und Smartwatches. Hier kommen großflächige, einfarbige Elemente zum Einsatz, kontrastreich und bunt. Der Clou dabei ist die Möglichkeit der Überlagerung und Animation dieser Objekte.

So können wir uns auch in 2016 auf Flat-Design orientierte Apps und Seiten freuen. Denn hier gilt, weniger ist mehr.

Flat-Design geht sogar so weit, dass es versucht, komplett auf Bilder zu verzichten. So soll dieser Design-Trend klassisch, schlicht und beruhigend auf den Betrachter wirken, reduziert auf das Wesentliche. Dabei wird das Hauptaugenmerk auf die Typographie gelegt. Dabei schrecken die Schriftsetzer nicht vor schrillen Buchstabenkombinationen zurück. So werden Schrifttypen- und Größen munter miteinander gemischt und kombiniert.

Weitere kleinere Features, denen wir 2016 häufiger begegnen werden.

Der Ghost-Button

ghost-buttonEin kleiner, eleganter Button, umflossen von einer Outline mit transparentem Hintergrund. Macht sich besonders gut auf minimalistischen Webseiten.

Gradient Backgrounds

gradientfillCSS3 macht es möglich, die Verwendung von Farbverläufen in Hintergründen. Damit können saubere Effekte erzielt werden, ohne auf KB-schwere Grafikdateien zurück greifen zu müssen.

In diesem Sinne, freuen wir uns auf ein intuitives Jahr 2016.  Die meisten der Trends werden aus den Vorjahren weitergeführt und weiterentwickelt. 2016 ist also das Jahr des Feinschliffs von bereits erprobtem. Wir werden sehen was sich an komplett neuen Trends in diesem Jahr entwickeln wird.

Wolfram Daur
Online Marketing Manager

(2016 offiziell zertifiziert durch Online-Studium zum Online Marketing Manager durch die DEPAK)

Wolfram Daur

Wolfram Daur - Marketingleiter / Digital CMO - Schwerpunkt E-Commerce - Online Marketing Spezialist. Zertifikate: E-Commerce Manager (SMA) | Master Leadership Performance A (BPA) | Online Marketing Manager (DPA) - Leidenschaften: Produktentwicklung, Design, Neuromarketing...