Die Zukunft des Webdesign: Trends 2017

So wird die Zukunft aussehen: Die Webdesign Trends für 2017

Andreas Hecht

ist freier Journalist, WordPress-Experte und -Entwickler, Spezialist für WordPress-Sicherheit und WordPress Performance....

Auch in diesem Jahr werde ich mich als Wahrsager versuchen und einen Ausblick auf die kommenden Trends im Webdesign für das Jahr 2017 wagen. Manches ist gleich geblieben, anderes wird stärker in den Fokus rücken. Eines jedoch ist klar: Reine Desktop-Designs wird es nicht mehr geben.

So wird die Zukunft aussehen: Die Webdesign Trends für 2017

2017 wird sich einiges ändern. Vielfach wird das Webdesign etwas anspruchsvoller als es bisher der Fall war. Doch das ist das Schöne an unserem Beruf. Wir dürfen immer mehr dazulernen und uns weiterbilden. Damit du das frühzeitig tun kannst, habe ich diesen Artikel für dich geschrieben.

1 – Mobile First Design

mobile-first-design

Hört es sich ausgelutscht an, wenn ich das erwähne? Ich muss es aber. Beim bisherigen Design-Prozess startete der Entwickler zumeist bei der Desktop-Version einer Website. Die musste stimmen, schließlich bekommt der Kunde diese Version zuerst zu sehen und muss sie abnicken.

Erst danach wurden die mobilen Varianten entwickelt und die Website auf die responsiven Ansichten angepasst. In 2017 wird genau das nicht mehr funktionieren. Auch die Kunden haben sich weitergebildet und reine Desktop-Sites wurden bereits von Google abgestraft. Mobile First wird extrem wichtig für ein gutes Ranking in den Suchergebnissen.

Zuerst werden die mobilen Ansichten entwickelt, denn eine Website muss auf Smartphones und Tablets perfekt aussehen und funktionieren. Erst im Anschluss wird die Desktop-Version gestaltet.

Google hat übrigens ein neues Online-Tool zur Verfügung gestellt, dass durchaus aussagekräftiger ist als das alte.

Think with Google

mobile-website-speed-testing-tool-google

Ein Test mit dem neuen Tool:

Testdurchlauf meiner Website Techbrain.de. Ich kann recht zufrieden sein.

2 – Website Speed

Ein weiterer Trend in 2017 wird die Optimierung auf extrem schnelle Ladezeiten sein. Google selbst gibt seit einigen Jahren den Grenzwert von 1,5 Sekunden an. In dieser Zeit wünscht sich Google, den kompletten Ladevorgang einer Website erledigt zu wissen.

Natürlich sind 1,5 Sekunden nicht mehr zeitgemäß. Es ginge wesentlich schneller. Zumindest auf der Startseite und der Übersichtsseite eines Blogs sind Geschwindigkeiten von unter einer Sekunde durchaus machbar. Und das mit vertretbarem Aufwand. Einzelne Artikelseiten dürfen langsamer laden, da wären die eineinhalb Sekunden ein guter Durchschnittswert.

Selbst Ladezeiten von einer halben Sekunde wären kein Problem auf einer Startseite und der Blog-Übersicht. Jetzt ist die Zeit gekommen, sich mit der Speed-Optimierung zu beschäftigen, um für das nächste Jahr gewappnet zu sein.

Ein Speed-Test meiner Startseite.

Ein Speed-Test meiner Startseite.

Weiterführende Informationen:

3 – Interaktives Storytelling

story-telling-peugeot

Interaktives Storytelling wird sich sicherlich durchsetzen, obwohl es sehr aufwändig ist und in Teilen an alte Flash-Seiten erinnert. Dem User wird ein Erlebnis geboten. Mit jedem Scroll-Vorgang ändert sich der Bildschirminhalt und erzählt eine Geschichte, in die der Besucher hineingezogen wird.

Ein gutes Beispiel hierfür ist die Website von Peugeot.

4 – Handgefertigte Illustrationen

Hero-Bilder, die den gesamten Bildschirm ausfüllen, sind bereits seit längerem im Trend. Doch in Zukunft werden bedeutend weniger Stock-Bilder eingesetzt werden. Der Trend geht eindeutig zu einem einzigartigen Benutzererlebnis für die User. Das lassen sich die Unternehmen gerne etwas kosten. Handgefertigte, kundenspezifische Illustrationen bieten einen wesentlich höheren Wiedererkennungswert und zeigen klar auf, wohin sich die Zukunft wenden wird.

Einige Beispiele:

Ice and Sky

ice-and-sky

Hunger Crunch

hunger-crunch

Lighthouse Brewing

lighthouse-brewing-company

5 – Lazy Loading

