Moderne Websites Was sind die aktuellen Webdesign-Trends?

Das vielleicht wichtigste Thema für 2017 wird für Webdesigner und Web Developer, die auch die Suchmaschinenoptimierung für Google & Co. nicht vernachlässigen wollen, der Pagespeed sein. Dies hat mehrere Gründe: Da mittlerweile mehr Menschen mobil surfen als am Desktop, müssen auch auf kleinen Smartphones Websites schnell geladen werden können. Internetverbindungen werden zwar immer schneller, doch der Trend in Richtung grosse Bilder und Videos sorgt dafür, dass auch mehr Datenvolumen verbraucht und mehr Arbeitsspeicher in Anspruch genommen wird.

Darüber hinaus gibt es mit jedem Jahr viele Millionen Websites mehr, doch die Server-Kapazitäten, um all diese vielen Webdokumente zu crawlen, sind begrenzt. Google und auch andere Suchmaschinen vergeben ein sogenanntes «Crawl-Budget», welches bei der Indexierung neuer Webseiten berücksichtigt wird. Mit anderen Worten: Wer schnellere Websites betreibt, der landet nicht nur schneller im Google-Index, sondern hat mit Sicherheit auch bessere Rankings als die Konkurrenz.

Die Homepage sollte nur in Ausnahmefällen mehrere MB gross sein und auf jeden Fall in unter 3 Sekunden laden.

Boxen

Boxen

Inhalte werden immer mehr in teils unterschiedlich grossen Boxen zusammengefasst, die unter- oder nebeneinander platziert werden können. Jede Box hat ihren eigenen Content. So sieht der Besucher gleich auf den ersten Blick mehrere inhaltliche Themen.
Für den anhaltenden Trend in Richtung responsive Webdesign sind solche Container ideal, da sie je nach Bildschirmgrösse ihre Position wechseln können. Boxen, die auf einem stationären PC nebeneinander stehen, befinden sich auf dem Smartphone einfach untereinander.
Ein wichtiges Tool dafür ist Flexbox, welches zwar schon seit einigen Jahren existiert, jedoch erst jetzt von allen aktuellen Browsern unterstützt wird.

Mobile First

Mobile First

Obwohl es schon seit längerer Zeit ein grosses Thema ist, nimmt es nach wie vor an Bedeutung zu: das Responsive Webdesign. Das liegt nicht zuletzt an der stetig wachsenden Internetgemeinde, die über Smartphones, Tablets und ähnliche Endgeräte mobil surft. Es ist heute wichtiger denn je, dass eine Website auf allen Endgeräten gleich gut ankommt, da schon seit einiger Zeit mehr Menschen per «mobile internet» auf Websites gelangen als am Desktop.

Es muss nach den neuesten Google-Updates absolut die Devise «mobile first» lauten! Zuallererst sollte man eine Website aus der mobilen Perspektive entwickeln, und das natürlich responsive. Wer dabei das AMP Project im Hinterkopf behält, liegt klar im Vorteil. Das ist neben dem Fokus auf Pagespeed vielleicht der wichtigste Aspekt im neuen Jahr. Dass Designs danach auch für völlig neue Geräte wie etwa «smart watches» optimiert werden müssen, ist noch Zukunftsmusik, aber absehbar.

Grössere Bilder

Grössere Bilder

Der Trend geht hin zu grösseren Bildern, Videos und geschickt gelayouteten Text. Das ist nicht unbedingt eine Entwicklung, die dem aktuellen Hype rund um Content Marketing entgegenläuft. Denn ein modern verstandener Content-Begriff bezieht sich lange schon nicht mehr auf «unendlich lange» Texte. Die Beliebtheit rund um Snapchat, Video auf Facebook und nach wie vor Youtube macht klar, dass die Zukunft im bewegten Bild liegt.

Hier lautet die Devise, das Wesentliche in den Vordergrund zu rücken. Gut strukturierter Text, der durch einschlägige Bilder und Videos aufgelockert wird – insgesamt muss der Inhalt wirklich relevant sein und für eine einzigartige User-Erfahrung sorgen. Schnellere Internetverbindungen machen es möglich, dass grosse Hintergrundbilder und Videos geladen werden können, ohne dass es zu merklichen Verzögerungen kommt.

