Wir werden die aktuellen digitalen Designtrends analysieren, zuerst Gradients, eines der meistgenannten Themen in den Ergebnissen unserer Trendumfrage, die dank der Zusammenarbeit der Awwwards-Nutzer und der Jury durchgeführt wurde. Die vollständigen Umfrageergebnisse finden Sie in unserem Buch NOW. A Contemporary Landscape for Digital Thinkers.

Gradienten sind schon seit einiger Zeit im Trend, sie erlebten zunächst ein Comeback auf konventionelle Art und Weise in Hintergründen und Bildern. Spotify hat sie wieder populär gemacht, indem es in seinen Kampagnen und Microsites Duotone-Gradienten über Fotos als charakteristisches Element der Marke eingesetzt hat. Hier finden Sie ein kleines Tutorial, wie Sie Duotone-Verläufe in Photoshop erstellen können.

In diesem Jahr haben wir verschiedene mehrfarbige Verläufe mit lebhaften Farbpaletten und unregelmäßigen Formen mit Unschärfe- und Verzerrungseffekten gesehen. Farbverläufe werden derzeit auf viele Arten verwendet, aber das charakteristischste in Bezug auf die Trends ist, dass ihre Verwendung auf sekundäre Elemente innerhalb der Komposition ausgedehnt wird, wie Hover, Titel, 3D-Elemente, Icons und mehr.

• 

Das iPhone X repräsentiert das Paradigma der Trends des Jahres 2018. Auf der Landing Page, den Anzeigen und vielen Elementen der Werbekampagnen werden Farbverläufe in verschiedenen Tönen über Titeln, Texten oder sogar der Isotype verwendet. In den Hintergründen und vor allem im Design auf dem Homescreen des iPhone X sind die Verläufe jedoch NICHT einheitlich wie die traditionellen linearen oder radialen Verläufe, sondern mehrfarbig mit unregelmäßigen Übergängen.

Gradienten in 3D? Vertex-Farb- und Colormap-Stil

Es scheint naheliegend, von Farbverläufen in 3D zu sprechen, da die Beleuchtung der Szene eine Abstufung des Lichts auf der Oberfläche des Objekts erzeugt, aber was diesem Trend innewohnt, ist genau die Verwendung von Farbverläufen als Textur des Objekts, die manchmal die Techniken der Vertex-Farb- und Colormap-Verläufe imitiert. Beide Techniken dienen mehr als nur einer rein dekorativen Funktion, da sie zur Darstellung von Daten oder zur Abbildung von 3D-Objekten verwendet werden.

Arten von Farbverläufen

Wir können Farben auf verschiedene Arten überlagern, die gebräuchlichsten sind lineare oder radiale Farbverläufe mit verschiedenen Parametern wie Radius, Ausrichtung, Deckkraft oder Farbpunkten. Im Trend liegen derzeit, wie wir beim iPhoneX gesehen haben, uneinheitliche Überblendungen, bei denen Gradient Meshes oder andere Techniken verwendet werden. Mit dem Gradient Mesh verzerren wir die Oberfläche des Gradienten, um eine Freiform zu erzeugen. Es gibt viele Arten von Farbverläufen wie einfarbig, zweifarbig, mehrfarbig, Rampenverläufe usw., wie in der folgenden Grafik gezeigt wird.

Nützliche Tools für CSS-Farbverläufe

Um diese Effekte in CSS nachzubilden, gibt es jede Menge Tools, die es ermöglichen, sie mit visuellen Editoren zu erstellen, indem man einfach den CSS-Code kopiert und einfügt, wie Sie hier sehen können: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

• Khroma

  

• Webgradients

  

• Farbraum

  

• Cool Farbton

  

• Verlaufsverläufe

  

• UI-Verläufe

  

Laden Sie sich die Quelldatei der Verläufe herunter!

Lassen Sie sich auf Farbverläufe ein, laden Sie sich die Quelldatei kostenlos im Vektorformat .ai oder pdf herunter, um eigene Gestaltungsexperimente mit den Farbverläufen des Posters durchzuführen.

HIER HERUNTERLADEN

Awwwards Gradients Collection

Wie immer haben wir eine Auswahl von SOTDs und Nominierten getroffen, damit Sie diese Effekte im Einsatz sehen können. Wir hoffen, Sie finden einige Inspirationen in den Awwwards Collections oder in unserem Buch NOW. A Contemporary Landscape for Digital Thinkers, in dem die wichtigsten Web-Design-Trends des Jahres behandelt werden.

• 
• 
• WebGL 3D-Modell In WebGL
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• Homepage in Parallaxe