10 spannende Webdesign-Trends, um die Sie 2019 nicht herum kommen

  Agenturen, Medien, Unternehmen

Wie in jedem Jahr habe ich das Internet auf der Suche nach neuen und aufkommenden Trends durchforstet, die uns 2019 auf neu gelaunchten Webseiten öfter begegnen könnten. Von Layout bis Farben, von Typographie bis Weißraum und alles, was dazwischen liegt – kein Design-Element wurde bei den möglichen Design-Trends für 2019 übergangen.

Untenstehend finden Sie die zehn Design-Trends, die Ihnen 2019 im Internet wohl öfter begegnen könnten.

1. Unregelmäßiges Raster und asymmetrische Layouts

Ich hatte diesen Trend bereits zum Leitfaden für die Design-Prognosen des letzten Jahres hinzugefügt, aber es sieht ganz danach aus, als würde uns dieser Trend auch 2019 noch erhalten bleiben.

Im Design versteht man unter einem Raster eine imaginäre Fläche mit horizontalen und vertikalen Linien, die dazu dienen, Elemente auf der Seite oder dem Bildschirm anzuordnen. Wie bei den meisten Webseiten kann diese Fläche ganz einfach hervorgehoben werden: Wenn Sie auf der linken Seite einer Webseite schauen, so finden Sie in den meisten Fällen das Logo, die Headline und den Inhalt untereinander angeordnet vor. Bei einem unregelmäßigen Raster werden die Elemente auf der Fläche herumgeschoben, sodass es weniger streng oder unregelmäßig wirkt.

Die Webseite von Times Talks zeigt weitestgehend ein unregelmäßiges Rasterlayout, insbesondere im Hero-Bereich (oben) und in verschiedenen anderen Bereichen der Webseite.

Dieser Designstil – einer, der das Unerwartete bevorzugt, an Grenzen geht und mit Asymmetrie experimentiert – begleitet uns schon seit einiger Zeit. Er wurde als Technik eingesetzt, um sich von der Masse abzuheben, um die Aufmerksamkeit auf sich zu ziehen, oder um mit dem Design zu experimentieren. 2019 jedoch macht dieser Trend eher ein Statement und wird im Internet häufiger zu sehen sein.

Studio Revele experimentiert bei seiner Homepage mit der Ästhetik eines asymmetrischen und unregelmäßigen Webdesign-Rasters (die Kreise können auf dem Bildschirm herumbewegt werden und tragen damit noch mehr zum Konzept des unregelmäßigen Rasters bei).

Ich gehe davon aus, dass wir 2019 noch viel mehr dieser unregelmäßigen und asymmetrischen Raster-Layouts zu sehen bekommen, da wir uns immer mehr von dem starren Raster verabschieden, das wir in den letzten Jahren so lieb gewonnen haben. Durch das Experimentieren mit dem Raster und der Akzeptanz von Asymmetrie im Webdesign gehe ich davon aus, dass dieser Trend sich 2019 weiter verbreiten wird.

2. Organisches/Fluid Design und Designelemente

Langsam aber sicher bewegen wir uns immer weiter von den klaren Linien weg, die mit dem Flat Design Einzug hielten, und beginnen mit flüssigeren Formen und Linien zu experimentieren. Diese Formen, zu denen Kreis, Quadrat oder Rechteck nicht zählen, ebensowenig jede andere geradlinige Form, werden oft als flüssig (fluid) oder organisch bezeichnet.

Ein kleiner Teil der Homepage von Wandering Aimfully enthält organische Formen und Linien, die hinter rund zugeschnittenen Bildern und als subtiler Hintergrund unter der darunter stehenden Headline zu sehen sind.

Wir haben die online so gewohnten geraden und fast schon klinisch rein wirkenden Linien gegen Elemente aus der Natur und dem Leben getauscht (wie Formen von Weihern und Seen, ausgerissene Papierstücke). Diese organischen Formen und Linien können das Design zugänglicher machen und es mehr im Einklang mit unserer menschlichen Natur wirken lassen.

