Webdesign Trends für 2017

Wohin geht die Reise?

Das Webdesign unterliegt, wie viele andere Bereiche (z.B. Fashion oder Ernährung), ständig neuen Trends und Entwicklungen. Mit der Zeit festigen sich Trends zu Standards, Standards werden durch neue Trends erweitert oder mit der Zeit durch neue Standards ersetzt.

Die großen Trends für 2017 sind ganz klar Storytelling und eigenes Bildmaterial. Eher auf dem Rückzug und immer weniger verwendet werden simple Bilder-Slider. Als Standard hingegen etablieren sich Hero Images und responsives Webdesign.

Eine Webseite ist ein lebender Organismus, der wächst, Erfahrungen sammelt und sich im Laufe der Zeit entwickelt. Wer wichtige Trends verpasst, läuft Gefahr ein altmodisches und angestaubtes Image durch seine Webseite nach außen zu transportieren. Das ist einer der Hauptbeweggründe warum Webseiten ca. alle 3-4 Jahre einen Re-Launch erfahren.

Wer mit seiner Webseite aktuell und frisch erscheinen möchte, sollte also die wichtigen Trends nicht verpassen und umsetzten.

Inhalt

Storytelling

Jeder liebt gute Geschichten

Innerhalb der letzten Jahre keimte die Technik des Storytelling auf und entwickelt sich zu einem starken Trend. Statt klassisch über Produkteigenschaften zu sprechen, Vorteile- und Nutzen aufzuzählen, kann ein Produkt oder eine Dienstleistung auch anders kommuniziert werden – eine Geschichte erzählen.

Im Storytelling wird, nicht wie üblich, anhand eines Textes allein ein Produkt/Dienstleistung präsentiert, es wird eine visuelle, emotionale Story linear erzählt. Das mag vordergründig betrachtet insbesondere für technische Produkte unpassend erscheinen, jedoch bietet Storytelling entscheidende Nutzen: Aufmerksamkeit und Verweildauer!

Die durchschnittliche Besuchszeit einer Webseite liegt mittlerweile bei nur 10 - 20 Sekunden!
(vgl.: https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/)

Innerhalb dieser kurzen Zeitspanne von 10 Sekunden schaut der Nutzer sich ein wenig um und entscheidet innerhalb den nächsten 10 - 20 Sekunden ob er länger auf der Seite bleibt, sprich ob er relevanten Inhalt gefunden hat. Wem es gelingt, den Kunden für 30 Sekunden auf der Seite zu halten wird ihn wahrscheinlich auch für längere Zeit halten können.

Eine fesselnde Geschichte muss nicht immer interaktiv sein, sie kann auch mit einem einzigen Bild erzählt werden, die Story muss nur überzeugen.

Storytelling verleiht einer Webseite ganz neue, erlebbare Momente. Erlebnisse bleiben, werbepsychologisch betrachtet, am längsten im Bewusstsein, weit vor Bildern, auditiven Inhalten und Texten. Darum geht es letztendlich, dem Nutzer mit der Webseite eine Erfahrung schaffen, die im Gedächtnis bleibt (hoffentlich positiv).

Storytelling ist aufwendig, es lohnt sich jedoch auf jeden Fall über diesen Trend intensiver nachzudenken.

Beispiele für Storytelling:

Responsive Webdesign/Programmierung

Mittlerweile kann man bei Responsive Webdesign nicht mehr von einem Trend sondern von einem Standard sprechen.

Mit gutem Responsive Design begegnet man elegant dem Problem der schlechten Bedienbarkeit (Usability) von Webseiten auf mobilen Endgeräten. Auf großen Desktop-Monitoren sieht alles wunderbar aus, aber auf den kleinen Displays der Smartphones stellt man fest, dass viele Dinge der Webseite nicht mehr so gut funktionieren oder vollkommen ungeeignet sind:

  • Bildschirm ist überfrachtet
  • Navigationselemente sind zu klein
  • ständiges rein- und rauszoomen

Die Folge: Die Nutzererfahrung sinkt, die Frustration steigt, der Kunde verlässt die Seite und surft einen Wettbewerber an!

Responsives Webdesign nutzt aktuelle Programmiertechniken um die Webseite an das verwendete Endgerät anzugleichen. Inhaltselemente und die Navigationsstruktur passen sich reaktiv auf die zur Verfügung stehende Displaygröße an. Das Layout der Seite ist nicht fix auf eine Breite eingestellt, sondern flexibel gestaltet.

Responsives Design sorgt geräteübergreifend für die optimale Darstellung und Nutzererfahrung. Der Pflegeaufwand der Inhalte ist gering, da nur ein Datenbestand genutzt wird.

Google erkennt Responsive Webdesign und wertet dies als Qualitätsfaktor und empfiehlt ausdrücklich die Verwendung eines responsiven Layouts.

