Wer eine moderne Website gestalten will, sollte sich auch mit aktuellen Webdesign-Trends auseinandersetzen. Denn ein zeitgemäßes Webdesign setzt die passenden Trends gekonnt ein.

Oder sollte man lieber darauf verzichten? Trends sind vergänglich und die Website soll ja auch nach der Hochphase des Trends noch zeitgemäß wirken.
Aber geht das überhaupt?

In diesem Artikel beleuchte ich die wichtigsten Webdesign-Trends der letzten Jahre.

Und (er)kläre, wie und wo ein Einsatz dieser Trends noch sinnvoll sein kann.

Trends – Kombination aus Design & Technik

Trends im Webdesign beschränken sich nicht nur auf Gestaltungsthemen, sondern gehen meistens mit der technischen Umsetzung einher. Möchte man es etwas weiter fassen, dann könnte man auch Marketing-/Kommunikations-Aspekte dazu nehmen.

In diesem Artikel möchte ich mich aber rein auf die Design-Technik-Trends beschränken. Denn diese gehören oft zusammen.

Als beispielsweise vor ein paar Jahren die CSS3-Eigenschaft gradient von den Browsern flächendeckend unterstützt wurden, kamen großflächige Verläufe auf Websites (wieder) in Mode. Man kann daher oft sagen:
Die technischen Möglichkeiten bringen Gestaltungstrends hervor.

So sind in den letzten Jahren einige Trends entstanden. Einige haben ihren Höhepunkt schon hinter sich, andere befinden sich gerade auf diesem.

Den Lebensyzklus eines Trends beschreibt Jonas Hellwig ganz treffend:

Der Webdesign-Trend ist auf seinem Höhepunkt angekommen, wenn Profis sich am Effekt bereits satt gesehen haben, Kunden aber unbedingt genau diesen Stil wünschen. Wenn der Trend seinen Zenit überschritten hat, erfolgt häufig ein krasser Gegentrend. Der Skeomorphismus wurde vom Flat Design abgelöst, abgerundete Ecken vom Metro UI usw.

Sollte man Webdesign-Trends folgen?

Liest man die jährlich erscheinenden Artikel in den Fachblogs zu den kommenden Trends stellt man fest, dass sich diese oft über Jahre gleichen oder „Trends“ erwähnt werden, die eigentlich keine sind wie bspw. „Responsive Webdesign“. Denn „Trend“ klingt – zurecht – wie eine Entwicklung, die wieder verschwinden wird. Und manchmal ist es ja auch gar nicht so einfach: Waren die Verläufe im Webdesign denn überhaupt verschwunden? Sind sie nun zurück? Werden Sie wieder gehen? Oder waren, sind und werden sie nicht einfach nur ein möglicher Bestandteil eines Designs, eine mögliche von mehreren Optionen sein – nicht mehr und nicht weniger.

Und doch: Webdesign-Trends gibt es aus gutem Grund.

Sie beeinflussen das aktuelle Erscheinungsbild vieler Websites. Gerade daher sollte ein Webdesigner wissen, was gerade „angesagt“ ist und diese Entwicklungen beobachen und bei Bedarf auch selber einsetzen können.

Einem Trend zu folgen, heißt ja vor allem auch sich der aktuellen Mode, dem Zeigeist anzupassen. Eine Website, die Trends befolgt, wirkt modern und eckt nicht an. Sie provoziert nicht und fällt nicht aus dem Rahmen – positiv wie negativ nicht.

Ich mag das ungern bewerten.

Einem Trend zu folgen, schafft unter Umständen eine zeitgemäße Website. Es beinhaltet aber irgendwie auch schon, dass die Website in vielleicht schon wenigen Jahren eben gerade deswegen nicht mehr zeitgemäß aussieht. Aber wenige Jahre im Webdesign, in der digitalen Welt, das sind viele Jahre im realen Leben! Und da sich eine Website sowieso ständig weiterentwickeln sollte mit regelmäßigen größeren Relaunches, ja, da lässt sich dann auch die Umsetzung eines Design-„Trends“ nach wenigen Jahren anpassen.

Um beim „Verlaufsbeispiel“ zu bleiben:
Wer heute vermehrt Verläufe auf einer Website einsetzt und in einigen Jahren Verläufe quasi verpönt sind, ja dann kann lässt sich beim Relaunch in drei, vier Jahren wieder auf einfarbige Flächen (oder was sonst gerade angesagt ist) umsteigen.

Denn eine zeitlose Website zu gestalten, dessen Design die nächsten zehn, zwanzig Jahre „überlebt“ – naja, merkt ihr selber…

Der Mehrheit zu folgen, kann für den Webdesigner Sicherheit bringen, dass er nicht zu viel „falsch“ machen kann. Klar, es ist kein kreative Meisterleistung aktuelle Gestaltungstrends zu übernehmen. Aber einen eigenen Stil um- und durchzusetzen (gegenüber dem Kunden) braucht auch Mut (auf beiden Seiten).

Folgend nun der Überblick über die aktuellen Webdesign-Trends:


Aktuelle Webdesign-Trends

Standard-Layouts / Design-Templates

Beginnen möchte ich mit einer Entwicklung, die durch einen veränderten Workflow aufkam. (WordPress-)Themes, Coding-Bibliotheken und Frontend-Frameworks haben dazu geführt, dass Websites oft sehr einheitlich aussehen.

Es hat sich ein Standardlayout durchgesetzt, das viele Websites inzwischen kennzeichnet:

Webdesign Standard Layout

So sind viele moderne Websites aufgebaut:
Eine Website in voller Breite, mit einem Foto- oder Videohintergrund in voller Breite, zentriertem H1-Text und Call-to-Action-Button, die auf dem (emotionalen) Bildmotiv stehen.
Oft auch mit Hamburger-Button auf der rechten Seite (mit einem Overlay-Menü im Vollbildmodus).
Darunter drei Spalten, die jeweils von einem Icon eingeläutet werden und zentriertem kurzem Fließtext. Darunter im Wechsel Parallax-Effekte und/oder sich smooth einblendende Texte usw. und so fort fort.

Was natürlich auf der einen Seite einen Einheitsbrei darstellt, hat sich auf der anderen Seite eben bewährt. Nicht nur, dass die User damit vertraut sind. Diese Layout-Anordnung hat sich ja nicht ohne Grund durchgesetzt.

Sie verfolgt einige Gestaltungsprinzipien, die für eine gute Bedienbarkeit und User Experience sorgen. Z.B. gleich mit einer markanten aussagekräftigen Headline auf einem emotionalen (Hintergund-)Bild anzufangen. Diese Art des Elevator Pitches zeigt dem Besucher gleich, was er auf dieser Site erwarten kann. Es fesselt ihn im besten Falle also zugleich rational (Headline) und emotional (Bild).

Seit einigen Jahren ist dieser visuelle Trend zu einheitliche(re)n Layouts stark zu beobachten.

Und die Design-Templates helfen auch technisch und/oder gestalterisch nicht ganz so Begabten eine zeitgemäße Website zu erstellen. Dazu ist die Umsetzungsdauer (deutlich) schneller, als bei einer individuellen Programmierung.

Die Templates sind also gewissermaßen Fluch und Segen zugleich.
Man könnte noch einige Vor- und Nachteile aufzählen, das soll aber nicht Thema dieses Artikels sein. Auf jeden Fall lassen sich so Wiedererkennung und Individualität schwerer herstellen.

Aber statt es nur als Einheitsbrei zu sehen, könnte man auch sagen, dass der Durchschnitt der Websites in den letzten Jahren wesentlich attraktiver geworden ist – eben auch und vor allem durch diese Templates!

Webdesign Standard Layouts

Sie wirken wie Kopien voneinander – die Webdesign Standard Layouts.

Und das Vorhandensein solcher fertige Design-Lösungen und Trends schließt ja nicht aus, dass du es anders (besser?) machen kannst – ohne Templates.

