Ni feil i gradientdesign som får arbeidet til å se billig ut

De vanligste feilene i gradientdesign er grå, grumsete midter, for mange farger, synlig banding, tekst som forsvinner, harde stopp, regnbueoverdose, korn som ikke stemmer, urørte forhåndsinnstillinger og et uttrykk som er identisk med alle andres. Hver av dem har en bestemt årsak og en bestemt løsning. Ingen krever et nytt verktøy, bare et nærmere blikk på hva overgangen gjør mellom stoppene.

Denne guiden tar de ni i den rekkefølgen du som regel møter dem, fra fargematematikken og opp til identiteten. Vil du ha det grunnleggende først, kan du lese hva en gradient er.

Feil 1: en grå, grumsete midte

Bland to farger fra hver sin side av fargesirkelen, som blått og oransje, og midtpunktet i sRGB blir en matt gråbrun. Nettleseren tar gjennomsnittet av den røde, grønne og blå kanalen, og gjennomsnittet av to komplementærfarger ligger nær nøytralt. Resultatet ser ut som en flekk mellom to gode farger.

Løs det ved å føre overgangen gjennom en farge som ligger mellom de to på sirkelen, eller ved å interpolere i et perseptuelt fargerom. Grumsete gradienter går gjennom begge metodene, og OKLCH i CSS forklarer syntaksen.

Feil 2: for mange farger

Hver farge du legger til, er én overgang til som øyet må lese. Med mer enn fire eller fem stopp slutter en gradient å leses som lys som faller over en flate, og begynner å leses som et stripediagram. Den blir også umulig å gjenskape likt to ganger.

Velg én fargefamilie, legg til en lysere og en mørkere slektning, og tillat høyst én aksent. Tilnærmingen med analoge farger er det tryggeste utgangspunktet.

Feil 3: striper av banding

Banding er trappen av synlige trinn du ser i en langsom gradient, særlig en mørk. En 8-biters kanal har 256 nivåer, og når en overgang beveger seg et kort stykke i farge over et bredt område, blir hvert nivå et bånd på flere piksler. Kraftig JPEG-komprimering gjør det verre.

.hero {
  position: relative;
  background: linear-gradient(160deg, #0b1020 0%, #1e1b4b 60%, #312e81 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

Korn fungerer fordi det sprer pikslene over nabonivåer, så kanten mellom to bånd forsvinner. Eksporter som PNG eller JPEG i høy kvalitet. Banding i gradienter går gjennom eksportinnstillingene i detalj.

Feil 4: tekst som forsvinner på gradienten

En gradient endrer seg under hver bokstav. Hvit skrift kan leses vakkert på den mørke enden av en overgang og forsvinne på den lyse enden av samme linje. Designere sjekker overskriften der den ser best ut, og leserne møter den der den ser verst ut.

Sjekk kontrasten på det lyseste punktet bak lys tekst, eller det mørkeste punktet bak mørk tekst. WCAG krever 4,5:1 for brødtekst og 3:1 for stor tekst; fargekontrast forklarer tallene, og tekst på en gradient går gjennom plasseringen.

Feil 5: harde stopp ved et uhell

Når to stopp ligger noen få prosent fra hverandre, smeller overgangen fra én farge til den neste og tegner en linje ingen ba om. Harde stopp er nyttige med vilje, til striper og diagrammer, men en tilfeldig søm leses som en feil.

Feil 6: regnbueoverdose

Et fullt spekter er det mest høylytte en gradient kan gjøre, og det sier sjelden noe om merkevaren som bruker det. Det bærer også assosiasjonene til hver eneste fargetone på én gang. Vil du ha en regnbue, bruker du en kort bue av den og styrer lysheten. Regnbuegradienter viser smakfulle versjoner.

Feil 7: korn som ikke stemmer

Tekstur er en del av et uttrykk, så ujevnt korn får et sett med design til å føles som om det kom fra tre steder. Kornete gradienter går gjennom hvor mye du bør bruke.

Feil 8: å levere forhåndsinnstillingen urørt

De fleste verktøy tilbyr de samme tofargede overgangene i 135 grader. De ser greie ut, og det er derfor de er overalt. En forhåndsinnstilling er et utgangspunkt: flytt én farge, legg til et tredje stopp, endre retningen så den passer layouten, og legg til et materiale. Å bruke en gradientgenerator går gjennom de endringene.

Feil 9: å se ut som alle andre

Den siste feilen er den dyre. En gradient som er godt laget, men i ånden identisk med alle konkurrentenes, gjør ingen jobb for gjenkjennelsen. Løsningen er konsekvens pluss noe som er vanskelig å kopiere, som et materiale, en måte å bevege seg på eller en måte å gi plass til ord på. Gradient i merkevarebygging forklarer hvordan du eier en.