Vi vil dissekere de aktuelle digitale designtrends, først Gradienter, et af de mest omtalte temaer i resultaterne af vores trendundersøgelse, der blev gennemført i samarbejde med Awwwards-brugere og -jury. Se de fulde undersøgelsesresultater i vores bog NU. A Contemporary Landscape for Digital Thinkers.

Gradienter har været trendy i et stykke tid nu, de gjorde oprindeligt et comeback på en konventionel måde i baggrunde og billeder. Spotify gjorde dem populære igen ved at anvende duotone gradienter over billeder som et karakteristisk element for brandet i sine kampagner og microsites. Du kan finde en lille vejledning her om, hvordan du kan skabe duotone gradienter i photoshop.

I år har vi set forskellige flerfarvede gradienter med livlige farvepaletter og uregelmæssige former med slør- og forvrængningseffekter. Gradienter bruges i øjeblikket på mange måder, men det mest karakteristiske, hvad angår tendenser, er, at deres brug udvides til sekundære elementer i kompositionen, såsom hovers, titler, 3D-elementer, ikoner og meget mere.

• 

Iphone X repræsenterer paradigmet for tendenserne i 2018. På dens landingsside, annoncer og mange af elementerne i dens reklamekampagner anvendes gradienter i forskellige toner over titler, tekster eller endda isotypen. Men i baggrundene og især i designet på iPhone X’s startskærm er gradienterne IKKE ensartede som de traditionelle lineære eller radiale gradienter, men flerfarvede med uregelmæssige blandinger.

Gradienter i 3D? Vertex farve og colormap stil

Det virker indlysende at tale om gradienter i 3D, da belysning af scenen genererer en gradation af lys på objektets overflade, men hvad der er iboende ved denne tendens er netop brugen af gradienter som en tekstur af objektet, nogle gange efterligner vertex farve og colormap gradient teknikker. Begge teknikker tjener mere end en rent dekorativ funktion, da de bruges til at repræsentere data eller kortlægge 3D-objekter.

Typer af gradienter

Vi kan blande farver på flere måder, hvoraf de mest almindelige er lineære eller radiale gradienter med forskellige parametre som radius, orientering, opacitet eller farvepunkter. Det, der er trendy lige nu, som vi har set det i forbindelse med iPhoneX, er brugen af uensartede blandinger, som anvender gradientmasker eller andre teknikker. Med gradient mesh forvrænger vi overfladen af gradienten for at generere en friformet form. Vi kan finde mange typer gradienter som monotone, duotone, flerfarvede, gradienter ramper osv., som vist i følgende grafik.

Nyttige værktøjer til CSS gradienter

For at genskabe disse effekter i CSS er der masser af værktøjer til rådighed, der gør det muligt at skabe dem gennem visuelle editorer, blot ved at kopiere og indsætte CSS-koden, som du kan se her: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

• Khroma

  

• Webgradients

  

• Color Space

  

• Cool Hue

  

• Easing Gradients

  

• UI Gradients

  

Download Gradients kildefilen!

Deltag dig selv med gradienter, download kildefilen gratis i vektorformat .ai eller pdf for at lave dine egne designeksperimenter med gradienterne fra plakaten.

DOWNLOAD HER

Awwwards Gradients Collection

Som altid har vi lavet et udvalg af SOTDs og nominerede, så du kan se disse effekter i brug, vi håber du kan finde noget inspiration i Awwwards Collections eller i vores bog, NOW. A Contemporary Landscape for Digital Thinkers, som diskuterer de vigtigste webdesigntrends i år.

• 
• 
• WebGL 3D-model I WebGL
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• Hjemmeside I Parallax