Tipps für den Einsatz von Design-Templates:

  • Wer eher auf der sicheren Design-Seite sein will, setzt solche Templates ein.
  • Individualtiät ist dann zwar schwieriger herzustellen, aber nicht unmöglich.
  • Umso mehr kommt es auf eine markante, individuelle Farb-, Schrift- und Bildauswahl an.
  • Der Gestaltungs- und Umsetzungs-Aufwand lässt sich mit Templates (enorm) reduzieren.

Aktualtität:
Verbreitung:
Zukunft:

Experimentelle Layouts – Aus dem Raster gefallen

Kein Trend ohne Gegentrend, könnte man hier sagen. Vielen einheitlichen Layouts stehen wenige innovative(re) Designs entgegen. Ja, der Template-Trend ist nicht zwingend. Es gibt noch genügend mutige Webdesigner und experimentelle Layouts.

Die einfachste Methode, um experimentelle(re) Webdesigns zu gestalten, ist es sprichwörtlich aus dem Raster zu fallen. Das Grid bietet Inhalten eine Struktur und Webdesignern einen Rahmen, um ausbalancierte Layouts umzusetzen, die harmonisch wirken.

Einzelne – oder gar mehrere – Elemente aus diesem Raster ragen zu lassen, lockert nicht nur das ganze Design auf, sondern ist ein tolles Mittel, um sich aus dem Einheitsbrei der Websites hervorzuheben.

Experimentelle Webdesign Layouts

Ein gern genommenes Stilmittel, um aus dem Raster zu fallen, sind große Textblöcke. In sehr heller oder sehr dunkler Schriftfarbe und ausreichend Freiraum als Kontrast zu den anderen Inhalten liegen diese zum Teil über Bildern.

Die visuelle Hierarchie wird hierbei oft gestört, bzw. der Lesefluss beeinträchtigt. Bei sehr text- / inhaltslastigen Websites ist das eher ungünstig. Hier ist eine klare Struktur förderlich und notwendig, um Benutzer durch die Seite zu führen und eine klare Inhalts-Hierarchie zu vermitteln.

Für traditionelle Unternehmen, bzw. Unternehmen, die eher klassisch auftreten wollen, werden innovativere Layouts eher weniger eine Alternative sein.

Für alle anderen aber schon. „Experimenteller“ können ja schon kleinere Out of the Box-Elemente sein, die nur dezente Highlights setzen. Der Reiz asymmetrischer Layouts liegt darin, dass sie unverwechselbar, markant und manchmal experimentell sind.

So richtig innovative Websites suchen aber nach neuen Lösungen bzgl. der Inhaltsdarstellung, der Benutzerführung und der Navigation.

Siteinspire Webdesign Layouts

Viele Anregungen für experimentelle(re) Layouts bietet siteinspire.com.

Tipps für den Einsatz von experimentellen Layouts:

  • Schon kleine „Rasterbrecher“ können das Layout aufbrechen und Akzente setzen.
  • Klar festlegen: Soll eine übliche Bedienung und Struktur gegeben sein, dann nur dezente Layout-Experimente wagen.
  • Soll es ein bewusst innovatives Layout werden, dann vorher gut mit dem Kunden besprechen/abstimmen.
  • Sich bewusst sein, dass die Inhaltsaufnahme unter solchen Layouts leiden kann.
  • Und dann: experimentieren und Geduld haben. Denn hier gibt es eben keine Templates, die einen schnell(er) zum Ziel führen.

Aktualtität:
Verbreitung:
Zukunft:

Modulare Denkweise: Patterns und keine Pages

Eine Website ist im Grunde ein System aus vielen unterschiedlichen Einzelteilen. Diese können auf jeder (Unter-)Seite neu zusammengesetzt sein, bleiben aber in ihrem Kern gleich.

Es werden also im Grunde keine fertigen Seiten gestaltet, sondern Systeme mit immer wieder kehrenden Komponenten, also sowas wie Inhalts-/Funktionsbereiche. Im angelsächsischen Sprachraum wird von Patterns gesprochen.

Denn gerade bei größeren umfangreicheren Seiten lässt sich nicht im voraus immer genau festlegen, welches Element wo genau erscheinen wird.

Typische Elemente/Module einer Website wären beispielsweise:

  • Navigationen (Haupt-, Meta-, Footer-Navigaton)
  • Logo
  • Kontaktblock
  • Teaserblöcke (Text mit oder ohne Bild)
  • Slider
  • Bildergalerie
  • Und sonstige Arten von Inhaltsdarstellungen
Modulare Webentwicklung Pattern