Websites müssen optisch überzeugen, und das gelingt mit schönen und aussergewöhnlichen Bildern, die zudem die Konversionsrate deutlich steigern können. Gleichzeitig dürfen suchmaschinenoptimierte und pointierte Texte nicht fehlen, denn sonst wird es mit dem Ranking bei Google & Co. schwierig. Hier ist eine gute Balance gefragt!

Animierte GIF-Bilder

Animierte GIF-Bilder

Ein Trend, der vor einigen Jahren in Sozialen Medien gestartet ist, sind animierte Bilder im GIF-Format, eine Art Mischung zwischen Video und Foto. Vor allem die Modebranche begann mit der Nutzung dieser bewegten Bilder, um die Aufmerksamkeit auf die relevanten, animierten Details des Bildes zu lenken und feierte damit grosse Erfolge.

Diese GIFs sind inzwischen nicht nur auf sozialen Plattformen beliebt, sondern auch bei Webmastern, denn die Webseitenbesucher reagieren auf sie meist äusserst positiv: Sie können gar nicht anders als hinzuschauen und sind von den Bewegungen im Bild überrascht, was sie deutlich spannender und interessanter macht als unbewegte Bilder. Plötzlich kann eine abgebildete Kaffeetasse dampfen, Haare können im Wind wehen und Kinder auf einer Wiese toben.

Zugleich haben sie auch gegenüber einem Video einschlägige Vorteile: Die GIF-Animation sticht dem Besucher sofort ins Auge, er muss nicht erst aktiv werden und sie – wie beim Video – selbst starten. Ausserdem benötigt sie deutlich weniger Bandbreite als ein Video.

Durch seine Bewegungen erregt ein animiertes Bild nicht nur Aufmerksamkeit, sondern bietet auch zahlreiche Möglichkeiten, die Stimmungen, Gefühle und Einstellungen, die eine Webseite auszeichnen, darzustellen.

Reale Fotos

Reale Fotos

Authentizität und Individualität ist wichtig in einer Internetlandschaft, in der sich durch Content-Management-Systeme wie Wordpress und Joomla viele Webseiten ohnehin schon ähneln. Stockfotos, die sich jeder kaufen kann und die deshalb auch wiederholt im Web auftauchen, heben die Seiten nicht gerade aus der Masse hervor. Stattdessen geht der Trend mehr zu realen und authentischen Fotos, die im Hinblick auf die Webseite und ihre Thematik selbst geschossen worden sind und ihr deshalb eine eigene Persönlichkeit verleihen und einzigartig im gesamten Internet sind.

Bilderlose Inhalte

Bilderlose Inhalte

Grosse Bilder und wenig Text ist im Internet ein bedeutender Trend, der auch in Zukunft nicht abreissen wird. Aber auch der Trend in die andere Richtung, das Gegen-den-Strom-Schwimmen, kann interessant sein und in einer digitalen Umgebung, die von Bildern nur so geflutet wird, besondere Aufmerksamkeit erregen.

Studien haben ergeben, dass in den Top 10 bei Google vorwiegend Unterseiten zu finden sind, die durchschnittlich um die 2000 Wörter umfassen – Wikipedia lässt grüssen. Doch selbst wenn viel Text und wenig Bild vorhanden ist, so zeigt sich, dass (Text-)Content vor allem dann gut rankt, wenn eher mehrere Absätze gemacht werden, hin und wieder auch Fettdruck verwendet wird, Strichlisten die Hauptaussagen noch einmal verdeutlichen, logische Zwischenüberschriften über Absätzen stehen.

Ausserdem gilt es ja bei aller Liebe zu Bildern nicht zu vergessen, dass nach wie vor die Devise «weniger ist mehr» im Webdesign herrscht.
Deshalb darf sich der Webdesigner 2016 auch ruhig trauen, die eine oder andere Seite komplett ohne Bilder zu konzipieren. Wer es richtig angeht und mit unterschiedlichen Schriftgrössen und –arten spielt, ebenso wie mit Farben, und seinem Einfallsreichtum Raum gibt, kann eine schlichte, beruhigende, übersichtliche und damit interessante sowie anschauliche Wirkung erzielen und Inhalte erschaffen, die auch ohne Bilder nicht langweilig oder trocken aussehen.