Die Webseite von Mawla setzt organische Formen und Linien auf der Homepage ein, vor allem im Hero-Bereich.

Die typischen Formen, die so lange im Webdesign genutzt wurden (Kreise und Quadrate, ja, Sie sind gemeint), werden 2019 von eher organischen Formen und Linien begleitet oder ersetzt. Damit kommen ein völlig neues Designelement und eine Neugier ins Spiel, die sich auf das Webdesign der 2019 gelaunchten Seiten auswirken.

3. Nostalgische / Rückblickende / Retro-Design-Ästhetik

Das Alte ist wieder neu. Wir bewegen uns über das Flat Design hinaus in einen Bereich, wo das Experimentieren grenzenlos zu sein scheint. Die Zeit scheint reif für ein paar alte Designelemente mit einem Hauch von Nostalgie.

Das Webdesign der Seite von Statamic weist ein Retro-Farbschema auf, das an die hellen Farben und Bilder der 1980er Jahre erinnert.

Das Herumexperimentieren mit nostalgischen und Retro-Designstilen kann eine nette Gegenüberstellung von früherem und heutigem Design erzeugen. Noch interessanter ist, dass wir vermutlich noch mehrere Retro-Designstile zu sehen bekommen, die auf Zeiten verweisen, in denen Webseiten noch nicht für Jedermann verfügbar waren. Das erzeugt bei vielen Menschen ein Gefühl von „Neuem“.

Die Webseite von Great Jones zeigt das typische Schrift- und Farbschema der 1970er Jahre, eine Designästhetik, die lange vor dem ARPANET 1983 gängig war.

Ich denke, wir steuern auf weitere Webseiten zu, die verschiedene Designstile aus vergangenen Zeiten adaptieren. Dies betrifft sowohl das Design der Webseiten selbst, aber auch die Inhalte. Einige dieser Elemente, die uns an vergangene Zeiten erinnern, werden vermutlich Farbschemata enthalten, die uns an Design-Trends von früher erinnern, und mit einer Typographie arbeiten, die uns in eine andere Zeit zurückversetzen.

4. Bessere und fortschrittlichere Bildbearbeitung

Bilder haben schon immer einzigartige Designmöglichkeiten dargestellt, vor allem im Internet. Bilder in Kreisen zu platzieren, sie schwarzweiß einzufärben, ein wenig Schatten dahinter setzen – all das sind Techniken, die Designer genutzt haben, um Bilder und Webseiten (und jedes andere Gestaltungsobjekt) zu verbessern oder um die Aufmerksamkeit darauf zu lenken.

Die Webseite von KOBU zeigt Bilder mit ausgeschnittenen Menschen anstelle von Standardbildern. So kann das Design zwischen den Ausschnitten der Teammitglieder fließen.

Eine etwas fortschrittlichere Bildbearbeitung kann die Aufmerksamkeit auf das Bild lenken, oder sie sogar davon ablenken. Die meisten Webseiten zeigen ein ziemlich großes Bild im Hero-Stil, das sich über die gesamte Breite der Webseite zieht, eine Menge Höhe beansprucht und meist nicht geändert wird. Ich glaube, dass einer der Design-Trends, die 2019 Fahrt aufnehmen, neue Wege der Bildpräsentation sein werden.

Auf der Webseite von Drip sind Bilder zu sehen, die ausgeschnitten wurden und mit Zeichnungen und Formen das Bild noch mehr betonen, was auch das Design der Webseite selbst stärker hervorhebt.

Anstatt eine Art von Bildbearbeitung umzusetzen, können wir uns darauf einstellen, verschiedene Ebenen der Bildbearbeitung auf Webseiten zu sehen, die alles aus dem Bild herausholen, um entweder die Aufmerksamkeit auf sich zu ziehen oder um von sich abzulenken. Die Häufung von Design-Bearbeitungen wie das monochromatische Einfärben eines Bildes, das Ausschneiden der Person/des Gegenstands, oder das Hinzufügen eines Musters und es damit zu überlagern, um ein neues Bild zu erhalten, werden 2019 im Webdesign stärker vertreten sein.