Der modulare Aufbau der Microsoft-Website
(Quelle: http://daverupert.com/2013/04/responsive-deliverables)

Gerade bei Websites mit umfangreicheren Inhalten und Seiten und bei Websites, die auf einem CMS beruhen, ist dieser Ansatz sehr sinnvoll. Denn hier wird selten jede einzelne Seite „durchdesignt“.

Sinniger ist es hier eben solch einzelne Module unabhängig von einander zu gestalten, die dann flexibel eingesetzt und angeordnet werden können.

Frontend-Styleguides dokumentieren dann diese Module mit Beispielen und den entsprechenden Codes.

Frontend-Styleguides

Beispiel für einen Frontend-Styleguide, https://lightningdesignsystem.com

Brad Frost sorgte schon 2013 für Aufsehen mit seinem Artikel Atomic Design, in dem er diese Vorgehensweise bekannt machte.

Atomic Design

Nach dem Prinzip des Atomic Designs sind die Seiten aus einzelnen Elementen, den Atomen, zusammengesetzt.
(Quelle: http://bradfrost.com/blog/post/atomic-web-design)

Tipps für den Einsatz von modularen Layouts:

  • Kurz gesagt geht es darum keine vollständigen Seiten mehr zu entwerfen, sondern einzelne Module.
  • Bei größeren umfangreichern Websites ist dieses Vorgehen vorteilhaft, fast zwingend.
  • Ebenso bei CMS-gestützten Websites.
  • Nicht mal eben so damit beginnen, sondern vorher gut mit dieser (neuen) Art des Ablaufs auseinandersetzen.

Jens Grochtdreis hat zur modularen Webentwicklung eine ausführliche Anleitung geschrieben: Erst lesen, dann modular arbeiten!

Aktualtität:
Verbreitung:
Zukunft:

Card Design

Durch die Denkweise die Inhalte als Module zu betrachten, ergeben sich im Grunde viele einzelnen Blöcke, die variabel angeordnet werden können.

Diese Blöcke können natürlich auch optisch als solche gestaltet werden, so dass klar ist, dass dies eine optische und inhaltliche Einheit ist.

Diese Design-Entwicklung nennt man Card-Design. Die Blöcke/Module werden wie einzelne „Karten“ gestaltet. Vorstellbar wie „Spielkarten“ auf einem Tisch, die sich beliebig verschieben und neu anordnen lassen.

Durch das Card Design werden die Informationsblöcke sauber getrennt und übersichtlich dargestellt.

Card Design

Typisches Card Design bei dribbble.com und awwwards.com/blog.

Tipps für den Einsatz von Card Designs:

  • Ist der Block ein Hinweis auf eine Unterseite, sollte der komplette Block verlinkt sein.
  • Bei Websites mit vielen Informationseinheiten lohnt sich die optische Gestaltung als Cards.

Aktualtität:
Verbreitung:
Zukunft:

Mobile First

Das Web ist mobil geworden. Und es wird nicht mehr „stationär“ werden. Insofern bewegen wir uns erst am Anfang der mobilen Entwicklung und – wenn man den Prognosen trauen darf – größeren Umwälzungen in vielerlei Hinsicht, die vermutlich auch das Webdesign und die Webentwicklung verändern wird.

Spätestens aber nach den letzten Google Updates sollte jedem klar sein: Eine Website sollte nicht „irgendwie auch“ mobil sein, sie sollte zuerst mobil sein!

Dank des responsiven Webdesigns ist und sollte eine Website für alle möglichen Ausgabegeräte anpassungsfähig sein. Von kleinen Ausgabegeräten wie auf (älteren) Smartphones oder Smart Watches bis zu großen Bildschirmen, die eher Leinwänden gleichkommen.

Sicher, von Website zu Website, mag die mobile Nutzungsintensität noch sehr unterschiedlich sein. Eine Beachtung des mobile first-Prinzips hat aber einige Vorteile. Der Pagespeed und die Konzentration auf die wirklich wichtigen Inhalte sind nur zwei der bedeutendsten.

Mobile first – Webdesign Trend

Beim Mobile first-Prinzip wird zuerst für „kleine“ Geräte und Auflösungen optimiert und dann nach und nach für größere.

Tipps für den Einsatz von mobile first-Websites:

  • Gekommen, um zu bleiben: Mit dem mobile first-Ansatz auf jeden Fall auseinander setzen. Selbst wenn es nicht im nächsten Projekte zum Einsatz kommt, verschiedene Ansätze werden dir auch jetzt schon hilfreich sein.
  • Ladezeit, Inhaltsdarstellung, Navigationsmöglichkeiten, Interaktionen – vieles ist mobil (deutlich) anders als stationär.
  • Was auf kleinen Bildschirmen funktioniert, läuft meistens auch auf größeren gut.

Aktualtität:
Verbreitung:
Zukunft:

„Aggressive“ Pop-ups

Oh ja, sie nerven uns alle: Diese uns anspringenden Info-Boxen aller Art: Mal wollen Sie uns einen Newsletter andrehen (haha, ja, auch auf dieser Seite hier, aber der lohnt sich, wirklich!), mal wird nach Cookies gefragt, mal nach …

Am störendsten sind die ganzseitigen Pop-ups, an denen man gar nicht vorbei kann. Hier musst du irgendwas anklicken.

Warum Pop-ups so penetrant sind? Man orientiert sich gerade auf der Website oder hat sich schon zurecht gefunden und will etwas lesen und dann … Bäähhmmm.

Erscheint eine „Info“, die man so nicht wollte.

Sie leuchtet nicht nur am Rand einer Website und von uns schon geistig automatisch ausgeblendet – wie ein Werbebanner. Nein, ein Pop-up beraubt uns unserer Aufmerksamkeit, lenkt ab und zwingt uns zu einer Handlung.

Pop-ups Webdesign

Ein vollflächiges Pop-up lässt die Seite nicht weiter bedienen. Es muss geklickt werden – in diesem Beispiel alles für einen kostenlosen Font zum Download… Wow!

Viel abwertender kann man mit seinen Website-Besuchern eigentlich gar nicht umgehen. Und doch: Immer mehr Websites setzen auf Pop-ups.

Warum? Vermutlich weil der Erfolg ihnen recht gibt.

Erfolg? Soweit er sich messen lässt, also z.B. werden die Abonnentenzahlen für einen Newsletter erhöht. Besucher, die vorher nicht auf den Newsletter aufmerksam geworden wären, abonnieren diesen nun. Und wenn es nur wenige Prozent von denen sind, die das Newsletter-Pop-up zu Gesicht bekommen haben, kann es sich sehr schnell lohnen.

Es soll wohl sogar Studien geben, die den Erfolg von Pop-ups bestätigen.

Was sich halt schlechter messen lässt: Wie genervt der Besucher von dem Pop-up ist. Und das die User Experience darunter leidet. Unwahrscheinlich, dass viele Besucher die Website gleich verlassen, sobald ein Pop-up erscheint. Aber genervt sind sie…

Tipps für den Einsatz von Pop-Ups:

  • Wenn es geht, besser darauf verzichten, bzw. sparsam einsetzen. Ein Pop-up mindert eigentlich immer die Benutzerfreundlichkeit.
  • Wenn du jedoch ein so tolles Angebot hast, das du deinen Besuchern einen enormen Mehrwert bringt, dann nutze sie und werte den „Erfolg“ aus.
  • Wenn schon, dann besser „dezentere“ Pop-ups einsetzen, als ganzflächige (für diese Variante habe ich mich auch entschieden. Die Konversionsrate des Pop-ups hat mich überzeugt, es am unteren rechten Rand eingeblendet zu lassen).
  • Liefere einen Grund für dein Pop-up! Ein einfaches „Newsletter abonnieren“ ist keine ausreichende Begründung. Erkläre die Vorteile für den User.
  • Und mache das Schließen des Pop-ups einfach, also kein kleines verstecktes „X“, sondern groß und offensichtlich. Wenn der User kein Interesse hat, dann hat er keines!

Aktualtität:
Verbreitung:
Zukunft:

Responsive Logos

Klar, bezüglich responsiven Webdesigns könnte man viele unterschiedliche Aspekte als „Trend“ hier einzeln auflisten. Exemplarisch sollen die responsiven Logos stehen. Ein Unternehmenslogo ist ja an sich eine „empfindliche“ Stelle. Im Design-Styleguide festgezurrt – Abstände, Größen usw. fix vorgegeben und wehe dem, der davon abweicht.

Responsive Logo heißt aber nicht nur, Logos bei kleineren Bildschirm-Auflösungen entsprechend kleiner darzustellen. So flexibel wie Websites werden langsam auch die Unternehmen und ihre Designs. Anpassungsfähig an das Medium.

Responsive Logos heißt bei Bedarf eben auch nur eine angepasste Logo-Variante anzuzeigen. Also unter Umständen eben nicht mehr das komplette Logo.

Responsive Logos

Responsive Logos wie sie auf der Website responsivelogos.co.uk demonstriert werden.

Tipps für den Einsatz responsiver Logos:

  • Überprüfen, ob ein skalierbares Logo überhaupt benötigt wird.
  • Ein responsives Logo zu schaffen, ist keine Sache des Webentwicklers (Wuaaahhhh, Entwickler, die gestalten…), sondern Sache eines Designers.
  • Mit dem Unternehmen zuerst klären, ob ein responsives Logo überhaupt möglich/gewünscht ist.

Aktualtität:
Verbreitung:
Zukunft:

Ein Hamburger Menü auf dem Schreibtisch

Ein Trend, der sich von mobilen Versionen auf die größeren Auflösungen ausgebreitet hat: Die Navigation hinter einem Hamburger Icon zu “verstecken“.

Auf mobilen Geräten ist das Hamburger Menü ja sehr sinnvoll. Um Platz zu sparen, werden die Menüpunkte nicht einzeln angezeigt, sondern erst nach Klick auf das drei-strichige-Icon, dessen Bedeutung inzwischen auch der letzte User gelernt haben sollte.

Hamburger Icon Mobil

Und was mobil gut funktioniert, muss auch bei Desktop-Varianten funktionieren – dachten sich wohl ein paar findige Designer. Und schwups, schon ist das Icon auf vielen Webseiten und zwar immer, egal bei welcher Auflösung.

Klar, es macht eine Website schlanker, großzügiger, wenn viele kleine Navigationspunkte nicht angezeigt werden müssen. Das lässt mehr Raum für die wesentlicheren Inhalte.

Äh, Moment, die „wesentlicheren“? Was ist denn wesentlicher für die Bedienung einer Website als die Hautpnavigation? Überall da, wo genügend Raum vorhanden wäre, alle Navigationspunkte anzuzeigen, ist das Hamburger Icon für die Usability einer Website ungünstig.

Hamburger Icon Desktop

Das Hamburger Icon im Einsatz auf Desktop-Websites, obwohl genug Raum für einzelne Navigationspunkte vorhanden wäre.

Tipps für den Einsatz von Hamburger Menüs:

  • Auf Desktop-Varianten weglassen!
  • Oder zumindest gute Gründe dafür finden, warum es hier eingesetzt werden sollte.

Aktualtität:
Verbreitung:
Zukunft:

Experimentelle Navigation

Das Thema passt zu den Standard-Layouts vs. Experimentelle Layouts. Der Klassiker ist ja folgender: Die Hauptnavigation steht oben rechts. Evtl. darüber noch dezenter eine Metanavigation. Soweit bewährt und konventionell. Das kennen die User, da finden sie sich schnell zurecht.

Immer häufiger erscheinen aber in den letzten Jahren experimentelle Navigationsmuster, die komplett mit dieser klassischen Navigation brechen und innovativere Wege der Navigation begehen.

Solche Experimente können natürlich sehr reizvoll sein und spielerisch den User „herausfordern“ und die Interaktion verstärken. Dazu müssen Sie aber auch intuitiv bedienbar sein, denn ansonsten leidet die Benutzerfreundlichkeit oder – im schlimmsten Falle – weiß der User gar nicht mehr, wo und wie er navigieren soll.

Daher werden diese Navigationen eher bei innovativeren Themen/Projekten eingesetzt, bei denen es nicht so sehr auf die klassische Inhaltsaufnahme ankommt.

Experimentelle Navigationen im Webdesign

Experimentelle Navigationen im Webdesign, wie hier bei hawraf.com und badesaison.ch.

Tipps für den Einsatz experimenteller Navigationen:

  • Nur einsetzen, wenn Thema und Zielgruppe dies zulassen.
  • Versuchen trotzdem noch eine intuitive Bedienung zu ermöglichen.

Aktualtität:
Verbreitung:
Zukunft:

Startseiten-Slider/-Karussels

Zum Glück sind sie fast wieder verschwunden: Die Startseitenslider. Es ist noch gar nicht so lange her, da wollte jeder Kunde diese auf der Startseite haben. Klar, auf einmal war die Gelenheit dar, so viele wichtige Informationen gleich prominent als erstes auf der Startseite zu erzählen.

Das Problem war nur: Keiner schaute sich die Slider an.

Das, was man an sich selber gut beobachten konnte, haben auch Studien belegt. Daher heißt es nun in der Nach-Startseiten-Slider-Ära die Inhalte zu gewichten. Nicht mehr alles ist wichtig und wird in Slides gepackt, sondern Schwerpunkte zu schaffen.

Nach wie vor sind Slider – ob auf der Startseite oder an anderer Stelle – mit Vorsicht zu genießen. Zu wenige klicken sich durch die Slides.

Meistens wird, wenn überhaupt, nur der erste Slide angeklickt. Der Anreiz muss schon sehr groß sein, die folgenden Slides-Inhalte auch sehen zu wollen.

Bilder-Slider sind da schon eher im Einsatz und werden auch genutzt. Beispielsweise auf Sport-Seiten Fotos des letzten Spiels zu zeigen. Oder eine Bildergalerie aller Fußball-WM-Teilnehmer. Hier klickt man sich schon eher durch, und ist als Besucher evtl. auch „glücklicher“, als wenn die Bilder alle untereinander im Inhaltsbereich stehen würden.

Header Slider – Webdesign Trends

Der Header Slider – zum Gülck verschwindet er nach und nach von Unternehmens-Websites.

Tipps für den Einsatz von Slider:

  • Auf Inhalts-Slider verzichten.
  • Als Alternative für Bildergalerien kann es sinnvoll sein.
  • Wenn sie eingesetzt werden, die Klickraten kontrollieren und daraus Schlüsse ziehen.

Aktualtität:
Verbreitung:
Zukunft:

Parallax Scrolling

Was wäre eine moderne Website ohne Parallax. Ich kann mich gut erinnern, wie wir vor den ersten Parallax-Seiten saßen und, ob der „Dreidimensionalität“ staunten. Haha, ok, die Aufregung hat sich inzwischen gelegt…

Dank der Parallaxtechnik werden Vordergrund- und Hintergrundinhalte mit unterschiedlichen Geschwindigkeiten gescrollt. Dadurch entsteht die Illusion von Tiefe. Und es bringt eben gefühlte „Lebendigkeit“ auf die Website.

Auch heute werden Parallaxeffekt noch gerne eingesetzt und haben sich bei den modernen Layouts und Templates (siehe Punkt 3.1 Standard-Layouts / Design-Templates) etabliert.

Websites mit Parallaxeffekt wirken sicherlich unterhaltsamer, die Gefahr besteht aber, dass die Ablenkung zu groß wird.

Und bei Smartphones wird der Effekt unbedeutend, bzw. störend aufgrund der kleineren Fläche.

Parallax Scrolling Effect Webdesign

Der Parallax Scrolling Effekt

Tipps für den Einsatz von Parallax Scrolling:

  • Einfache Möglichkeit die Website interessanter zu gestalten.
  • Übermäßiger Einsatz lenkt zu sehr ab, irritiert.
  • Kann die Wahrnehmung der Inhalte beeinträchtigen, daher nicht bei/unter relevanten Inhalten einsetzen.

Aktualtität:
Verbreitung:
Zukunft:

Long-Pager / Scrolling

Es gibt einen klaren Trend zu inhaltlich umfangreicheren Seiten. Also statt mehrere inhaltlich kürzere Seiten zu erstellen, wird eine längere eingesetzt.

Ein Hauptgrund liegt darin, dass User allgemein lieber scrollen (wollen), anstatt auf die nächsten Seiten zu klicken, was eine deutliche größere kognitive Anstrengung bedeuten würde (Wo muss ich klicken, was erwartet mich da, lohnt sich der Klick, welche der Navigationspunkte klicke ich überhaupt an?)

Lange galt der Grundsatz, das wichtige Inhalte „above the fold“ erscheinen sollten, also unmittelbar ohne scrollen sichtbar sein sollten. Von diesem „Mythos“ ist man inzwischen abgerückt.

Längere umfangreichere Inhalte ermöglichen dem Designer auch mehr Gestaltungsspielraum. Teilweise geht es dann schon in „Storytelling“ über, so dass die Inhalte beim Scrollen quasi einem roten Faden folgen.

Long Pager Webdesign

Der Trend geht zu längeren Seiten im Webdesign.

Tipps für den Einsatz von Long-Pagern:

  • Gut überprüfen, ob die Inhalte wirklich auf eine Seite passen oder doch besser in mehrere unterteilt werden sollten.
  • Es muss eindeutig verständlich sein, wo sich die gesuchten Inhalte befinden. Ein Long-Pager bringt nichts, wenn der Besucher die gesuchten Inhalte dort nicht erwartet, also gar nicht erst weit(er) scrollt.
  • Zwei weitere Effekte werden bei Long Pagern gerne ergänzt, um die Bedienbarkeit deutlich zu erhöhen: Die Fixed Navigation (siehe Punkt 3.14) und ein „nach oben“-Link/Button.

Aktualtität:
Verbreitung:
Zukunft:

Infinite Scrolling

Ist der User am Ende einer Seite angelangt, dann werden weitere Inhalte automatisch nachgeladen – dieses Prinzip nennt sich Infinite Scrolling.

Das unendliche Scrollen ist schnell und benutzerfreundlich, denn der User muss nicht klicken, um weitere Inhalte zu sehen. Und es wird keine neue Seite geladen.

Seiten wie Pinterest und Facebook setzen dieses Prinzip ein. Hier geht es um viele Inhalte, die der Besucher in schneller Abfolge sehen will/soll.

Die Schwierigkeit besteht bei dieser Methode darin, sich noch orientieren zu können oder später einmal bestimmte Inhalte wiederzufinden. Denn nach langem Scrollen sind die Seiten seeehr lang und umfangreich geworden.

Infinite Scrolling Webdesign

Infinite Scrolling im Webdesign, wie hier am Beispiel von pinterest.de.

Tipps für den Einsatz von Infinite Scrolling:

  • Infinite Scrolling kann die Benutzerfreundlichkeit stark erhöhen.
  • Sinnvoll ist der Einsatz aber nur auf Seiten, mit unglaublich großem Informationsumfang.
  • Selbst bei Blogs, wo man weitere Artikelvorschauen nachladen könnte, ist der Einsatz schon kritisch, da der User nur schwer noch den Überblick behalten kann.

Aktualtität:
Verbreitung:
Zukunft:

Fixed Navigation

Ein typischer Bestandteil der modernen Standard-Layouts ist die fixe Navigation, die am oberen Browserrand auch während des Scrollens stehen bleibt. Sie wird also nicht weggescrollt, sondern ist immer sichtbar.

Manchmal verringert sich die Höhe der Navigation beim ersten Scrollen. Logo und Navigationspunkte bleiben aber stehen und sind so jederzeit erreichbar.

Da einzelne Seiten immer länger/umfangreicher werden, liegt der Vorteil klar auf der Hand: Die User können sich schnell neu orientieren, müssen nicht erst wieder ganz nach oben zur Hauptnavigation scrollen, um weitere Unterseiten besuchen zu können.

Als Nachteil könnte man es sehen, dass durch die fixe Navigation am oberen Rand immer ein paar Pixel „reserviert“ sind, die eben nicht für andere Inhalte zur Verfügung stehen.

Und die Navigation ist dann eben immer Bestandteil des Screendesigns. Also selbst wenn man sich Mühe gemacht hat mit der Gestaltung der Inhalte, oben drüber steht immer die Navigation.

Fixed Navigation Webdesign Trend

Wird häufig eingesetzt: Die Navigationsleiste bleibt am oberen Browserrand fix stehen, wie hier bei 99u.com.

Tipps für den Einsatz von Fixed Navigations:

  • Die Navigation ist immer präsent, was viele User mögen.
  • Gerade bei inhaltlich längeren Seiten wird die Usability erhöht.
  • Bei eher kurzen Seiten liefert die Methode eher keinen Mehrwert.

Aktualtität:
Verbreitung:
Zukunft:

Hero-Bilder / großformatige Bilder / Video Backgrounds

Kaum eine moderne Website, die nicht zuerst ein großformatiges Bild präsentiert.

Die Templates unterstützen diesen Trend, indem sie Platzhalter und umfangreiche Gestaltungsmöglichkeiten für solche Bilder bereithalten.

Im Grunde wird hier ein bisschen die Wirkung einer Werbeanzeige übernommen: Emotionales Bild plus rationaler Text, die sich im Idealfall gegenseitig ergänzen und verstärken.

Da wir von Textinhalten überflutet und oft schon übersättigt sind, sind Bilder „schnelle Schüsse ins Gehirn“. Dazu wirken sie emotional, während ein Text erst lange erklären muss.

Manchmal werden statt Hero-Bilder auch (kurze) Videosequenzen im Hintergrund abgespielt, die der Seite natürlich noch eine ganz andere Lebendigkeit vermitteln und unterhaltsamer sind als ein statisches Bild.

Nicht nur im oberen Bereich einer Website kommen die großformatigen Bilder zum Einsatz, auch im weiteren Inhaltsbereich findet sich diese immer häufiger.

hero Bilder Webdesign Trend

Großformatige Bilder im Header der Startseite erscheinen auf sehr vielen Websites.

Tipps für den Einsatz von großformatigen Bildern:

  • Ein gut gelungenes großformatiges Bild kann eine tolle Wirkung erzeugen.
  • Standard-/Klischeebilder eher nicht.
  • Auf das Datenvolumen und die Ladezeit achten. Zu große/zu viele großformatige Bilder wirken sich hier negativ aus.
  • Videos beeinträchtigen umso mehr die Ladezeit.
  • Sollte das Video dann nur im Hintergrund eingesetzt werden und gar nicht den Hauptinhalt darstellen, ist das beanspruchte Datenvolumen umso kritischer zu sehen.
  • Der Einsatz von (Hintergrund-)Videos lenkt stark von den eigentlich relevanten Inhalten ab.

Damit das Dateivolumen bei (mehreren) großformatigen Bildern nicht zu hoch wird, sollten diese optimiert werden. Hierbei hilft die Anleitung Bilder optimieren fürs Web.

Aktualtität:
Verbreitung:
Zukunft:

Spilt-Screen Design

Ein noch recht junger Trend ist die Teilung des Bildschirms in zwei vertikale Hälften, was wie zwei Seiten eines Magazins wirken kann.

Da es für diese Gestaltungstechnik keinen Standard gibt, sind die Umsetzungsarten sehr unterschiedlich.

Manchmal steht in der einen Hälfte die aktuellen Navigationspunkte optisch hübsch ausgestaltet. Und in der anderen Hälfte dann die Inhalte.

Oder – ähnlich einer Werbeanzeige – präsentiert die eine Seite ein großformatiges Bild und die andere erklärenden Text.

Split Screen Webdesign Trend

Der Split Screen Webdesign Trend, wie hier bei denkwerk.com und renaterechner.at.

Tipps für den Einsatz von gesplitteten Bildschirmen:

  • Die Möglichkeiten/Ideen sind hier enorm, so dass es schwierig ist, eine zu finden, die zu den Inhalten passt UND bei der die Benutzerführung nicht leidet.
  • Passt generell eher auch zu innovativeren Themen/Projekten.
  • Eine minimalistische Gestaltung der Inhalte kann helfen, die User bei diesem Nutzungskonzept nicht zu überfordern.
  • Was bei größeren Bildschirmen gut funktioniert, wird bei kleineren Auflösungen eventuell schnell kritisch, weil sich die Inhalte nicht mehr passend nebeneinander, sondern untereinander anordnen.

Aktualtität:
Verbreitung:
Zukunft:

Non-Rectangular Headers

Ein notwendiges „Übel“ der Webgestaltung ist die Rechteckform, die sich aus den HTML-Containern zwangsläufig ergibt – Kästchen, Rechtecke überall.

Lange war es nur möglich, diese „Rechteckigkeit“ mit Hilfe von Bildern zu umgehen. Dank CSS3 und SVGs gibt es nun aber neue Möglichkeiten und dieser werden immer wieder gerne genutzt.

Gerade für die Gestaltung eines aufmerksamkeitsstarken Headers ist die Abkehr von der geraden horizontalen Kante eine tolle Möglichkeit sich visuell abzuheben.

Non Rectangular Headers Webdesign Ttrend

Es muss nicht immer horizontal sein – so kommt dann auch Spannung ins Webdesign.

Tipps für den Einsatz von Non-Rectangular Headers:

  • Vertikale und horizontale Linien lenken den User und geben dem Design Orientierung und Stabilität.
  • Daher Non-Rectangular Headers nur mit Bedacht einsetzen. Also, nicht noch vermehrt weitere Inhaltsbereiche damit ausgestalten.

Creating Non-Rectangular Headers ist eine umfangreiche Anleitung über verschiedene Möglichkeiten Non-Rectangular Headers zu erstellen.

Aktualtität:
Verbreitung:
Zukunft:

Animationen & Microinteractions

Früher sorgten Flash-Animationen für Unterhaltung und Effekte auf Websites. Als diese Technologie aus der Mode kam, waren auch Animationen größtenteils verschwunden. Dann kamen langsam die JavaScript-Bibliotheken wie jQuery auf und mit Ihnen auch wieder Bewegung. Inzwischen lassen sich schon mit CSS3 schöne Effekte erzielen.

Animation Illustration Webdesign Trend

Auch große Animationen von Illustrationen lassen sich, z.B. mit JavaScript und SVGs gut umsetzen.

Inzwischen sind Animationen von modernen Websites kaum mehr wegzudenken. Das müssen gar nicht groß animierte Abläufe sein, oft sind es nur kleinere Effekte, die aber für die Benutzerführung einen tollen Effekt haben.

Gern genommen sind hover-Animationen, die bei Mouseover über ein Element ablaufen. Das kann ein einfacher Farbwechsel sein, der dann leicht animiert abläuft und nicht mehr schnell und hart.

Oder das mobile Menü, das bei Klick auf das Hamburger Icon „herein geflogen“ kommt.

Oder Textblöcke und Bilder, die sich beim scrollen erst smooth einblenden, sobald sie in den sichtbaren Bereich kommen.

Teilweise werden die Animationen auch „Microinteractions“ genannt. Also dezente Effekte, die die User Experience erhöhen, indem Sie dem Benutzer die Bedienung vereinfachen.

Animation Webdesign Trend

Mit kleineren dezenten Animationen lässt sich die User Experience steigern.

Tipps für den Einsatz von Animationen & Microinteractions:

  • Microinteractions erhöhen die Benutzerfreundlichkeit überall da, wo der User mit der Seite interagieren kann und dort sollten sie auch zum Einsatz kommen, z.B. Navigation, Links, Buttons, Formulare.
  • Dezente, kleine Animationen reichen hier aus.
  • „Größere“ Animationen sollten mit Bedacht eingesetzt werden. Z.B. sind die Slider, bei denen Bilder und Texte unterschiedlich animiert werden, oft schon zu viel Effekt.
  • Dagegen kann dezentes ein- und ausblenden von Inhalten auch die Benutzungserfahrung erhöhen.

Aktualtität:
Verbreitung:
Zukunft:

Animierte GIF-Bilder

Sie waren ja eigentlich schon verschwunden: GIF-Bilder. Dank der sozialen Medien sind sie wieder zurück, stärker als je zuvor.

Kleine animierte Sequenzen, die in den sozialen Netzwerken kurze Ausschnitte oder Loops von Filmen oder Videos zeigen.

Animated GIFs

Genau, dank animierter GIF-Bilder kann man schon mal ausflippen…

Wie eine Animation, so fällt auch ein GIF-Bild aufgrund der Bewegung sofort ins Auge. Und das GIF-Format braucht auch nicht viel Speicherplatz.

Tipps für den Einsatz von GIF-Bildern:

  • Für sehr kurze (fotorealistische) Animationen sind GIF-Bilder gut geeignet.
  • Da sich ein GIF-Bild nicht stoppen lässt, kann es schnell nerven. Daher nur gezielt einsetzen.

Aktualtität:
Verbreitung:
Zukunft:

Responsive Webdesign Animated GIF

Einfacher lässt es sich kaum erklären. Animated GIFs eigenen sich gut, um bestimmte Sachverhalte zu verdeutlichen.

Erst Flat-Design, dann Material Design

Vor einigen Jahren kam das sogenannte Flat-Design auf. Nach Jahren des Skeuomorphismus mit seinen realitätsnahen Designs wurden die Elemente wieder deutlich reduzierter. Keine Schatten, keine Verläufe, keine Texturen, keine Verzierungen – nur noch schlichte einfarbige Flächen blieben am Ende übrig.

Das Flat Design folgte einer minimalistischen Entwicklung, bei der schlichte Ästhetik angesagt war. Gleichzeitig war der Vorteil, dass sich die Ladezeit der Websites reduzierte, da auf aufwendige Bilder verzichtet wurde.

Skeuomorphismus Flat Design – Webdsign Trends

Der Unterschied zwischen Skeuomorphismus und Flat Design: vom realistischen Design zum flachen minimalistischen Design.

Dann kam das sogenannte Material Design auf. Auch hier sind große einfarbige Flächen sehr präsent, aber es kamen wieder (dezente) Schatteneffekte und Verläufe dazu. Ebenso wie die oben beschriebene Microinteractions.

Die dadurch erreichte Tiefenwirkung erhöht die User-Experience.

Viele Frameworks und Templates haben das Flat und/oder Material-Design auch als Vorbild.

Material Design – Webdesign Trends

Material Design: Ähnlich wie Flat Design, aber wieder mit mehr „Tiefe“ durch bspw. Schatten und Verläufe, dazu noch Animationen.

Tipps für den Einsatz von Material Design:

  • Schatten, Verläufe und Microinteractions sind (oft) Bestandteil einer modernen Website.
  • Dezent eingesetzt, kann man damit nicht viel falsch machen.
  • Baut man seine Website nach dem Material Design-Prinzip auf, hat man eine moderne Gestaltung, hebt sich aber dadurch auch nicht besonders ab.

Aktualtität:
Verbreitung:
Zukunft:

Minimalismus

Flat Design wurde eben schon als minimalistisches Design beschrieben. Man kann es aber noch weiter treiben, indem auch schon Farbflächen als „zu viel“ angesehen werden.

Das Weglassen (fast) aller (Gestaltungs-)Elemente, bis nur noch das Wichtigste übrig bleibt: Es zwingt einen, klare (inhaltliche) Prioritäten zu setzen.

Minimalistische Designs lenken nicht vom Inhalt ab, sondern sie unterstützen diesen. Dazu ist die Ladezeit bei minimalistischen Websites sehr gut, da keine unnötigen Elemente und Codes geladen werden müssen.

Das Mobile First“-Prinzip unterstützt daher den minimalistischen Ansatz.

Minimalismus Webdesign Trend

Minimalismus im Webdesign.

Tipps für den Einsatz von minimalistischen Designs:

  • Was einfach klingt, ist oft sehr schwierig: „Reduce to the max“.
  • Wenn man alles „Unwichtige“ weglässt, erlaubt das Design keine „Unsauberkeiten“, da sich nichts mehr durch „überflüssige“ Gestaltung kaschieren lässt.
  • Bei Kundenprojekten zuerst das „ok“ einholen. Nicht selten, dass diese sich „mehr Gestaltung“ wünschen, wenn sie eine minimalistische Website ansehen.

Aktualtität:
Verbreitung:
Zukunft:

Web Brutalism

Kein Trend ohne Gegentrend könnte man meinen, wenn man sich die brutalistischen Websites anschaut. Statt auf cleane, schicke, morderne Designs zu setzen, geht hier die Entwicklung quasi „back to the roots“:

Design-Elemente der 90er kommen bei diesem Gestaltungstrend zurück. Klar, der erste Gedanke wäre: wie häßlich…

Und gerade darin liegt für manchen Betrachter die Schönheit. Es vergleichbar mit der Architektur, an die sich der Name anlehnt: Brutalism meint in etwa roher Beton, im Volksmund Betonbauten genannt. Also Gebäude, die nicht künstlich verschönert werden durch besondere Fassaden und weiterer schmückender Elemente, sondern sich in ihrer puren Form mit ihren reinen Materialien präsentieren.

Eine brutalistische Website erscheint auch oft „roh“, reduziert, wenig Gestaltungselemente, kaum CSS-Gestaltung.

Brutalist Websites – Webdesign Trends

Brutalistische Websites, eine große Auswahl findet sich unter brutalistwebsites.com.

Tipps für den Einsatz von brutalistischen Webdesigns:

  • Einsatz eigentlich nur bei „kreativen“ Themen sinnvoll. Daher sind brutalistische Websites oft Portfolios von Designern.
  • Wer also gegen den aktuellen Gestaltungstrend sein will, findet hier eine Alternative (die inzwischen aber auch schon fast wieder als Trend zu verzeichnen ist).
  • Oft sind brutalistische Websites schwierig zu bedienen, da die Navigationselement nicht eindeutig/intuitiv erkennbar sind.
  • Wer aber nur teilweise „anders“ sein will, findet im brutalistischen Design zumindest Anregungen.

Aktualtität:
Verbreitung:
Zukunft:

Stockfotos

Bildern sind emotional und gehören daher eigentlich auf (fast) jede Website. Erste Anlaufstelle dabei: Stockfoto-Agenturen.

Die Auswahl ist hier beinahe unendlich. Bilder in Quantität und Qualität, die man so selber kaum umsetzen in der Lage wäre – und schon gar nicht zu den Preisen der Stock-Agenturen.

Für viele Einsatzzwecke sind die Stockbilder absolut in Ordnung. Das Problem dabei ist meisten nur: Stockbilder sehen eben aus wie Stockbilder!
Extrem gekünstelt, „überprofessionell“ – direkter ausgedrückt: wie austauschbare Klischeeebilder.

Stockfoto Webdesign Trend

Typisches Stockfoto. Typ Modell sieht in unterschiedlichen Posen immer extrem freundlich und gut gelaunt aus.

Tipps für den Einsatz von Stockfotos:

  • Klar, Stockfotos haben nicht den besten Ruf.
  • Nicht immer sind Stockfotos aber schlecht.
  • Bei bestimmten Einsatzzwecken (z.B. kleine unterstützende Artikelfotos in News-Portalen) sind sie definitiv wirtschaftlicher als eigene Fotos zu machen.
  • Oder bei mangelndem Budget für einen Fotografen können sie eine sinnvolle Alternative sein.

Mehr zu Stockfotos gibt es im Artikel Klischeebilder.

Aktualtität:
Verbreitung:
Zukunft:

Authentische Fotografie

Wer nicht in die „Stockfoto-Falle“ tappen möchte, sollte eigene authentische Fotos erstellen, die „echte“ Menschen in „echten“ Situationen zeigen und nicht diese gekünstelten.

Klar, dafür braucht es ein nicht zu knappes Budget.

Individuelle Bilder – Webdesign Trends

Individuelle Bilder – Webdesign Trends

Individuelle Bilder wirken natürlich authentischer als die üblichen Stockfotos.

Tipps für den Einsatz authentischer Fotografien:

  • Individuelle Fotos sind immer Stockfotos vorzuziehen.
  • Klar ist: der Aufwand eigene und professionelle Fotos zu erstellen ist deutlich größer, als Stockfotos in den Portalen zu suchen.
  • Sollte man sich aber dafür entscheiden, dann einen professionellen Fotografen wählen.

Mehr Anregungen zu individuellen Bildideen findest du im Artikel über individuelle Bildmotive.

Aktualtität:
Verbreitung:
Zukunft:

Monochrome Icons & Illustrationen im Flat Look

Zusammen mit dem Flat-Design sind zwei Arten von Icons aufgekommen:

Die einfarbigen „Strich-“Icons und die schlichten aus wenigen Farbflächen bestehenden Icons.

Kaum ein modernes Template, dass nicht die monochromen Icons im Repertoire hat.

Monochrome Icons – Webdesign Trrends

Typische monochrome Icons & Icons im Flat-Stil.

Tipps für den Einsatz monochromer Icons:

  • Diese Art der Icons sind die Stockfotos unter den Illustrationen. „Kurzweilig“ und Standard – eben ein Einheitslook.
  • Sie lassen sich bei sehr vielen Website-Themen einsetzen, Akzente setzt man damit aber weniger.
  • Vorlagen gibt es für die Art der Icons genug, so dass man hier auch nicht besonders kreativ werden muss.

Aktualtität:
Verbreitung:
Zukunft:

Individuelle Illustrationen

Nicht nur mit individuellen Fotos kann man dem allgemeinen Stockfoto-Trend entgegentreten – mit individuellen Illustrationen kann man den Standard-Icons und -Illustrationen entkommen.

Individuelle Illustrationen helfen dabei, eine eigene visuelle Sprache zu erzeugen und eine hohe Wiedererkennung zu erreichen und sich von anderen Websites abzusetzen.

Individuelle Illustrationen – Webdesign Trends

Mit eigenen Illustrationen lässt sich auch ein hohe Wiederkennung und Individualität erreichen.

Tipps für den Einsatz individueller Illustrationen:

  • Der Spielraum bei Illustrationen ist riesig, wie die Beispiele oben zeigen.
  • Und damit sind auch die Möglichkeiten gewünschter Eigenschaften, Wirkungen und Umsetzungsstile enorm.
  • Einen charakteristischen Stil zu entwickeln braucht viel Zeit und kann oft nur ein Designer/Illustrator umsetzen.

Aktualtität:
Verbreitung:
Zukunft:

Fette Typografie

Wird eigentlich seit Jahren immer wieder in den Webdesign-Trends erwähnt. Von daher würde ich kaum sagen wollen, ob es gerade Mode ist oder schon wieder vorbei oder eigentlich erst richtig aufkommt.

Aber große markante Typografie ist auf jeden Fall immer eine Gestaltungsoption.

Dank der großen Auswahl an Webfonts und dem Aufkommen hochauflösender Displays ist der Einsatz vieler Serifen-Schriften inzwischen gut möglich ohne dass die Lesbarkeit leidet. So lassen sich auch Trends und Gestaltungen umsetzen, die man bisher nur aus dem Printbereich kannte. Die große markante typografische Gestaltung gehört dazu.

Fette Typografie – Webdesign Trends

Große markante Typografie als Gestaltungsmerkmal.

Tipps für den Einsatz fetter Typografie:

  • Typografie ist ein mächtiges, visuelles Werkzeug, das aber viel Feinarbeit und gute Designkenntnisse erwartet.
  • Mit großer fetter Typografie lassen sich tolle Akzente setzen und eine hohe Wiedererkennung erreichen.
  • Der Auswahl der Schriftart(en) sollte ausreichend Raum gegeben werden.

Hier findest du Anregungen für typografische Gestaltungen.

Aktualtität:
Verbreitung:
Zukunft:

Ghost-Buttons

Buttons sind – eigentlich – die markanteren Links. Größer und bunter kommen sie daher und animieren zum klicken.

Und dann gibt es die Ghost-Buttons, die unscheinbarer sind, wie ein „Geist“ auf der Website erscheinen.

Ghost Buttons sind unaufdringlich und einfach gestaltet. Sie sind präsent und nehmen sich trotzdem zurück. Sie fordern zum Klicken auf, halt nur dezenter.

Ghost Button – Webdesign Trend

Ghost Buttons im Einsatz – markant, aber doch dezent.

Tipps für den Einsatz von Ghost-Buttons:

  • In modernen Designs wird gerne auf Ghost-Buttons zurückgegriffen.
  • Ein dezenter Rahmen um den Linktext, fertig ist der Button.
  • Wer einen klaren Call-to-Action-Button braucht, der sollte nicht auf Ghost-Buttons setzen, sondern diese lieber markant gestalten.
  • Ist der Button „nur“ ein Element unter mehreren, dann kann es auch mal Ghost-Button sein.

Aktualtität:
Verbreitung:
Zukunft:

hover-Effekte

Klar, Links und andere Interaktions-Elemente sollten eine oder mehrere visuelle Kennzeichen beim Mouseover verändern.

Es gibt aber auch andere Elemente, bei denen ein hover-Effekt die Benutzerfreundlichkeit erhöht, indem das Element optisch hervorgehoben wird.

Bei Preistabellen kann zum Beispiel die aktuelle Spalte, die der User mit der Maus überfährt, hervorgehoben werden.

Tipps für den Einsatz von hover-Effekten:

  • Sollte nur dezent eingesetzt werden, da oft mit einem hover-Effekt ein Link assoziiert wird.
  • Wird ein hover-Effekt außerhalb eines Links eingesetzt, dann sollte er die Nutzbarkeit / Lesbarkeit erhöhen.

Aktualtität:
Verbreitung:
Zukunft:

Duotone-Effekt

Ein monochromes Bild ist ein einfarbiges Bild, zum Beispiel ein Graustufenbild. Beim Duotone-Effekt kommt eine zweite Farbe hinzu, ähnlich dem Duplexdruck.

Meistens werden die Bilder großflächig eingesetzt und zusammen mit den eingesetzten Farben ergibt sich durch den Effekt eine große Wiederkennung und Emotionalität.

Inzwischen werden gerne nicht nur zwei Farben, sondern die Bilder gerne auch mit mehreren Farbtönen eingefärbt oder gleich ganze Farbverläufe eingesetzt.

Duotone Webdesign Trends

Duotone im Webdesign – eingefärbte Bilder haben ihr eigene Ästhetik.

Tipps für den Einsatz von Duotone-Effekten:

  • Mit dem Duotone-Effekt lässt sich recht simpel ein markantes und wiedererkennbares Design schaffen.
  • Die Individualität ist zwar eventuell durch die eingesetzten Farben recht hoch, der Effekt selber ist es aber nicht.
  • Mit Hilfe des Duotone-Effektes lassen sich Bilder auch großflächig als Hintergrund einsetzen und der Text ist darauf trotzdem gut lesbar.
  • Durch den Duotone-Effektes wirken emotionale Bilder nicht mehr so auffällig.
  • Stehen einem nur typische Stockfotos zur Verfügung, ist der Duotone-Effekt oder ein Farbverlaufsfilter eine gute Gelegenheit, das Bild interessant zu machen.
  • Das gleiche gilt für Bilder, die aufgrund der Farben unpassend für das Screendesign sind oder mehrere Bilder, die farblich nicht zusammen passen. Hier kann der Duotone-Effekt diese vereinheitlichen.

Aktualtität:
Verbreitung:
Zukunft:

Farbverläufe

Ich hatte es zu Beginn des Artikels schon als Beispiel erwähnt: Zu Zeiten des Flat-Designs galten sie als verschollen.

Und nun sind die Farbverläufe mit Macht zurückgekommen.

Buttons, Hintergründe, Duotone-Bilder, große Texte – nichts ist vor Verläufen mehr sicher.

Dabei kommen dezente, kleine Farbverläufe ebenso vor, wie markante Verläufe zwischen sehr unterschiedlichen Farbtönen.

Gradient Webdesign Trends

Verläufe im Webdesign sind wieder salonfähig geworden.

Tipps für den Einsatz von Farbverläufen:

  • Dezente Farbverläufe geben einem Design Tiefe und können die Benutzung erleichtern, weil beispielsweise Inhaltsbereiche optisch klarer getrennt sind.
  • Markante Verläufe sollten mit Bedacht gewählt werden und passen eher zu innovativeren, kreativen Themen.
  • Sind keine Bilder vorhanden, können Farbverläufe eine schöne Alternative sein.

Viele Anregungen für Farbverläufe findet du bei coolhue, Gradient Buttons oder WebGradients.

Aktualtität:
Verbreitung:
Zukunft:

Bunte kräftige Farben

Und es wird „buntisch“…
Die Zeiten des minimalistischen dezenten Designs sind vorbei, zumindest bei einigen Websites. Hier kommen die farbenfrohen, aufmerksamkeitsstarken Töne zum Einsatz.

Vielleicht so etwas wie der Gegentrend zum Minimalismus. Nicht mehr dezent, eintönig und langweilig.

Mutiger, extrovertierter, innovativer – so ließe sich die neue Farbgebung beschreiben.

Im Web 2.0-Design waren kräftig leuchtende Farben schon einmal angesagt. Danach wurden die Farben dezenter, oft auch pastellener (siehe die Farbtrends im Webdesign). Und nun sind sie häufig wieder gesättigter, die auch gerne mal als grelle Farbverläufe daher kommen.

Kräftige Farben – Webdesign Trends

Mut zur Farbe: Kräftige, leuchtende Töne im Einsatz.

Tipps für den Einsatz von bunten Farben:

  • Leuchtende, kräftige Farben eignen sich vor allem für gewichtige Elemente wie Buttons, Links oder Überschriften.
  • Ihr übermäßiger Einsatz sollten vermieden werden – oder gut begründet sein.
  • Zu viele unterschiedliche kräftige Farben irritieren eher und erschweren die Benutzbarkeit.
  • Zusammen mit neutralen Farbtönen kommen kräftige Farben noch besser zur Geltung.

Aktualtität:
Verbreitung:
Zukunft:

Fazit der Webdesign-Trends

Als ich mit dem Artikel anfing, hätte ich nicht gedacht, dass am Ende so viele Webdesign-Trends zusammen kämen. Und vermutlich habe ich doch noch den ein oder anderen übersehen (dann ab in die Kommentare damit).

Zwei Dinge fielen mir beim Schreiben aber auf:

Kein Trend ohne Gegentrend!

Entweder kommt der Gegentrend zeitversetzt (auf Skeuomorphismus folgte Flat-Design) oder sie existieren parallel (Stockfotos und authentische Fotografien).

Was mir aufzeigt:

Es gibt nicht den oder die Trends, die man auf jeden Fall einsetzen sollte!

Vorsichtig sollte man nur mit extrem kurzzeitigen Trends sein, aber eigentlich sind alle hier vorgestellten schon viel Jahre zu sehen und/oder sie werden noch viele Jahre zum Einsatz kommen. Insofern kann man mit einem der vorgestellten Trends zuerst einmal nichts grundsätzlich falsch machen.

Wichtiger ist es zu schauen, welcher Trend zur jeweiligen Website passt.

Lohnt es sich einen der Trends einzusetzen, zumindest teilweise? Kann man so die gewünschte Wirkung der Website verstärken und passt er zu den Inhalten?

Eventuell lohnt es sich auch Trends neu zu kombinieren. Wie wäre es mit einem minimalistischen Design und Ghost-Buttons? Oder fetter Typografie auf Duotone-Bildern?

Das schöne an den Webdesign-Trends ist: Du kannst sie – so wie hier im Artikel – kennen lernen, analysieren und selber anwenden. Sie aber auch ignorieren in der eigenen Arbeit oder eben neu remixen. Ein falsch oder richtig gibt es nur im Zusammengang mit dem Thema der Website.

Nicht selten ist die goldene Mitte ja ein guter Weg: Also ein paar moderne Webdesign-Trends aufnehmen, aber nicht zu viele, sondern mit zeitlosen Gestaltungs-Elementen kombinieren.

Und jetzt bist du dran:
Welche Webdesign-Trends setzt du ein? Habe ich wichtige vergessen? Was für Trends siehst du im Webdesign kommen?

Aktuelle Webdesign-Trends im Überblick
4.853 Stimme[n]

Weiterempfehlen ausdrücklich erlaubt:

Die Webdesign Checkliste

Webdesign-Newsletter abonnieren & als Dankeschön die WEBDESIGN-CHECKLISTE erhalten mit über 90 Checkpunkten für Dein nächstes Projekt:

Keine Sorge, Spam gibt es hier nicht, stattdessen regelmäßig Webdesign-Tipps von mir! Du kannst den Newsletter auch jederzeit problemlos abbestellen. Mehr Infos dazu:
(Beispiele, Datenschutz, Analyse und Widerruf)

Webdesign Survival Kit

Autor:
Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln in diesem Blog.

14 Kommentare

  1. Hervorragend recherchiert und sehr informativ. Danke!

  2. Danke für diese sehr ausführliche Zusammenstellung! Da hat man alle Trends auf einen Blick und auch gleich einige Ideen wie man seine eigene Seite aufhübschen kann.

    • Bitte gerne 🙂

  3. Ich denke du sprichst einem mit diesem Artikel – oder ist es schon eine Abhandlung – aus der Seele. Viele Punkte angesprochen und man kann sich dazu seine Meinung bilden oder auch nicht. Ich finde es gut auf den Punkt gebracht und lese deine Artikel immer wieder gern. Gruß Lutz

    • Danke Lutz, freut mich, wenn dir der Artikel gefällt 🙂

  4. Hallo Martin
    ich finde Deinen Weblog sensationell und sehr informativ. Ich habe von Dir schon sehr viel gelernt und es hat dazu geführt, dass ich wieder viel mehr Energie habe sehr schöne Webseiten zu gestalten. Ich warte immer wieder gespannt darauf wenn neue Artikel von Dir kommen. Meine Kunden sind super zufrieden mit meinen Webseiten.

    Besten Dank für Deine göttlichen Artikel.

    Gruss aus der Schweiz

    Danny

    • Hallo Danny,
      danke für deine Worte 🙂
      Ansporn für mich fleißig weiter Artikel zu schreiben…

  5. Sehr schöner Artikel, der es auch gleich in die Lesezeichen geschafft hat. Hier kann ich denke ich noch einiges an Informationen und Inspiration mitnehmen. Vielen Dank!

    • Gerne, freut mich!

  6. Sehr toll dargestellt, dem ist nichts mehr hinzuzufügen und einen regelmäßigen Leser mehr hast Du damit mit Sicherheit auch gewonnen 😉

    • Danke, dann willkommen in meiner Leserschaft 🙂

  7. Lieber Martin,
    vielen vielen Dank!! für deine sehr hilfreiche ausführliche Zusammenstellung der Webdesign-Trends.
    Folgende Frage habe ich: Was hälst du eigentlich von der neuen CSS-Technologie der Designgrids (display:grid) und sollte/kann man sie aktuell schon einsetzen?

Kommentar schreiben

Email-Adresse wird nicht veröffentlicht!