Kleurgradiƫnten zijn niet nieuw in webdesign. Weet je nog, skeuomorphism? We gebruikten toen gradiƫnten om digitale objecten een 3D-look te geven.

Maar toen minimalistisch en flat design in de jaren 2010 het web overnamen, zagen we gradiƫnten steeds meer naar de achtergrond verdwijnen. Het was niet omdat ze ouderwets waren, het was gewoon dat ontwerpers er niet veel gebruik van maakten met de huidige webdesign-trends.

Je zou kunnen zeggen dat de logo-redesign van Instagram in 2016 gradiƫnten in webdesign nieuw leven inblies. Toen iedereen zag wat Instagram kon doen met kleur, duurde het niet lang voordat we overal gradiƫnten zagen opduiken.

Nu zijn we in 2021 en gradiƫnten zijn nog steeds springlevend. Als je benieuwd bent hoe je ze kunt gebruiken of gewoon een flinke dosis inspiratie wilt, lees dan verder.

Kleurtheorie-principes die elke webdesigner zou moeten kennen

Inhoudsopgave

Wat is een gradiƫnt?

Een gradiĆ«nt is een geleidelijke overgang van de ene kleur naar de andere. Het stelt ontwerpers in staat om bijna een nieuwe kleur te creĆ«ren. 

Gradiƫnten laten objecten opvallen door een nieuwe dimensie en realisme aan een ontwerp toe te voegen. Simpel gezegd, gradiƫnten voegen diepte toe aan een afbeelding.

We kunnen gradiƫnten ook kleurmappen noemen omdat het kleurenschema varieert langs de gradiƫnt, in tegenstelling tot effen kleuren die slechts ƩƩn HEX-code hebben.

Dit is een voorbeeld van een lineaire of axiale gradiƫnt:

Dit soort gradiƫnt begint met twee kleuren aan tegenovergestelde uiteinden van het element. In dit geval is het een lichtere blauwe kleur in de linkerbovenhoek en een donkerdere blauwe kleur in de rechterbenedenhoek. De kleur gaat vloeiend over tussen de twee.

Dit is een voorbeeld van een radiale gradiƫnt:

Dit soort gradiƫnt begint ook met twee kleuren. Echter, de lichtere groene kleur begint in het midden van de afbeelding en straalt naar buiten tot het de donkerdere groene kleur wordt.

We hebben kleurgradiƫnten in van alles zien gebruiken. Van producten en verpakkingen zoals de parfumlijn van Zara:

Tot haarkleurtrends zoals we de laatste jaren bij beroemdheden hebben gezien. Beroemdheden zoals Cardi B, Sarah Michelle Gellar, en Kylie Jenner hebben allemaal geƫxperimenteerd met gradiƫnten:

De digitale wereld is ook niet vreemd aan de overname van gradiƫnten. App-ontwerpers spelen al een tijdje met gradiƫnten. In 2016 verraste Instagram iedereen met hun gradiƫnt-redesign en kijk nu eens naar de staat van onze populairste producten:

Kleurgradiƫnten zijn tegenwoordig een populaire webdesign trend en kunnen worden toegepast op verschillende elementen van een website. Bijvoorbeeld:

  • Logo’s
  • Kop-elementen
  • Achtergronden
  • Typografie
  • Icoontjes
  • Foto’s
  • Knoppen

In de rest van dit bericht zullen we naar talloze voorbeelden kijken van merken die laten zien welke gave dingen je kunt doen met webdesign gradiƫnten.

Waarom gradiƫnten gebruiken in webdesign

De laatste jaren is er een opleving van kleurgradiƫnten in webdesign. Vergelijkbaar met waarom Material Design en Flat Design 2.0 populair werden, bieden kleurgradiƫnten ons een manier om meer textuur, diepte en opwinding toe te voegen aan een webpagina die anders plat en levenloos is.

Er zijn nog meer redenen waarom we gradiƫnten op websites gebruiken:

Om nieuwe kleurenschema's te creƫren