Zentrierte / Gesplittete Inhalte

Zentrierte / Gesplittete Inhalte

Zentrierte / Gesplittete Inhalte
Gute Inhalte sind zwar das A und O einer Webseite, aber sie sind nicht alles, denn gute Inhalte werden nicht wirken und vermutlich gar nicht beim Besucher ankommen, wenn sie nicht ansprechend, aussagekräftig und für den User leicht verständlich platziert werden.

Eine noch recht neue Anordnung mit hoher Aussagekraft, die als sehr vielversprechend für die Webseitengestaltung 2017 gilt, ist die Zentrierung und Aufsplittung der Inhalte.
Steht die Hauptaussage in der Mitte des Bildschirms und wird zudem mit visuellen Tricks wie Farben, Symbolen oder Fonts hervorgehoben, so kommt sie sicherlich bei dem Internetnutzer an.

Eine Möglichkeit ist es auch, den Content so zu splitten, dass die relevanten Informationen deutlich als solche beim User ankommen.

Ein Beispiel: Links sieht er gross und deutlich, worum es im rechten, mit oder auch ohne Bild versehenen Textabschnitt geht, etwa indem links der Name des Menüpunktes nochmal in möglichst schickem und auffälligem Design aufgeführt wird. Das hilft dem Nutzer, stets den Überblick darüber zu bewahren, wohin er geklickt hat und welche Inhalte der Webseite er gerade vor sich hat.

Kreative Fonts

Kreative Fonts

Auch in Bezug auf die Typografie zeichnen sich Neuerungen ab: Mittlerweile gibt es zahlreiche Fonts, die das eigene Unternehmen und seine Message besser unterstreichen als Standardfonts wie Arial, Helvetica & Co. Allerdings sollte darauf geachtet werden, dass die Fonts auch lesbar sind (im Zweifelsfall eher eine serifenlose Variante verwenden), dass sie gross genug gewählt werden und zudem in allen gängigen Browsern darstellbar sind. Wer auf Nummer sicher gehen will, der sucht sich einen der zahlreichen Google-Fonts aus. So kann mehr Kreativität und Persönlichkeit in die Inhalte gebracht werden, ohne dass dabei Geld investiert werden müsste – die Fonts gibt es meist kostenfrei oder zumindest deutlich günstiger als noch vor ein paar Jahren.

Mutige, bunte Farben

Mutige, bunte Farben

Was bereits 2016 begann, setzt sich 2017 fort: Der Trend geht hin zu bunteren, mutigeren Farben und weg von der alten Devise, besser nichts zu riskieren. Gerade neue, moderne und junge Marken und Unternehmen trauen sich, mit farbenfrohen Designs und aussergewöhnlichen Farbkombinationen die Aufmerksamkeit auf sich zu ziehen und setzen damit natürlich auch ein Zeichen: Buntes, Auffälliges steht für Mut zu Neuem und für frische Ideen.

Wichtig ist dabei natürlich immer, trotzdem stimmige, harmonische Farben und übersichtliche Kombinationen zu wählen, um den Internetnutzer nicht zu irritieren.

Leuchtende, satte Farben wirken aktuell auch deswegen so gut, weil die Qualität der Bildschirme immer besser wird, sodass sie auch die Farben optimal darstellen können.

Flat Design

Flat Design

Auch beim sogenannten «flat design» gilt die Devise «weniger ist mehr». Auf eine realistische Darstellung von dreidimensionalen Elementen, Schlagschatten und Verzierungen wird verzichtet und die Gestaltung wird auf das Wesentliche reduziert – gewissermassen ein minimalistischer Ansatz also.

Dieser Trend zur Klarheit und weniger Ablenkung lässt sich ebenfalls durch den rasant wachsenden Anteil an mobilen Internetnutzern erklären: «flat designs» rücken die Funktionalität und Einfachheit in den Vordergrund, ermöglichen schnellere Ladezeiten und bieten bessere Anpassungsmöglichkeiten bei unterschiedlichsten Bildschirmgrössen. Betriebssysteme und Applikationen sind typische Beispiele für die Möglichkeiten von «flat designs». Die minimalistische Ästhetik liegt absolut im Trend.

