Gradientdesign: 25 ideer for innlegg, presentasjoner og merkevarer

Gradientdesign er å bruke fargeoverganger som en strukturell del av en layout, ikke bare som bakgrunnsfyll. Ideene nedenfor gir gradienten en jobb hver: å peke, å skille, å sette en stemning eller å bli gjenkjent. De er gruppert etter hvor du skal bruke dem, innlegg, presentasjoner, merkevarer og nettet, og hver kommer med layouten eller koden du trenger for å prøve den.

Trenger du farger først, kan du starte med fargekombinasjoner for gradienter og komme tilbake for å bestemme hva du skal gjøre med dem.

Ideer til gradientdesign for innlegg i sosiale medier

1. Overskrift i spotlight. Én kort linje på det lyseste området av en radial glød. Lyset forteller folk hvor de skal lese.
2. Plakat med ett ord. Ett enkelt stort ord på et rikt felt. Det fungerer bare hvis ordet fortjener plassen, så velg et verb eller et navn.
3. Delt felt. To gradienter som møtes i en hard kant, én for overskriften og én for detaljene. Kanten blir en linje i layouten.
4. Tallkort. Et stort tall på en rolig gradient med en forklaring på én linje. Hold feltet stille, så tallet dominerer.

1. Spørsmålsinnlegg. Et spørsmål som overskrift, med svaret lovet i bildeteksten. Gradienter passer til dette fordi de føles åpne og ikke ferdige.
2. Sitat på et mykt felt. Et kort sitat på en gradient med lav kontrast, med liten kildeangivelse. Mykhet leses som gjennomtenkt; hard farge slåss med ordene.
3. Nedtellingsserie. Den samme gradienten, flyttet noen grader varmere hver dag fram til lanseringen. Serien ser planlagt ut, og endringen bygger forventning.
4. Duotone-bilde. Et bilde tilordnet de to endefargene i gradienten din, så fotografi og bakgrunn hører sammen. Se duotone.

Ideer til gradientdesign for presentasjoner

1. Tittelbilde med horisont. En mørk topp som toner ut mot et opplyst bånd nær bunnen, med tittelen rett over. Det leses som en soloppgang og gir foredraget en begynnelse.
2. Seksjonsskiller i rekkefølge. Hvert seksjonsskille tar neste steg på én reise gjennom fargetonene. Folk vet hvor langt de har kommet, uten en framdriftslinje.
3. Stille datalysbilder. Lysbilder med innhold og diagrammer bruker en nesten flat versjon av samme gradient, så dataene bærer fargen. Bakgrunner til presentasjoner går gjennom kontrast for tekst.
4. Speilvendt sluttbilde. Det siste lysbildet snur gradienten fra tittelbildet, topp mot bunn. Det lukker sirkelen visuelt.
5. Lyst til mørkt. Start lyst og slutt mørkt, eller omvendt, hvis foredraget går fra problem til svar. Fargen støtter historien i det stille.
6. Ramme, ikke fyll. En tynn gradientkant rundt et nøytralt innholdsområde holder et tett lysbilde leselig og er fortsatt i tråd med merkevaren.

Ideer til gradientdesign for merkevarer

1. Én signaturgradient og en reservefarge. Velg én overgang og én flat farge fra den til favikoner og enfarget trykk.
2. En familie for produktlinjer. Behold strukturen og vinkelen, og gi hver linje sin egen fargetone. Familien forblir gjenkjennelig mens hvert produkt er tydelig sitt eget.
3. Gradient bare bak logoen. Bruk gradienten på ett sted, logooppsettet eller appikonet, og flat farge ellers. Knapphet gjør den minneverdig.
4. Sesongskifter. Flytt den samme gradienten litt varmere om sommeren og kjøligere om vinteren, uten å endre strukturen.
5. Gradient som materiale. Legg til korn, silkeglans eller papirstruktur, så gradienten føles som en overflate. Tekstur er vanskeligere å kopiere enn farge.
6. Trykksaker. Ta med gradienten over på kort, klistremerker og emballasje, planlagt for blekk. Gradienter på trykk forklarer hva som endrer seg på papir.

Merkevareideene fungerer bare med konsekvens: de samme fargene, vinkelen og teksturen i alle formater. Gradient i merkevarebygging går inn på hvordan du eier en i stedet for å låne den.

Ideer til gradientdesign for nettsteder og bevegelse

1. Glød i heroen. En myk radial glød bak et skjermbilde av produktet løfter det opp fra siden uten skygge.
2. Ett gradientord. Legg en gradient på ett enkelt ord i en overskrift, aldri på hele avsnittet. Se gradienttekst.
3. Langsom loop. En bakgrunn som beveger seg så sakte at den først merkes etter noen sekunder. Den føles levende uten å konkurrere med ordene.
4. Gradientkanter på kort. En gradientkant på 1 eller 2 piksler rundt ellers flate kort gir en side en signatur med nesten ingen visuell vekt.
5. Fargeskifte ved rulling. Hver seksjon på en lang side ligger på neste steg av én gradient, så rullingen føles som å bevege seg gjennom lys.

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

Slik velger du riktig idé

Velg ideen som passer jobben, og bruk den konsekvent en stund. En gradient gjentatt i tjue innlegg gjør mer enn tjue smarte gradienter brukt én gang. Paletter for bestemte bransjer finner du i gradientideer etter bransje.