5. Monochromatische und keine Farben

Es ist wirklich großartig, dass uns Millionen von Farben zur Verfügung stehen, aber was wäre, wenn man sich selbst auf nur eine Farbe begrenzte, oder sogar auf Farben verzichtete? Gut umgesetzt kann diese Art von Design-Auflage einen Entwurf aufwerten und ihn einprägsamer machen.

Die Webseite von Digital Bro hält sich an ein sehr monochromatisches Farbschema, indem es einen Gelbton verwendet und nur selten Abweichungen dieses Gelbs einsetzt (Schwarz und Weiß werden als neutral betrachtet).

Die Beschränkung auf eine Farbe kann dazu beitragen, das Erscheinungsbild der Marke zu verdichten, und gleichzeitig Auflagen für die Flexibilität des Design mit sich bringen. Vor dem Hintergrund, dass die meisten Webseiten zwei bis fünf Farben verwenden, kann die Nutzung einer einzigen Farbe bei einem Besucher der Website auffällig und einprägsam wirken.

Die Webseite von Climate verwendet ein Farbschema mit Grautönen und verzichtet auf jede weitere Farbe. Sogar die Videos auf der Webseite sind alle in Grautönen gehalten.

Wenn Sie Ihre Farbpalette vereinfachen möchten (in Kunst und Design gelten Schwarz, Weiß und Grau nicht als Farben, sie werden eher als neutral betrachtet), dann ist es durchaus eine Option, noch einen Schritt weiter zu gehen und sämtliche Farben zu eliminieren. Ich gehe davon aus, dass 2019 mehr Webseiten weniger oder sogar gar keine Farben verwenden werden.

6. Überlappende Designelemente

Elemente, die sich überlappen, stehen in enger Verbindung mit unregelmäßigen Rasterlayouts und Asymmetrie und können bestimmte Inhalte auf einer Seite visuell hervorheben. Das kann überraschend wirken, da wir uns an Elemente gewöhnt haben, die ihren eigenen Raum haben und von anderen Elementen getrennt angeordnet sind (normalerweise gibt es hier keine Berührungspunkte).

Die Webseite von Mad Studio enthält überlappende Elemente als zentrales Gestaltungselement, die um subtile Animationen erweitert werden, die die Webseite dreidimensional wirken lassen.

Bei einer sorgfältigen und wohlüberlegten Umsetzung kann dieser Trend mit überlappenden Elementen auf einer Seite dabei helfen, die gesamte Ästhetik der Webseite zu optimieren. Dabei kann gerade in unserer an Mobilgeräten ausgerichteten Welt die Umsetzung ganz schön knifflig sein, da überlappende Elemente ziemlich verwirrend wirken und enttäuschend sein können, wenn die Umsetzung nicht gut gemacht ist und die Elemente falsch überlappen.

Die Webseite von Hers zeigt überlappende Elemente in Teilen der Seite, einschließlich des Hero-Bereichs auf der Homepage.

Die Nutzung von überlappenden Elementen auf gleichem Raum ist ein Trend, den ich 2019 immer häufiger beobachte. Auch wurden schon die ersten Versuche unternommen, einer Webseite dadurch Dreidimensionalität zu verleihen.

7. Neu gedachte Hero-/Header-Bereiche

Wie oben bereits angemerkt, zeigen die meisten Hero-Bereiche (ehemals bekannt unter der Bezeichnung „über dem Falz“) große Bilder, die häufig über die gesamte Bildschirmbreite gehen und mit etwas Text die Aufmerksamkeit des Besuchers auf sich lenken wollen. Im Verlauf der letzten Jahre ist in diesem Bereich einer Webseite (der unbestritten der wichtigste Teil der Webseite ist) nicht viel herumexperimentiert worden.