De algemene regel bij het kiezen van een kleurenpalet voor een website is om niet meer dan twee of drie kleuren te selecteren. Maar in plaats van ƩƩn kleur tegelijk te gebruiken, kun je met kleurgradiƫnten met meerdere kleuren tegelijk ontwerpen.

Kijk eens naar dit voorbeeld van Spotify:

In plaats van een effen paarse, blauwe of zwarte achtergrond voor de hero-sectie te gebruiken, gebruikt de ontwerper een gradiƫnteffect om ze allemaal te mengen.

Dit is niet de enige plek waar Spotify gradiĆ«nten gebruikt. Spotify’s Loud Clear rapport zit bomvol gradiĆ«ntachtergronden en animaties:

Deze kleurpaleutkeuze brengt veel leven en plezier in het Spotify-merk, waar gebruikers en artiesten het ook online tegenkomen.

Om bezoekers te boeien

Het uiterlijk van een kleurgradiƫnt op zich kan al behoorlijk boeiend zijn, zelfs als de kleuren ingetogen zijn en de overgang subtiel. Dat gezegd hebbende, hoeven gradiƫnten niet statisch te zijn.

Kijk maar eens naar de Stripe website voor een voorbeeld van kleurgradiƫnten in beweging:

Er zijn hier veel kleuren in het spel, en toch voelt het niet overdreven. In plaats daarvan creƫert de bijna lava-achtige manier waarop ze in elkaar overvloeien een effect dat onmogelijk te missen is.

Om bezoekers te helpen hun aandacht te richten

Er zijn veel manieren waarop je de aandacht van een bezoeker kunt trekken met webdesign. Kleurgradiƫnten zijn in dit opzicht erg handig.

Neem dit voorbeeld van Pepsi:

Veel gebieden van deze homepage bevatten effen tinten blauw. Maar als bezoekers dit punt op de pagina bereiken, zou de radiale gradiƫnt hen moeten dwingen te stoppen. Het komt niet door de gradiƫnt zelf, maar meer door het spotlichteffect dat het rond de Pepsi-blikje creƫert.

Lineaire gradiƫnten kunnen ook worden gebruikt om de aandacht te sturen. Meestal worden ze directioneel gelegd om de ogen van de bezoekers de juiste kant op te laten bewegen op de pagina.

Sketch doet dit door de hele homepage heen. Kijk naar deze gradiƫnt-gevulde vorm in de hero-sectie:

De lichtere randen van de gradiƫnt zullen waarschijnlijk meer aandacht krijgen dan het donkere binnenste. Terwijl de ogen van de bezoekers naar de lichtere randen bewegen, zal de naar rechts wijzende pijlpunt hen verder naar de introductie van de site wijzen.

Je ziet de gradiƫnten ook lager op de pagina. Ook hier helpen de lichtere gebieden van de blokken de ogen van gebruikers te focussen op de boodschappen erin.

Om het ontwerp memorabeler te maken

Weet je nog toen Instagram zijn logo opnieuw ontwierp? Het was een grote deal en iedereen had het erover (om zowel goede als slechte redenen), zoals Matt Knorr op Medium.

Het was misschien niet de beste keuze qua bruikbaarheid, maar het liet een memorabele indruk achter bij de gebruikers en dit gradiƫntontwerp heeft het tot op de dag van vandaag behouden.

Amdocs is een ander merk dat de weg van gradiƫnt-branding is ingeslagen:

De menu-indicatoren, knoppen en hover-effecten met kleurverloop van Amdocs springen echt in het oog tegen de donkere achtergrond van de website. Ze komen ook voor over grotere vlakken, in tegenstelling tot Instagram waar de branding meestal als piepkleine details in de app verschijnt en meestal tegen een witte of grijze achtergrond.

Wat nog cooler is, belangrijke delen van de tekst gebruiken een kleurenpalet met verloop. Hiermee bereikt Amdocs twee doelen. De eerste is om hun typografie onvergetelijk te maken. De tweede is om hun merkboodschap te benadrukken.

