Andreas Hecht 4. November 2016

Die Zukunft des Webdesign: Trends 2017

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

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen 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

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

9 Kommentare

  1. Hallo in die Runde,

    danke erst einmal für den guten Beitrag, ich lerne immer wieder dazu als Webmaster. Mir ist in der Vergangenheit auch schon aufgefallen, das immer mehr Handgefertigte Illustrationen zum Einsatz kommen auf vielen Webseiten, was mir natürlich auch gut gefällt. Habt Ihr einen Tipp für mich, wie ich so was selber erstellen kann, vielleicht eine Art von Zeichenprogramm oder ähnliches. Für eine Agentur fehlt mir aktuell noch das Geld :-(

  2. 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.

    • 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 auch deutlich besser. Ich selbst habe die beiden oben genannten Produkte und bisher haben alle meine Klienten Google Maps mit individuellen Farben und alle finden es besser, als die Standard-Variante von Google Maps.

      • 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.

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

  3. 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

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

Tut uns leid, aber die Kommentare sind geschlossen...

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück