We gaan de huidige digitale design trends ontleden, als eerste Gradients, een van de meest genoemde thema’s in de resultaten van onze trends enquête, uitgevoerd dankzij de medewerking van de Awwwards gebruikers en Jury. Bekijk de volledige enquêteresultaten in ons boek NOW. Een eigentijds landschap voor digitale denkers.

Gradients zijn al een tijdje trendy, ze maakten aanvankelijk een comeback op een conventionele manier in achtergronden en afbeeldingen. Spotify heeft ze weer populair gemaakt door duotone gradiënten toe te passen op foto’s als kenmerkend element van het merk in zijn campagnes en microsites. Je kunt hier een kleine tutorial vinden over hoe je duotone verlopen in photoshop maakt.

Dit jaar hebben we verschillende veelkleurige verlopen gezien met levendige kleurenpaletten en onregelmatige vormen met blur- en vervormingseffecten. Gradiënten worden momenteel op vele manieren gebruikt, maar de meest kenmerkende, in termen van trends, is dat hun gebruik wordt uitgebreid naar secundaire elementen binnen de compositie, zoals hovers, titels, 3D-elementen, pictogrammen en meer.

• 

De iPhone X vertegenwoordigt het paradigma van trends van 2018. In zijn landingspagina, advertenties en veel van de elementen in zijn promotiecampagnes worden kleurverlopen van verschillende tinten gebruikt boven titels, teksten of zelfs het isotype. In de achtergronden en vooral in het ontwerp op het homescreen van de iPhone X zijn de gradients echter NIET uniform zoals de traditionele lineaire of radiale gradients, maar meerkleurig met onregelmatige overvloeiing.

Gradients in 3D? Vertex color en colormap stijl

Het lijkt voor de hand te liggen om over kleurverlopen in 3D te praten, aangezien de belichting van de scène een gradatie van licht op het oppervlak van het object genereert, maar wat inherent is aan deze trend is juist het gebruik van kleurverlopen als een textuur van het object, waarbij soms de vertex color en colormap gradiënttechnieken worden nagebootst. Beide technieken dienen meer dan een zuiver decoratieve functie, aangezien ze worden gebruikt om gegevens weer te geven of 3D-objecten in kaart te brengen.

Types van kleurverlopen

We kunnen kleuren op meerdere manieren mengen, de meest voorkomende zijn lineaire of radiale kleurverlopen met verschillende parameters zoals straal, oriëntatie, opaciteit of kleurpunten. Wat trendy is op dit moment, zoals we hebben gezien in het geval van de iPhoneX, is het gebruik van niet-uniforme mengsels die gebruik maken van gradiënt meshes of andere technieken. Met gradient mesh vervormen we het oppervlak van de gradient om een vrije vorm te genereren. We kunnen vele soorten gradients vinden zoals monotone, duotone, multicolor, gradients ramps, etc, zoals gedemonstreerd in de volgende afbeelding.

Gebruikbare tools voor CSS gradients

Om deze effecten in CSS na te bootsen zijn er een heleboel tools beschikbaar die het mogelijk maken om ze te maken via visuele editors, simpelweg door de CSS code te kopiëren en te plakken, zoals je hier kunt zien: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

• Khroma

  

• Webgradients

  

• Color Space

  

• Cool Hue

  

• Easing Gradients

  

• UI Gradients

  

Download het Gradients Bron Bestand!

Ga aan de slag met kleurverlopen, download het bronbestand gratis in vector formaat .ai of pdf om je eigen ontwerpexperimenten te doen met de kleurverlopen van de poster.

DOWNLOAD HIER

Awwwards Gradients Collection

Zoals altijd hebben we een selectie gemaakt van SOTD’s en genomineerden zodat je deze effecten in gebruik kunt zien, we hopen dat je wat inspiratie kunt vinden in Awwwards Collections of in ons boek, NOW. A Contemporary Landscape for Digital Thinkers waarin de belangrijkste webdesigntrends van het jaar worden besproken.

• 
• 
• WebGL 3D model In WebGL
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• Homepage In Parallax