Hoe Je Kleurverlopen Maakt in Webdesign

Er zijn drie gebruikelijke manieren om kleurverlopen te maken voor een website:

Optie 1: Gebruik CSS3

Als je comfortabel bent met het coderen van stijlen in je WordPress website, kun je op die manier kleurverlopen toevoegen. Het codefragment zal er ongeveer zo uitzien: 

				
					background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);

Maak je geen zorgen als je niet gewend bent om CSS vanaf nul te schrijven. Je kunt CSS Gradient gebruiken om je kleurverlopen te maken:

Met deze tool kun je:

  • Kleuren toevoegen of verwijderen
  • Instellen waar ze beginnen en eindigen
  • De intensiteit verhogen of verminderen
  • Het kleurverloop lineair of radiaal maken
  • De rotatiehoek veranderen

Als je klaar bent met het configureren van de instellingen, scroll je naar beneden en pak je de CSS.

Als je het nog simpeler wilt maken, kun je in plaats daarvan ColorSpace’s 3-kleuren verloopgenerator gebruiken:

Kies gewoon de drie kleuren die je wilt gebruiken, stel de oriĆ«ntatie in en klik op ‘Genereren’. Je CSS-codes verschijnen eronder.

Optie 2: Gebruik Kant-en-klare Kleurverlopen

Als je liever niet je eigen kleurverlopen bedenkt, kun je altijd kant-en-klare kleurverlopen online vinden.

uiGradients is een goede keuze als je hulp wilt bij het bedenken van kleurverloopschema’s op basis van de primaire kleur waarmee je werkt:

Je kunt dan de CSS van het kleurverloop dat je leuk vindt pakken of het opslaan als een JPG als je het als achtergrond op je site wilt gebruiken.

Een andere optie is WebGradients.com:

Je kunt deze kleurverlopen opslaan als een CSS-snippet, een PNG of je kunt het hele pakket van 180 kleurverlopen downloaden voor Sketch of Photoshop (als je daar je ontwerpen maakt).

Grabient is nog een gratis tool die komt met een lading kant-en-klare kleurverlopen. Je hebt echter wat meer controle over hoe je kleurverloop eruit komt te zien:

Je kunt de rotatie van het kleurverloop veranderen, kleuren toevoegen of verwijderen en de kleurpercentages aanpassen.

Optie 3: Maak Kleurverlopen in Elementor

Als je liever het werk binnen WordPress doet, kun je dit gemakkelijk doen met Elementor.

Om te beginnen kun je eenvoudig kleurverlopen als achtergrond instellen:

Je kunt ook filtereffecten toevoegen aan je afbeeldingen en video’s met Elementor. Je hebt volledige controle over hoe je kleurverlopen eruit zien vanuit het Stijl-paneel:

Het zijn niet alleen de grotere componenten van je website waaraan je kleurverlopen kunt toevoegen. Je kunt ook kleurverlopen toevoegen aan kleinere elementen zoals knoppen:

Kleurverlopen trekken gegarandeerd de aandacht waar ze ook worden gebruikt, dus het is logisch om ze te gebruiken bij het ontwerpen van je call-to-action.

Tips voor Kleurverloop Ontwerp

Net als bij het kleurenpalet van een website, moet je goed nadenken over je kleurverlopen. Hier zijn een paar tips om in gedachten te houden:

1. Voeg een Derde Kleur Toe aan Je Kleurverlopen om een Grijs Midden te Voorkomen

Als je een aantrekkelijk kleurverloop wilt ontwerpen, heb je meer dan twee kleuren nodig:

  • EĆ©n voor Ć©Ć©n <kant-of-hoek>
  • EĆ©n voor de <lineaire-kleurstop>
  • EĆ©n voor de andere <kant-of-hoek>

Als je geen tussenliggende <lineaire-kleurstop> instelt, is er een kans dat het kleurverloop niet zo vloeiend overgaat en je een grijzige kleur ertussen krijgt. Zoals dit:

