Webdesign Trends 2016

  • von Christian Schulze

Trends sind nur selten eine gute Sache, bilden Sie doch oft einen langweiligen Konsens und versuchen so viele Geschmäcker wie möglich zu beglücken. Im Webdesign ist es nicht anders. Pure Design Trends wie das berühmte Flat Design führen lediglich zu einem langweiligen Einheitsbrei an dem man sich schnell satt gesehen hat. Auf der anderen Seite führen User Interface Pattern zu einer leichteren und verständlicheren Benutzeroberfläche über viele Websites übergreifend.

Einen guten Überblick aktueller Trends im Web kann man sich bei den sogenannten Webeditoren verschaffen. Hatten sie bis vor einigen Jahren einen eher schlechten Ruf (Microsoft Frontpage war einer dieser Kandidaten) hat sich auf dem Gebiet viel getan. Tools wie der Homepage Baukasten von wix.com sind technisch auf dem neuesten Stand und bieten ein breites Angebot von Vorlagen (Templates) welche dem aktuellen Zeitgeist entsprechen. Laut eigener Aussage haben bereits über 80 Millionen Kunden eine Website mit dem Editor erstellt. Hier kann man sich branchenübergreifend ein Bild aktueller Designtrends verschaffen.

Die Vielzahl der Homepage Vorlagen gibt einen guten Überblick über angewandte Trends über das Designeruniversum hinaus. In den Kategorien kann man dabei durch viele unterschiedliche Branchen zappen und sich anschauen wie modernes Webdesign bei speziellen Themen funktioniert. Denn nicht alle Elemente passen auch zu jedem Thema. Hier braucht man ein gewissen gestalterisches Feingefühl. Zum Beispiel sind folgende, sehr unterschiedliche, Branchen vertreten: Gastgewerbe, Wellness, Musik, Bar & Club, Immobilien, Mode & Accessoires, Darstellende Kunst bis hin zur Website für die eigene Ferienwohnung. Auch Landingpages für alle möglichen Einsatzzwecke sind vorhanden.

Homepage Baukasten Vorlagen

Im folgenden Abschnitt stelle ich nützliche Webdesign-Konzepte vor und warne auch gleichzeitig vor dem gefürchteten “zu viel” und dem puren Trend des Trends wegen.

Content First

Eine positive Entwicklung für Nutzer und Anbieter ist der Fokus auf Inhalte. Die Struktur in Form von aufwendig verschachtelten Menüs rückt weiter in den Hintergrund. Das Produkt, die Geschichte oder auch das Unternehmen rücken dafür an erste Stelle. Der Besucher bekommt auf den ersten Blick ein Gefühl für die Marke oder das Produkt und gelangt einfach weiter zu tiefergehenden Informationen.

Aber Achtung:

Auch der Fokus auf Inhalte kann schnell in die Irre führen. Zum Beispiel in Form von Startseiten-Slidern. Inzwischen gibt es aufwendige Slider Scripte bei denen einem in feinster HTML5-Animationstechnik die Überschriften und Bilder nur so um die Ohren fliegen. So verliert man schnell die Übersicht und wichtige Inhalte werden eher versteckt als ansprechend präsentiert. Studien belegen, dass Websitebesucher selten mehr als die ersten zwei Slides zu sehen bekommen.

Eine weitere Gefahr ist es jegliche Navigation hinter einem Hamburgermenü zu verstecken. Zumindest grundlegende Links zur Orientierung sollten stets sichtbar vorhanden sein.

Storytelling

Storytelling ist die direkte Erweiterung des Content First Trends. Hier wird noch mehr Struktur reduziert und möglichst viel zusammenhängender Inhalt präsentiert. Dieser zieht den Nutzer im Besten Fall durch ansprechend aufbereitete Texte, Bilder und Videos in seinen Bann. Vorausgesetzt das Unternehmen bzw. das Produkt hat auch eine erzählenswerte Geschichte, kann durch storytelling eine sehr starke Nutzerbindung erreicht werden.

Aber auch hier: Achtung!

Die technische Umsetzung sollte so effektiv wie möglich gehalten werden. Effekte, Animationen und Übergänge sind nur sparsam einzusetzen und müssen den Inhalt bereichern.

Sünden des Storytelling sind:

  • Zu viele und übertriebene Paralax Scrolleffekte (irritiert, lenkt vom Inhalt ab und führt zu langen Ladezeiten)
  • Übernahme der native Scrollfunktion durch JavaScript (führt oft zu einer unangenehm veränderten Scrollgeschwindigkeit)
  • Lange Ladezeiten und lange Ladeanimationen (Je länger die Ladezeit umso mehr Besucher springen wieder ab.)
  • Introanimationen (Hatten wir schon alles in den 2000ern, möchte wirklich Niemand mehr sehen.)

Typo

Gute Typografie ist kein Trend sondern viel mehr ein zeitloses Element zur guten Gestaltung. Befördert durch minimalistische Designtrends setzt sich die Gestaltung mit Schrift auch immer deutlicher im Web durch. Einige Designer gehen soweit zu sagen, dass eine Website nichts weiter als gut gesetzten Text benötigt.