Einen einzigartigen Umgang mit dem Hero-Bereich hat Zoo Creative gewagt, die diesen Bereich als Plakatwand nutzen und mit klug eingesetzter Animation überzeugen.

Während einige Webseiten damit begonnen haben, im Hero-/Header-Bereich die Grenzen des Möglichen auszuloten, und wir uns immer mehr von den klassischen Maximale-Breite-Bild-mit-Text-Hero-Bereichen entfernen, gehe ich davon aus, dass wir immer neue Versuche von Webdesignern zu sehen bekommen, wie wir diesen Bereich nutzen können.

Andreas Nymark zeigt auf seiner Webseite einen großflächigen weißen Header mit einer einfachen Headline im unteren Hero-Bereich (er greift noch einen weiteren Trend auf, der später in diesem Artikel erscheint).

2019 werden wir verschiedene Formen des Experimentierens mit diesem überaus wichtigen Bereich einer Webseite zu sehen bekommen. Dazu zählt auch, diesen Bereich zu minimieren, wechselnde Inhalte anzuzeigen (und dabei etwas anderes zu nutzen als nur ein Bild, das über die volle Breite geht) und diesem Bereich mehr Gewicht zu verleihen, um die Aufmerksamkeit des Besuchers zu gewinnen.

8. Große und experimentelle Navigationen

Es scheint so, als gäbe es jedes Jahr einen neuen Trend bei der Navigation einer Webseite. Vielleicht, weil es sich dabei um eines der am schwierigsten zu gestaltenden Elemente einer Webseite handelt. Es ist so wichtig, wie wir das Internet nutzen, aber auch so schwierig, Funktionalität und Ästhetik auf dem Laufenden zu halten.

56 Digital zeigt auf seiner Webseite eine eher große Navigation sie wird zum Zentrum der Webseite anstatt klein am Rand zu stehen.

2019 werden wir diesen Trend und verschiedene Gehversuche mit der Navigation wohl häufiger zu sehen bekommen. Anstatt nur ein paar Kleinigkeiten zu ändern wie die Position auf der Seite, die Schriftgröße oder sogar das Layout selbst, wird das Experimentieren die Grenzen dessen ausloten, was 2019 möglich ist. Dazu gehört auch, die Navigation zum Hauptbestandteil der Webseite zu machen oder sie prominent und groß in den Mittelpunkt zu stellen.

Die Webseite von Gander hat die Navigation in allen vier Ecken der Webseite platziert anstatt auf die typische Navigationsleiste oben oder unten auf der Seite zu setzen.

Experimentelle Navigationen sind 2019 zu einem Design-Trend avanciert und wir können uns auf überdimensional große Navigationen freuen, auf Homepages, die nichts anders als die Navigation enthalten, und auf Navigationen mit ausgeklügelten Animationen.

9. Weißraum so weit das Auge reicht

Weißraum wird seit Jahrzehnten von Designern als wirkungsvolles Design-Instrument eingesetzt. Was jedoch nicht so üblich ist, ist der Umfang des genutzten Weißraums oder, dass anstatt des Inhalts der Weißraum selbst im Mittelpunkt steht.

Daniel Boddam verwendet auf seiner Webseite besonders viel Weißraum im Header-Bereich, was die Aufmerksamkeit auf den Raum lenkt, der sonst meist mit Inhalten gefüllt ist.

Eine solche Nutzung von extra viel Weißraum steht dem eigentlichen Grund entgegen, warum wir ihn verwenden – wir fügen ihn als Rahmen oder Raum hinzu, um unseren Augen eine Auszeit zu geben. Heute wird durch das Hinzufügen von besonders viel Weißraum der Fokus auf diesen Bereich gelegt oder zumindest wird er zu einem auffallenderen Bestandteil der Designästhetik. Wenn Sie sich dafür entscheiden, zusätzlichen Weißraum in Bereichen hinzuzufügen, die ihn nicht unbedingt benötigen, wird er zu einem wichtigen Bestandteil des Designs und von Besuchern stärker wahrgenommen.