Door een kleurwaarde in te stellen tussen de twee <kant-of-hoek> waarden, kun je voorkomen dat dit gebeurt. Hier is een manier om het te fixen:

Als je echt een knallende kleurenpracht wilt maken, is de derde kleurwaarde een makkelijke oplossing voor dat probleem. Als je liever de gradiƫnt wat subtieler houdt, probeer dan kleurwaarden te vinden die op elkaar lijken.

2. Kies een Primaire Kleur Die de Juiste Signalen Afgeeft

Alleen omdat je een uniek kleureffect maakt met een gradiƫnt, betekent niet dat je kleurentheorie overboord kunt gooien. Zorg ervoor dat je een primaire kleur kiest die de juiste sfeer creƫert en de juiste emoties overbrengt.

3. Zorg voor Kleurcontrast, maar Geen Conflict

Er is een groot verschil tussen kleuren die contrasteren met elkaar en kleuren die gewoon niet goed bij elkaar passen.

Gebruik Canva’s kleurenwiel tool om geschikte opties te verkennen:

Stel je primaire kleur in het eerste veld in. Gebruik dan de kleurcombinatie generator om kleurcombinaties voor je gradiƫnt te verkennen.

4. Weet Altijd Waar Je Lichtbron Is

Zelfs als je gradiĆ«nt er meer surrealistisch dan natuurlijk uitziet, moet je ‘m ontwerpen met een lichtbron in gedachten. De richting waar het licht vandaan komt, bepaalt welk soort gradiĆ«nt je gebruikt (lineair vs. radiaal) en hoe helder de lichtere kant van de gradiĆ«nt moet zijn.

Bijvoorbeeld, de EMBA for Eurasia pagina heeft een duidelijke lichtbron die van de rechterkant komt:

Dit gradiƫntontwerp lijkt op de soort gradiƫnten die we zien als de zon opkomt of ondergaat tegen een prachtig landschap.

Je kunt de richting van de gradiĆ«nt ook gebruiken om bezoekers efficiĆ«nter door de pagina te leiden naar de belangrijkste delen ervan – wat aan de lichtere kant zou moeten zijn.

De Orson website heeft hier een interessant voorbeeld van:

De geanimeerde gradiĆ«ntbol doet hier een paar dingen. Ten eerste benadrukt het echt de hoofdboodschap van “Building Trust”. Ten tweede zorgen de lichtere gebieden in combinatie met de animatie ervoor dat deze site energiek aanvoelt, en dat zou bezoekers moeten aanzetten om verder te kijken naar wat er nog meer voor hen in petto is.

Je kunt ook het ontwerpprincipe van visuele hiƫrarchie gebruiken om de hoeveelheid licht versus donker langs de gradiƫnt te veranderen om bezoekers indirect te laten zien waar ze hun aandacht op moeten richten.

5. Wees Voorzichtig met Banding

Bandings zijn lijnen die verschijnen in kleurgradiƫnten. Dus in plaats van een soepele overgang van de ene kleur naar de andere te zien, zullen bezoekers een subtiele afbakening tussen de kleurwaarden zien.

Hier is een voorbeeld:

Dit gebeurt wanneer er niet genoeg kleurwaarden zijn om de gradiƫnt volledig op te vullen. Er zijn een aantal redenen waarom dit gebeurt.

Om te beginnen kan de bitdiepte van de afbeelding te laag zijn. Het komt ook vaker voor bij grote afbeeldingen. Dat komt omdat grote afbeeldingen te veel afstand creƫren tussen de twee kleuren om de ruimte ertussen soepel op te vullen. En als er een enorm contrast is tussen je kleuren, is de kans groter dat je het ook ziet.

Als je worstelt met banding, gebruik dan je beeldbewerkingssoftware om te proberen die banden glad te strijken met ruis- en dither-instellingen. Of misschien moet je gewoon experimenteren met andere kleuren.