Material Design

Material Design

Ähnlich, aber nicht ganz so minimalistisch wie das Flat Design, ist das Material Design, welches mit Tiefen und Schatten arbeitet, also eine dritte Dimension besitzt. Erreicht werden soll damit eine realistischere Darstellung für eine aufregendere User-Experience.
Minimalismus wird aber auch im Material Design gross geschrieben. Funktionalität und Klarheit sollen unter der realistischen Darstellungsweise also nicht leiden und die tragenden Design-Elemente sind wie beim Flat Design Icons und Schriftarten. Ebenso spielen auch beim Material Design grosse, einfarbige Flächen eine wichtige Rolle.
Das Gute am Material Design für Webdesigner und Programmierer ist, dass die Designspache viele Freiheiten lässt, denn sie bezieht sich nicht auf ein spezielles Framework.

Ghost Buttons

Ghost Buttons

Eine Entwicklung, die mit dem Einsetzen grösserer Hintergrundbilder und dem «flat design» einhergeht: «ghost buttons» sind unaufdringlich, einfach gestaltet und fügen sich optimal in das Umfeld ein. So können «call-to-action-buttons» elegant und mit einem gewissen Überraschungseffekt für die User umgesetzt werden.

Hover-Effekte

Hover-Effekte

Der Hover-Effekt, auch Mouseover-Effekt genannt, bezeichnet die Veränderung eines Elements, wenn der Webseitenbesucher dieses mit der Maus berührt. Dieser Effekt wird besonders häufig bei Links eingesetzt: Sobald der User einen Link berührt, ändert er die Farbe. Dadurch wird ihm signalisiert, dass er diesen Link anklicken kann. Damit geht es beim Hover-Effekt in erster Linie um Feedback auf die Aktionen des Users und gleichzeitig natürlich auch um Usability.

Aber auch etwa bei Tabellen wird der Hover-Effekt gerne eingesetzt, um dem Nutzer das Lesen zu erleichtern. Dort, wo er mit der Maus seinem Lesefluss folgt, erscheint das jeweilige Tabellenelement in einer anderen Farbe.

Der Einsatz des Hover-Effekts ist auch bei Grafiken sehr gut anwendbar. Sobald ein Bild mit dem Mauszeiger überfahren wird, kann ein Schriftzug erscheinen, der die Grafik erläutert. Zwar ist der Mouseover-Effekt keine Neuigkeit in der Welt des Webdesign, wird aber auch 2017 gerne eingesetzt werden und aufgrund seiner Nutzerfreundlichkeit immer gut beim User ankommen.

Geschichten erzählen

Geschichten erzählen

Das «Storytelling» ist eine Entwicklung, die auch mit dem Siegeszug des Onepagers zusammenhängt: Der Benutzer scrollt sich durch die Homepage und liest eine spannende Geschichte zum Unternehmen und seinen Produkten. Das mühselige Zusammenklauben von Informationen auf vielen verschiedenen Unterseiten wird ersetzt durch eine auf den Punkt gebrachte Story. Dieses Storytelling wird durch den Trend zum Scrollen unterstützt, sodass der Internuser in einen schönen Lesefluss kommt.

Scrollen statt klicken

Scrollen statt klicken

Klicken ist out, Scrollen ist in – das sieht man nicht zuletzt beim modernen Onepager und umfangreicheren Responsive Designs. Das Scrollen ist intuitiver, verhindert das viele Herumklicken auf verschiedenen Unterseiten und spart auch Ladezeiten. Schon beim Ansurfen der Homepage einer Website sollte der User alle relevanten Informationen auf einen Blick vorfinden. Wer tiefer in die Materie einsteigen möchte, sollte dann wiederum die Möglichkeit haben, per Klick mehr zu erfahren.

Parallax Scrolling

Parallax Scrolling

Beim «parallax scrolling» bewegen sich Bilder im Vordergrund schneller als Hintergrundbilder. Das heisst, dass sich die Ebenen beim Scrollen mit verschiedenen Geschwindigkeiten bewegen, wodurch der Eindruck von Tiefe entsteht. Das ist ähnlich wie beim Zugfahren: Nahe Objekte scheinen schneller am Betrachter vorbeizuziehen als weiter entfernte. Die Nutzer-Interaktion steigt beim Einsatz von «parallax scrolling» angeblich um bis zu 70%. Man kann davon ausgehen, dass auch 2017 der Trend anhalten wird.