Beim Launch einer Webseite gehört es heute einfach dazu, dem Nutzer eine zugängliche Bedienung auf mobilen Endgeräten zu bieten.

Eigenes Bildmaterial verwenden

Im Netz gibt es zahlreiche Anbieter von umfangreichen Bilddatenbanken. Wer nicht Fotografen beauftragen möchte, greift auf vergleichsweise günstiges, fertiges Bildmaterial (Stockfotos) zurück. Anbieter sind zum Beispiel:

  • Fotolia
  • iStock
  • Shutterstock

Bildlizenzen liegen bei wenigen Euro pro Bild. Hieraus ergibt sich ein Problem, viele Webdesigner greifen auf die gleichen Quellen zurück, so gleicht das Bildmaterial auf unterschiedlichen Webseiten sich Zusehens. Typisches Beispiel ist die immer wieder anzutreffende nette, lächelnde Dame mit dem Telefon/Headset bei Kontaktseiten.

Be unique!

Der Trend zu eigenem Bildmaterial entwickelt sich stark. Wir unterstützen diese Entwicklung ganz klar! Eigenes Bildmaterial zu verwenden ist aufwendig, es lohnt sich jedoch. Es wirkt authentisch, nicht artifiziell und hilft sich vom Wettbewerb abzusetzen.
Dies soll nicht bedeuten ganz auf Stockmaterial zu verzichten aber mehr Sorgfalt bei der Auswahl walten zu lassen, mehr Zeit in die Bildrecherche zu investieren und das Material auf den eigenen Bedarf zu überarbeiten.

Illustrationen

Fotos bilden einen direkten Bezug zum Produkt, Marke und Unternehmen. Sie vermitteln eine gewisse Realität und Authentizität.

Illustrationen gehen einen Schritt weiter und erlauben einen kreativeren Zugang. Sie sprechen die Vorstellungskraft und Abstraktion des Betrachters an. Sie hinterlassen durch die Auseinandersetzung des Betrachters mit dem Motiv einen bleibenden Eindruck.

Illustrationen erweitert den Trend eigenes Bildmaterial zu nutzen. Sie enthalten einen persönlicheren Charakter als Fotografien. Sicherlich steckt in Illustrationen viel Arbeit, die man jedoch auch wahrnimmt.

Die Kombination von Fotografie und ergänzender Illustration kann eine gewöhnliche, durchschnittliche Webseite in eine außergewöhnliche, einzigartige Seite verwandeln.

Cinemagraphs

Videos sind seit der Verfügbarkeit von ausreichend Bandbreiten ein häufig genutztes Medium im Web. Gegenüber einem Foto bieten das Video vielfältige Vorteile, nur nicht immer hat der Nutzer die Geduld das Video in voller Länge zu betrachten und die Kernaussage des Videos kann in diesen Fällen den Betrachter nicht erreichen und geht verloren.

Cinemagraphs sind ein Crossover zwischen Foto und Video. Gegenüber einem Video werden nur kleine Details eines statischen Bildes bewegt. Die subtile Wirkung ist ein kraftvoller Verstärker für (Key-)Visuals und transportiert Emotionen besonders gut durch die Reduktion auf minimale Elemente. Sie eignen sich besonders als Eyecatcher.

Die Idee wurde vor ein paar Jahren entwickelt und ist vor allem in sozialen Netzwerken anzutreffen.

One-Pager (Single Page Design)

Unter One-Pager versteht man eine Seitenstruktur, bei der Inhalte nicht klassisch auf mehrere Unterseiten verteilt sind sondern auf einer einzelnen, längeren Seite präsentiert werden.

Wesentliche Merkmale von Single Page Design sind eine großzügige, offene Gestaltung, angereichert mit großen Bildern, Grafiken und großen Überschriften. Alles ist auf eine einfache Bedienung abgestellt.

Das Design des One-Pager spricht besonders Nutzer auf mobilen Geräte an, da durch einfaches "wischen" die Informationen schnell erreichbar sind, statt sich durch verschachtelte Menüs zu hangeln.

Nachteilig sind größeren Ladezeiten, da der Inhalt von mehreren Unterseiten nun auf einer Seite Platz finden muss.

One-Pager sind nach wie vor ein gutes Mittel zur Präsentation von überschaubaren Inhalten und werden auch in 2017 weiter Anwendung finden.

Hero Image

Das "Heldenbild" ist ein gern verwendetes Gestaltungselement, bei dem an besonders prominenter Stelle (meist auf der Startseite) ein bildschirmfüllendes Bild (oft in Kombination mit Text) die Schlüsselbotschaft und Besonderheit der Seite vermittelt.

Entgegen dem minimalen Gedanken des Flat Designs ergänzt sich ein großes, prägnantes Hero Image hervorragend zum minimalen Designansatz.