Die Webseite von Maxime Rimbert setzt auf einen großen Bereich mit Weißraum, um mehr Aufmerksamkeit auf die Arbeiten zu lenken, die darunter angeordnet sind, und die Arbeiten optisch vom Intro zu trennen.

2019 werden wir Webseiten sehen, die viel, sehr viel Weißraum einsetzen, um damit etwas auszusagen oder um dies zum Zentrum der Seite zu machen. Während wir in der Vergangenheit dachten, dass zusätzlicher Weißraum reine Platzverschwendung sei, stehen wir jetzt einem Trend gegenüber, bei dem dieser Raum das gewisse Extra ausmacht.

10. Die Grenzen der Typographie ausloten

Das Herumexperimentieren mit Typographie gehört zu den Dingen, die man von einem Designer erwartet. Etwas schwieriger als im Printbereich ist es jedoch, die Grenzen der Typographie im Internet auszuloten. Mit einer immer ausgefeilteren Programmierung aber ist im Verlauf der Zeit auch das Experimentieren mit Typographie im Internet etwas einfacher geworden.

Kurppa Hosk experimentiert auf deren Webseite mit Typographie und ergänzt diese mit Animation und User Interaction. Der Text löst sich auf und formt einen Kreis um den Mauszeiger des Benutzers.

Das Experimentieren und Ausloten der Grenzen in der Typographie könnte das Beschneiden oder absichtliche Entfernen von Buchstabenteilen und Worten sein (wobei man sich auf den Negativraum verlässt, der den Rest der Buchstaben ergänzt), Fotografie innerhalb der Typographie, Schrift auf einer diagonalen Linie oder Form, animierte Typographie und vieles mehr.

ARCHE68 zeigt auf seiner Webseite Typographie, die an die Grenzen der Zweidimensionalität gerückt wird, und damit fast schon dreidimensional wirkt. Die Typographie wirkt nicht nur durch einen Effekt so, als würde sie sich biegen, sie ist auch mit Auto-Scroll-Effekten versehen und bewegt sich nach links oder rechts, wenn der Benutzer nach oben oder unten scrollt (man sieht die Navigation, ein weiterer Design-Trend, den wir oben bereits aufgeführt hatten).

2019 ist der experimentelle Umgang mit Typographie und das Ausloten dessen, was mit Schrift im Internet möglich ist, zu einem Trend geworden, der uns im kommenden Jahr mit neu designten Webseiten begleiten wird. Da das Experimentieren mit Schrift im Printbereich viel einfacher ist, können wir uns auf einen ähnlichen Umgang mit der Schrift im Web einstellen und die neuen Möglichkeiten für die Programmierung von Schriften darin miteinbeziehen.

Fassen wir kurz zusammen

Wir befinden uns in der Post-Flat-Design-Ära und es sieht ganz so aus, als würde das Webdesign experimenteller werden als es in den vergangenen Jahren der Fall war. 2019 ist so gut wie kein Element auf einer Webseite vor einem experimentellen Umgang sicher.

(Sie suchen nach mehr Inspiration? Werfen Sie einen Blick auf unseren Webdesign-Leitfaden 2018, Webdesign-Leitfaden 2017 und auch auf den Webdesign-Leitfaden).

Mit zusätzlichem Weißraum, Navigationen, die ins Zentrum der Webseiten rücken, und einem experimentellen Umgang mit Typographie, um sich aus der Vergangenheit Inspiration zu holen, sieht es 2019 ganz so aus, als würden Webseiten mit ihrer Designästhetik experimentieren und dabei nichts auslassen.

Dieser Artikel wurde von Amber Leigh Turner von The Next Web verfasst und über das Verlegernetzwerk NewsCred rechtmäßig lizenziert. Bei Fragen zur Lizenzierung wenden Sie sich bitte an legal@newscred.com.