Fixed Navigation

Fixed Navigation

Moderne Websites arbeiten oft schon mit einer «fixed navigation»: Die Navigation bleibt dabei an einer bestimmten Position auf dem Bildschirm, auch wenn der User weiterscrollt. Manchmal wird das horizontale Menü dann in der Breite reduziert oder nur noch als kleines Icon angezeigt, das wieder ausgeklappt werden kann. Dies wird gerne auch mit anderen Inhalten gemacht, die relevant sind und schnell erreichbar sein sollen.

Microinteractions & Webgraphics

Microinteractions & Webgraphics

Sparsam eingesetzt können Mikrointeraktionen mehr Leben in die Website bringen, z.B. beim interaktiven Übergang zwischen Menüpunkten. Ein einfaches und bekanntes Beispiel für eine «microinteraction» ist das Klicken auf den «Gefällt mir»-Button von Facebook, der mittlerweile auf vielen Websites zu finden ist. Auffälligere «microinteractions» sind z.B. Pop-ups, die zu Kommentaren und zur Teilnahme an Umfragen auffordern. Sehr beliebt sind auch Pop-ups, die zum Eintrag in eine Newsletter-Liste animieren sollen, um eine langfristige Nutzerbindung zu ermöglichen. Hier muss man sich einen Einsatz allerdings genau überlegen, da sich manche Besucher von aufpoppenden Fenstern gestört fühlen könnten.

Auch bei Webgraphics werden interaktive Elemente wie z.B. einfache Scrolling-Effekte immer beliebter. Eher statische Infographiken haben sich also weiterentwickelt. Ein sehr überzeugendes Beispiel dafür ist diese Visualisierung der Speicherkapazität eines iPods.

Fazit

Fazit

Einige Webdesign-Trends der Jahre 2014, 2015 und 2016 werden auch 2017 aktuell sein. Webseiten müssen responsive sein, um alle User an allen mobilen und stationären Geräten zu erreichen, wobei der Fokus nun noch mehr auf «mobile first in responsive design» liegt. Dabei wird eine schnelle Ladezeit in Zukunft noch wichtiger sein als jemals zuvor.

Das interaktive Nutzerverhalten wird weiter unterstützt durch entsprechende Bedienelemente wie «parallax scrolling», «ghost buttons» und «microinteractions».
Bilder spielen zwar eine wichtige Rolle für die User Experience, sollten aber authentisch und individuell sein. Videos werden noch häufiger eingesetzt werden und sowohl auf «klassischen» Websites als auch in den sozialen Medien eine wichtige Rolle spielen.

Moderne Websites überzeugen optisch durch dreidimensionale Elemente wie im «Material Design» oder durch grosse und einfarbige Flächen wie im «Flat Design», werden schnell geladen und sind auf das Wesentliche reduziert.
Die Webdesign-Trends 2017 zeigen noch deutlicher, dass der Besuch einer Website ein echtes Erlebnis für den Internetuser sein muss – und vor allem: ein schnelles.

 

Ist Ihr Webdesign fit?

Planen Sie einen neuen Webauftritt oder benötigt ihre Website ein Redesign? Wir informieren Sie gerne bei einem unverbindlichen Erstgespräch über die vielfältigen Möglichkeiten. Visuell und technisch.

Ihr Ansprechpartner

Alain Zeiter, Geschäftsführer / Partner

Projektanfrage

Weitere Artikel

Erfolg bei der Webanalyse mit Google Analytics, Piwik & Co.

{{link_more_hidden}}

Professionelle und ansprechende Newsletter

{{link_more_hidden}}

Tipps und Tricks zur Optimierung von Landingpages

{{link_more_hidden}}

Erfolg bei der Webanalyse mit Google Analytics, Piwik & Co.

zum Projekt

Professionelle und ansprechende Newsletter

zum Projekt

Tipps und Tricks zur Optimierung von Landingpages

zum Projekt