Hier zie je wat er gebeurt als de bovenstaande gradiƫnt meer analoge kleuren gebruikt:

De meeste banding is nu verdwenen uit dit kleurstaal. Het is misschien niet het meest levendige palet, maar het laat de gradiƫnt er niet meer zo kunstmatig uitzien.

Laten we eens kijken naar een echt voorbeeld van hoe je dit kunt doen. Deze is van UR Bureau en laat zien hoe je een gradiƫnt levendig kunt maken zonder te ver te gaan met kleurcombinaties:

Houd er rekening mee dat dit geen harde regel is om te volgen. Er zijn genoeg webontwerpers die extreme gradiƫnten gebruiken zonder tegen het probleem van banding aan te lopen. Vaak wordt vervaging gebruikt en krijgen de gradiƫnten een meer bokeh-achtige look.

Hier is zo’n voorbeeld van Virgile Guinard:

En nog een van grafisch ontwerper Jemima:

Het is een ontwerpkeuze die we steeds vaker zien op websites van creatievelingen. Zolang ze de look van de artiesten hun portfolio’s niet verpesten, kunnen deze regelbrekende keuzes echt goed werken.

Zeus Jones is een creatief bureau dat heeft gekozen voor grensverleggende gradiƫnten. Deze geanimeerde achtergrond verschijnt alleen bovenaan de homepage:

De rest van de site gebruikt strakke, effen achtergrondkleuren om ervoor te zorgen dat het werk en de boodschap afleidingsvrij blijven.

6. Voorbeelden van Verbluffende Webdesign Gradiƫnten

Er zijn zoveel manieren waarop ontwerpers tegenwoordig gradiƫnten gebruiken op het web. Laten we eens kijken naar enkele van de populairste trends:

1. Zachte, Subtiele Gradiƫnten

De Recess homepage heeft een aantal gradiƫnten, maar degene om op te focussen komt ongeveer halverwege de pagina. De blauwe luchtachtergrond gaat langzaam over in roze. Wanneer bezoekers naar beneden scrollen om de inhoud te lezen en naar de graphics te kijken, merken ze de overgang misschien niet eens op totdat de achtergrond is overgegaan in een veel donkerder roze.

Gucci Beauty is een ander prachtig voorbeeld van zachte gradiƫnten in actie:

Deze vereist echter niet dat bezoekers scrollen om het oogstrelende te ervaren. De roterende achtergrond van zachte gradiƫnten bevindt zich boven de vouw.

2. Meerkleurige Gradiƫnt Achtergronden

Het KIKK Festival heeft altijd een bizarre website om zijn jaarlijkse conferentie te promoten. Dit is een goed voorbeeld van hoe je met talloze kleuren in ƩƩn gradiƫnt kunt spelen zonder dat het overweldigend aanvoelt. Verspreid over de hele lengte van de homepage gaan de kleuren langzaam over van de ene naar de andere.

Stemmingsverbeterende Gradiƫnt Effecten

Air Ocean Cargo is een echt interessant voorbeeld. Hun boodschap lijkt op die van Recess in die zin dat ze willen dat bezoekers ‘Ontspannen’. Hun gebruik van gradiĆ«nten is echter enorm verschillend.

In dit geval zien we een radiale gradiƫnt meebewegen op het opbeurende en pakkende ritme van de muziek die op de site speelt. De kleur verandert als de bezoeker van nummer wisselt via de controller rechtsboven. Als de bezoeker de muziek pauzeert, wordt de gradiƫnt een zachte halo-vorm.

3. 3D Gradiƫnten

Julie Bonnemoy’s freelance design portfolio heeft een lavalamp-achtig effect als hero graphic. De 3D blobs zweven rond in het gedeelte, waarbij af en toe Julie’s welkomstboodschap voor bezoekers zichtbaar wordt. Het iriserende gradiĆ«ntontwerp is zeker boeiend en het doet je afvragen welke andere soorten spektakels haar portfolio voor je in petto heeft.

