Gradient design: 25 ideeën voor posts, slides en merken

Gradient design is kleurverlopen gebruiken als dragend onderdeel van een lay-out, niet alleen als achtergrondvulling. De ideeën hieronder geven het kleurverloop elk een taak: wijzen, scheiden, een stemming zetten of herkend worden. Ze zijn gegroepeerd naar waar je ze gebruikt, posts, slides, merken en het web, en bij elk hoort de lay-out of de code om het te proberen.

Heb je eerst kleuren nodig, begin dan bij kleurcombinaties voor kleurverlopen en kom daarna terug om te beslissen wat je ermee doet.

Ideeën voor gradient design in social posts

1. Kop in de spotlight. Eén korte regel op het helderste deel van een radiale gloed. Het licht vertelt mensen waar ze moeten lezen.
2. Poster met één woord. Eén groot woord op een rijk veld. Het werkt alleen als het woord de ruimte verdient, dus kies een werkwoord of een naam.
3. Gedeeld veld. Twee kleurverlopen die elkaar raken op een harde rand, één voor de kop en één voor de details. De rand wordt een lijn in de lay-out.
4. Cijferkaart. Een groot getal op een rustig kleurverloop met één regel uitleg. Houd het veld stil, zodat het cijfer overheerst.

1. Vraagpost. Een vraag als kop, met het antwoord beloofd in het bijschrift. Kleurverlopen passen hierbij omdat ze open aanvoelen in plaats van af.
2. Citaat op een zacht veld. Een kort citaat op een kleurverloop met weinig contrast, de bron klein eronder. Zachtheid leest als doordacht, harde kleur vecht met de woorden.
3. Aftelreeks. Hetzelfde kleurverloop, elke dag tot de lancering een paar graden warmer. De reeks oogt gepland en de verandering bouwt verwachting op.
4. Duotone foto. Een foto omgezet naar de twee eindkleuren van je kleurverloop, zodat fotografie en achtergrond bij elkaar horen. Zie duotone.

Ideeën voor gradient design in slides

1. Titelslide met horizon. Een donkere bovenkant die overgaat in een verlichte band onderaan, met de titel er net boven. Het leest als een zonsopgang en geeft je verhaal een begin.
2. Sectieslides op volgorde. Elke sectieslide zet de volgende stap in één reis langs de tinten. Mensen weten hoe ver ze in de presentatie zijn, zonder voortgangsbalk.
3. Rustige dataslides. Inhouds- en grafiekslides gebruiken een bijna effen versie van hetzelfde kleurverloop, zodat de data de kleur draagt. Achtergronden voor presentaties behandelt contrast voor tekst.
4. Gespiegelde slotslide. De laatste slide keert het kleurverloop van de titelslide om, van boven naar beneden. Zo sluit je de cirkel in beeld.
5. Van licht naar donker. Begin licht en eindig donker, of andersom, als je verhaal van probleem naar antwoord gaat. De kleur ondersteunt het verhaal zonder op te vallen.
6. Kader, geen vulling. Een dunne rand met een kleurverloop rond een neutraal inhoudsvlak houdt een volle slide leesbaar en toch herkenbaar.

Ideeën voor gradient design voor merken

1. Eén eigen kleurverloop en een reserve. Kies één verloop en één effen kleur eruit voor favicons en drukwerk in één kleur.
2. Een familie voor productlijnen. Houd de opbouw en de hoek vast en geef elke lijn een eigen tint. De familie blijft herkenbaar terwijl elk product zich onderscheidt.
3. Alleen achter het logo. Gebruik het kleurverloop op één plek, de logocombinatie of het app-icoon, en elders effen kleur. Schaarste maakt het memorabel.
4. Verschuiven met de seizoenen. Maak hetzelfde kleurverloop in de zomer iets warmer en in de winter iets koeler, zonder de opbouw te veranderen.
5. Kleurverloop als materiaal. Voeg korrel, een zijden glans of papierstructuur toe, zodat het kleurverloop als een oppervlak aanvoelt. Textuur is moeilijker te kopiëren dan kleur.
6. Drukwerk. Neem het kleurverloop mee naar kaartjes, stickers en verpakkingen, en plan het voor inkt. Kleurverlopen drukken legt uit wat er op papier verandert.

De merkideeën werken alleen met consistentie: dezelfde kleuren, hoek en textuur in elk formaat. Branding met kleurverlopen gaat in op hoe je er een bezit in plaats van leent.

Ideeën voor gradient design op websites en in beweging

1. Gloed in de hero. Een zachte radiale gloed achter een screenshot van je product tilt het van de pagina, zonder slagschaduw.
2. Eén woord met kleurverloop. Zet een kleurverloop op één woord in een kop, nooit op de hele alinea. Zie tekst met kleurverloop.
3. Langzaam drijvende loop. Een achtergrond die zo traag beweegt dat je het pas na een paar seconden merkt. Het voelt levend zonder met de woorden te concurreren.
4. Randen met kleurverloop op kaarten. Een rand van 1 of 2 pixels met een kleurverloop rond verder effen kaarten geeft een pagina een eigen signatuur, bijna zonder visueel gewicht.
5. Kleur die meeschuift bij scrollen. Elke sectie van een lange pagina staat op de volgende stap van één kleurverloop, zodat scrollen voelt als bewegen door licht.

.headline .accent {
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Zo kies je het juiste idee

Kies het idee dat bij de taak past en gebruik het dan een tijd consistent. Eén kleurverloop dat in twintig posts terugkomt, doet meer dan twintig slimme kleurverlopen die je één keer gebruikt. Voor paletten per sector, zie kleurverloopideeën per branche.