Das Hero Image eignet sich insbesondere um das Image des Unternehmens/Produkte/Dienstleistung direkt beim Start der Seite zu transportieren. Bei der Motivauswahl ist jedoch Vorsicht geboten. Es dürfen keine unpersönlichen, langweiligen Bilder verwendet werden. Es geht um Aufmerksamkeit, da können auch gern unerwartet Motive genutzt werden. Also bitte nicht die "immer lächelnde Dame mit Telefon" oder die "aalglatten Businesshengste im Anzug" ;-)

Beispiel:

Semi Flat Design

Spätestens seit der Einführung von Googles "Material Design" (eine 2014 vorgestellt Designsprache), die im Design der Google Apps Anwendung fand, ist der wesentliche Gestaltungsstil des Flat Design immer noch der vorherrschende Stil im Webdesign.

Im Flat Design (erscheinen bereits um ca. 2010) geht es darum einen grafischen, minimalistischen Gestaltungsstil zu definieren. Aufwendige Texturen, Verzierungen, auffällige Schatten und 3D-Elementen werden vermieden. Der Ansatz "weniger ist mehr" wird konsequent zur Inhaltspräsentation genutzt.

Flat Design evolvierte zu Semi Flat Design / Flat Design 2.0 und wird sich auch in 2017 weiterentwickeln. Neue Merkmale wurden dem ursprünglichen Stil hinzugefügt, um den Hauptkritikpunkten des Flat Designs entgegen zu wirken:

  • fehlende Individualität
  • aufkeimende Langeweile

Wichtige Bestandteile sind u.a.:

Dynamische Farben

Die Farbpalette erweitert sich um kräftige und kontrastreiche Farbtöne. Leuchtende Farben mit hoher Sättigung bereichern das Semi Flat Design.

Tiefe

Entgegen dem Ursprungsgedanken, sind tiefegebende Gestaltungselementen seit längerem wieder im Einsatz, Stichwort: Long Shadows. Charakteristisch sind lange, transparent auslaufende 45° Schatten, die z.B. bei Icons Anwendung finden.

Ghost-Buttons

Bei diesem Gestaltungselement werden Buttons ohne Hintergrundfarbe, nur mit einem dünnen Rand abgebildet. Sie rücken dadurch nicht so aufdringlich ins Blickfeld, sondern fügen sich dezent ein. Die Ghost-Buttons erscheinen leicht und transparent, darum der Begriff "Geist".

Typografie

Nach wie vor stellt eine große und prägnante Typografie (Schriftgestaltung, Schriftart und Schriftsatz) ein wesentliches Gestaltungselement bei Webseiten dar. Im Zusammenhang mit flächigen Hintergründen oder Hero-Images wird die Kernaussage gern präsent platziert, besonders bei Startseiten. Die Zeiten von kleinen Schriftgrößen sind lange vorbei. Leicht lesbare, größere Schriftgrößen werden verwendet. Die durchschnittliche Schriftgröße ist um +1 bis +2 Punkte innerhalb der letzten Jahre gestiegen, geschuldet der Tatsache, dass Displays immer größer geworden sind und die Usability unter einer zu kleinen Schrift deutlich leidet.

Parallax Scrolling

Sicherlich kein Trend mehr, sondern eher im Mainstream angekommen ist die visuelle Technik des Parallax Scrolling. Hierbei werden durch Scrollen in der Webseite Bildinhalte mit unterschiedlichen Geschwindigkeiten animiert und es entsteht der Eindruck von Tiefe.

Ursprünge dieser Webdesign-Technik liegen in den frühen Anfängen der Videospiele. Hier wurden mehrere (Parallaxe-)Ebenen im Vordergrund und Hintergrund gelegt z.B. im vorderen Bereich Bäume, im hinteren Bereich Berge und Wolken. Die Bäume bewegen sich schnell, die Wolken langsam. Dies suggeriert dem Betrachter den Eindruck von räumlicher Tiefe.

Fürs Web wurde die Technik mit Animationseffekten erweitert und ist nun immer häufiger anzutreffen. Insbesondere beim Storytelling wird Parallax Scrolling eingesetzt.

Beispiel:

Langeweile?

Muss nicht sein.

Verändere etwas.

Los geht`s

Call-to-Action

Leider ein sehr oft vernachlässigter Punkt im Webdesign. Selbst gut gestalteter Inhalt allein genügt nicht um Konversionen (Umwandlung eines Besuchers in einen Anfrager) zu erzeugen.

Es bedarf, den Kunden an geeigneten Stellen durch direkte Ansprache aufzufordern und zu motivieren um die gewünschten Handlung (z. B. Kontaktaufnahme, etc.) zu erreichen. Dies sollte nicht dem Zufall überlassen sein.

Beispiele:

  • Abschicken Anfrageformular
  • Newsletter bestellen
  • Produkt kaufen

und noch ein Beispiel :-)

Angebot für neues Webdesign oder Webseite?

kostenlos anfragen
×