The Adova Group heeft als missie om mensen te helpen ontspannen (in dit geval om ze beter te laten slapen). Het is een trend die het opmerken waard is als je een site ontwerpt voor een merk met een vergelijkbare missie. Er is duidelijk een verband tussen het idee van ontspanning en de uitstraling van gradiƫnten:

Zelfs als je een website ontwerpt voor iemand die niet in de gezondheids- en wellnessbranche zit, kun je nog steeds inspiratie putten uit dit surrealistische 3D-landschap. Kijk eens wat er aan het einde van deze GIF met de bol gebeurt. Het gradiƫntontwerp geeft het nu-datavisualisatie-element een 3D-uiterlijk. Dat alleen al is een cool concept dat op verschillende websites kan worden toegepast.

4. Gradiƫnten op Website Afbeeldingen

Het is niet altijd makkelijk om de perfecte onbewerkte foto voor een website te vinden. Gelukkig hebben we genoeg tools die het makkelijk maken om de kleur van onze afbeeldingen aan te passen of er filters aan toe te voegen, zodat ze precies de look en vibe uitstralen die we nodig hebben.

Overweeg bij het kiezen van kleurfilters om een gradiƫntfilter toe te passen zoals Adobe hier doet:

De Running on Experience landing page heeft een aantal afbeeldingsgradiƫntfilters zoals deze. Hier is nog een voorbeeld:

Deze afbeeldingsgradiƫnten zijn interessant omdat het niet de typische vermenging is van de ene kleur naar de andere. Het is alleen het onderwerp van de foto dat in een gradiƫntfilter is gedompeld.

Omdat dit rapport helemaal over transformatie gaat, werkt de gradiƫntfilter bijna als een symbolische weergave van de transformatie die het onderwerp ondergaat. Het is pas bij de laatste afbeelding dat we haar helemaal vrij zien van filters of gradiƫnten.

Een andere manier om te experimenteren met gradiƫnten op afbeeldingen is door een filter met ƩƩn kleur te gebruiken en die uit te laten vervagen. Het verandert eigenlijk de transparante en ondoorzichtige kanten van de filter in twee verschillende kleuren.

5. CTA-knop Gradiƫnten

De JLo Beauty website zit vol met iriserende glans, van de achtergrondafbeeldingen tot de productfoto’s. De knoppen zijn qua stijl niet anders, maar wel in hoe ze reageren op de aanraking van bezoekers:

Als iemand over een van de ‘Toevoegen aan Tas’ knoppen zweeft, komt de gradiĆ«ntkleur voor heel even tot leven.

Je hoeft niet het hele knopontwerp een gradiƫnt te maken als je dat niet wilt. Croma gebruikt bijvoorbeeld strategisch gradiƫnten door de hele site. Een van de toepassingen is als een hover-geactiveerde knopanimatie:

Zodra de gebruiker over elk van de klikbare vakjes of knoppen zweeft, verschijnt er een gradiƫntrand. Dit soort hover-bevestigingseffect zou ook handig zijn in de navigatie.

6. Afbeeldingen met Natuurlijke Gradiƫnten

Gradiƫnten komen van nature voor in onze wereld. Kijk maar naar de lucht of de oceaan. Overweeg bij het selecteren van afbeeldingen voor je site om hun eigen gradiƫnten in je ontwerp te integreren, zoals Honest Tea hier heeft gedaan. Het creƫert een echt uniek effect dat zeker veel bezoekers zal verrassen (op een goede manier).

Gebruik Gradiƫnten Om een Opwindende Ervaring te Creƫren

Als je op zoek bent naar een leuke en unieke manier om de websites van je klanten tot leven te brengen, zijn kleurgradiƫnten misschien wel de webdesign-trend om dit jaar uit te proberen. Ze maken niet alleen anders platte en effen kleuren levendiger en spannender om naar te kijken, maar ze zijn ook handig om de aandacht te focussen en de betrokkenheid te verbeteren.