Das „Achtung“ bezieht sich hier nur auf die üblichen Typographiesünden: Zu viele Schriftstile, zu wenig Aufmerksamkeit für Details wie Zeilenabstände und ausgewogene Schriftgrößen.

Bilderwelten

Ein klarer Trend ist auch in den Bilderwelten vieler Websites zu sehen. Endlich geht es weg von altbackenen Stockfotomotiven und hin zu individuellen Unternehmens- und Mitarbeiterfotos angefertigt von professionellen Fotografen. Der Fokus sollte hier auf den Menschen oder auf den Produkten liegen. Vorbei ist die Zeit der fröhlich grinsenden Supportmitarbeiter mit Headset auf dem Kopf und Daumen nach oben zeigend.

Achtung: Professionalität ist bei Bilderwelten das A und O. Die Fotos sollten einem klaren Konzept folgen und hochwertig nachbearbeitet sein. Schnell ein paar Handfotos geknipst und von Photoshop Phillip freigestellt; schon ist der erste Eindruck hinüber.

Subtile Animationen

Lange Zeit konnte man Animationen im Web nur mit Gif- und Flash- Dateien darstellen. Durch den rasanten Browserfortschritt ist es inzwischen möglich Animationen für Übergänge, Ladebalken und Menübuttons komplett scriptfrei mit purem HTML, SVG und CSS zu realisieren. Dadurch bleiben die Ladegeschwindigkeiten klein und der Browser kann die Animationen und Übergänge blitzschnell berechnen.

Für Interfaceanimationen hat Google eine eigene Doku zusammengestellt. Die Richtlinien passen natürlich perfekt zur Logik von Material Design und beziehen Kontext und Physik in die Bewegungsmuster ein.

Achtung: Wie bei den meisten Gestaltungselementen kommt es auch bei Animationen auf den subtilen und gezielten Einsatz an.

Clean, Material, Hand Drawn Design

Bereits in den letzten Jahren gab es den Trend zum simplen, übersichtlichen Design. Eine Zeit lang war Flat Design der heilige Gral aller Gestalter. Hierbei wurde auf jegliche Tiefe und Ornamente verzichtet. 2014 hat Google diesen Vorlage aufgegriffen und mit Material Design ein Konzept für simples, logisches und kontextbezogenes Design geschaffen. Durch subtile Licht- und Schatteneffekte wird den einzelnen Elementen, mit Hilfe von simulierter Tiefe im Raum, eine Gewichtung gegeben. Das führt zum einen dazu, dass nun Googles eigene Webangebote viel konsistenter und logischer aufgebaut sind, hat aber auch den Nachteil das viele andere Websites „gleich aussehen“.

2016 gibt es dazu den passenden Gegentrend in Form von handgezeichneten und teilweise illustrierten Webdesigns. Passend dazu ist auch der Trend zum Hand Lettering.

Achtung: Hand Lettering ist nicht einfach durch eine Handschrift Font zu simulieren. Der Unterschied mag fein sein, aber eine echte Handschrift ist unschlagbar.

Fazit

Schaut man sich die beliebtesten Vorlagen beim WIX Baukasten an, stellt man schnell fest, dass hier alle genannten Trends wiederzufinden sind: Große Bilder, starke Typographie und generell eher eine überschaubare Informationsdichte. Mit dem neuen Editor ist es zudem kinderleicht die Vorlagen nach den eigenen Bedürfnissen anzupassen.

Kombiniert man eine der professionellen Vorlagen mit eigenem Bildmaterial kommt man schnell zu einer individuellen Website, welche den aktuellen Webtrends entspricht, responsive auf allen Geräteklassen funktioniert und zudem auch noch einfach zu bearbeiten ist.

Neben der Optik ist das User Interface Design ebenso wichtig für ein positives Nutzungserlebnis. Dafür bietet WIX.com viele Funktionen wie Kontaktformular, Onlineshop-Funktionen und vieles mehr an. In einem integrierten App Store können auch weitreichendere Funktionen gefunden und integriert werden.

Die Webdesign Trends 2016 sind eine konsequente Evolution der Trends aus den Vorjahren. Am spannendsten finde ich persönlich die Gegentrends, welche sich immer dann bilden, wenn Gestaltungsmuster zu oft eingesetzt werden und damit jede Individualität verlieren.

2 Kommentare

  1. Matthias
    30. April 2017 um 16:48 Uhr

    Die weiter zunehmende mobile Nutzung des Internets scheint mir auch immer stärker das Webdesign zu beeinflussen. Viele Elemente sind einfach schlicht nicht gut mobil umsetzbar – Flat Design wird immer zwangsläufiger!

  2. Jens
    1. Mai 2017 um 15:27 Uhr

    Jau Wix ist schon nicht schlecht. Ich persönlich kann auch WordPress empfehlen im Bereich der kostenlosen Webseiten Systeme. Beide Angebote haben jedenfalls eine große Auswahl an aktuellen Templates!
    VG Jens (von nur gratisproben)

Hinterlasse einen Kommentar