Vi kommer att dissekera de aktuella digitala designtrenderna, och först ut är gradienter, ett av de mest omnämnda ämnena i resultaten av vår trendundersökning, som genomfördes i samarbete med Awwwards-användarna och juryn. Kolla in alla undersökningsresultat i vår bok NU. A Contemporary Landscape for Digital Thinkers.

Gradienter har varit trendiga ett tag nu, de gjorde först comeback på ett konventionellt sätt i bakgrunder och bilder. Spotify gjorde dem populära igen genom att tillämpa duotona gradienter över foton som ett karakteristiskt element för varumärket i sina kampanjer och mikrosajter. Du kan hitta en liten handledning här om hur man skapar duotona gradienter i photoshop.

Det här året har vi sett olika flerfärgade gradienter med livliga färgpaletter och oregelbundna former med oskärpa- och distorsionseffekter. Gradienter används för närvarande på många olika sätt, men det mest karakteristiska, när det gäller trender, är att deras användning utökas till sekundära element i kompositionen, såsom hovers, titlar, 3D-element, ikoner med mera.

• 

Iphone X representerar paradigmet för 2018 års trender. På dess landningssida, annonser och många av elementen i dess reklamkampanjer används gradienter i olika toner ovanför titlar, texter eller till och med isotypen. Men i bakgrunderna och särskilt i designen på startskärmen på iPhone X är gradienterna INTE enhetliga som de traditionella linjära eller radiella gradienterna, utan flerfärgade med oregelbunden blandning.

Gradienter i 3D? Vertex färg och colormap stil

Det verkar uppenbart att tala om gradienter i 3D, eftersom belysningen av scenen genererar en gradering av ljuset på objektets yta, men det som är inneboende i den här trenden är just användningen av gradienter som en textur av objektet, som ibland efterliknar tekniken för vertexfärg- och colormapgradienter. Båda teknikerna tjänar mer än en rent dekorativ funktion, eftersom de används för att representera data eller kartlägga 3D-objekt.

Typer av gradienter

Vi kan blanda färger på flera olika sätt, de vanligaste är linjära eller radiella gradienter med olika parametrar som radie, orientering, opacitet eller färgpunkter. Det som är trendigt just nu, som vi har sett i fallet med iPhoneX, är användningen av ojämna blandningar som använder gradientnät eller andra tekniker. Med gradient mesh förvränger vi gradientens yta för att generera en friformsform. Vi kan hitta många typer av gradienter som monotona, duotona, flerfärgade, gradientramper etc., vilket visas i följande grafik.

Användbara verktyg för CSS-gradienter

För att återskapa dessa effekter i CSS finns det massor av verktyg som gör det möjligt att skapa dem genom visuella redaktörer, helt enkelt genom att kopiera och klistra in CSS-koden, som du kan se här: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

• Khroma

  

• Webgradienter

  

• Färgrymd

  

• Cool Hue

  

• Easing Gradients

  

• UI Gradients

  

Ladda ner Gradients Source File!

Hämta källfilen gratis i vektorformat .ai eller pdf för att göra egna designexperiment med gradienterna från affischen.

DOWNLOAD HERE

Awwwards Gradients Collection

Som alltid har vi gjort ett urval av SOTDs och nominerade så att du kan se dessa effekter i användning, vi hoppas att du kan hitta lite inspiration i Awwwards Collections eller i vår bok, NOW. A Contemporary Landscape for Digital Thinkers som diskuterar årets viktigaste webbdesigntrender.

• 
• 
• WebGL 3D-modell I WebGL
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• Homepage In Parallax