Lazy Loading füttert den sichtbaren Bereich einer Website mit Content-Häppchen. Der Vorteil für Websites mit viel Inhalt – wie zum Beispiel Facebook, Instagram und ähnlichen liegt auf der Hand. Die große Menge an Content muss nicht auf einmal geladen werden, sondern zeigt sich erst nach Anforderung durch den Benutzer. Erst wenn dieser herunterscrollt, wird der angeforderte Inhalt – zumeist blitzschnell – nachgeladen.

Da die Website-Geschwindigkeit für SEO und die Konversionsraten sehr wichtig ist, erwarte ich eine weit verbreitete Nutzung von Lazy Loading in 2017.

6 – Zentrierte und/oder gesplittete Inhalte

Ein zentrierter Inhalt ist ein kraftvoller Stil mit hoher Aussagekraft. Die Haupt-Aussage wird in die Mitte des Bildschirms gesetzt und mit einigen visuellen Tricks hervorgehoben. Gut gemacht erzeugt diese Technik einen dramatischen visuellen Effekt.

Allerdings funktioniert das nicht für jede Art von Website. Seiten mit minimalen bis normalen Inhalten werden mit dieser Technik gut bedient sein.

Split-Content hingegen teilt den Inhalt in zwei Bereiche auf, was eine hohe visuelle Aufmerksamkeit erzeugt und Designern mehr kreative Freiheit in die Hände legt, ohne die Klarheit der Content-Hierarchien zu gefährden.

Ein gutes Beispiel ist die Website von Melanie DaVeid

Zuerst bietet die Website einen zentrierten Inhalt auf der Startseite…

melanie-daveid

…danach wird der Content gesplittet.

melanie-daveid

Fazit

Viele spannende Dinge erwarten uns im kommenden Jahr. Die wichtigsten Trends sollte ich erwischt haben. Wenn du allerdings der Meinung bist, ich hätte etwas vergessen, dann schreibe es gern in die Kommentare. Wir freuen uns immer über fundierte Meinungen.

Andreas Hecht

ist freier Journalist, WordPress-Experte und -Entwickler, Spezialist für WordPress-Sicherheit und WordPress Performance. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog schreibt er hauptsächlich über WordPress und veröffentlicht nützliche WordPress-Snippets.

Sortiert nach:   neueste | älteste | beste Bewertung
Christian
Gast

Google will halt sein AMP richtig “pushen”. Der Trend geht meines Erachtens in diese Richtung.

Franz Meyer
Gast

Ich frage mich welche Verbindungsgeschwindigkeit Google nimmt, bei der eine Webseite in 1,5 s geladen sein soll.

Im Trend sind doch auch Preloader, oder nicht?

Ich finde immer noch im Trend sind Google Maps mit individuellen Farben wie beispielsweise hier käuflich zu haben:
https://codecanyon.net/item/colors-for-google-maps/6057236?s_rank=3
oder hier
https://codecanyon.net/item/colorful-google-maps-api/5432242?s_rank=7

Jochen Abitz
Gast

Preloader sind schon wieder vorbei. Ich denke es wird darauf hinauslaufen die Webseite soweit zu optimieren, dass zumindest farbige Flächen zuerst zeigen wie das Layout der Seite aufgebaut ist und erst anschließend die Flächen mit Inhalte befüllt werden. So hat der User das Gefühl einer sehr schnell ladenden Website. Aufwändigere Inhalte nach unten, damit sie dort in Ruhe geladen werden können.

Die geteilte Ansicht ist sicherlich nicht schlecht und ich vermute auch, dass sich das im Webdesign weiter durchsetzen dürfte.

Franz Meyer
Gast
Hallo Jochen, Du hast Webseiten beschrieben, bei denen farbige Flächen zuerst angezeigt werden und erst anschließend mit Inhalt gefüllt werden. Habe bisher noch nichts derartiges entdeckt. Hast du vielleicht ein paar Links dazu? Preloader sehe ich eigentlich ständig auf Internetseiten von Webdesignern. Vor allem bei so genannten one-page-Seiten. Was mich bei dieser Seiten meist verwundert ist, dass die Ladegeschwindigkeit anscheinend keine Rolle spielt. Aber die Leute wollen anscheinend zeigen, was so möglich ist. Google Maps mit individuellen Farben sind nicht nur noch immer bei Webdesignern beliebt, sondern auch auf vielen normalen Webseiten und in den meisten Fällen macht sich das… Read more »
Jochen Abitz
Gast

Hallo Franz, Beispiele habe ich gerade nicht zur Hand, aber es ist auch nichts direkt ins Auge springendes. Standardmäßig sind die div container ja transparent. Wenn man sie nun einfärbt, dann erscheinen erst die eingefärbten container und ja nach Speed und Umfang danach auch die Inhalte der Container. Wenn man die im einem Bild hauptsächlich vorkommende Grundfarbe wählt, dann hat man einen schönen Effekt der Webseite beim laden.

Franz Meyer
Gast

Hallo Jochen, vielen Dank für deine ausführliche Antwort und die Erklärungen. Dir noch einen schönen Tag

wpDiscuz