Kort fortalt
- Ensfarvet vinder, hvor klarhed, præcis gengivelse og små størrelser er vigtige, som ikoner, betjeningselementer, baggrunde til brødtekst og tryk med én farve.
- Gradienter vinder, hvor en flade behøver stemning, dybde eller særpræg, som baggrunde, covers, topsektioner, sociale opslag og brandflader.
- En gradients kontrast ændrer sig over fladen, så tekst på den skal kontrolleres på det dårligste sted, ikke gennemsnittet.
- De fleste stærke visuelle identiteter bruger en gradient som signatur og en ensfarvet nuance fra den som reserve til hverdagsbrug.
- Skærme skiftede fra blanke, teksturerede stilarter til fladt design i begyndelsen af 2010’erne og senere tilbage mod blødere gradienter. Ingen af delene er derfor entydigt moderne eller forældet.
På denne side
I spørgsmålet om gradient eller ensfarvet design vinder ingen af delene overalt. Ensfarvede flader er klarere, gengives præcist og klarer bittesmå størrelser og tryk med én farve. Gradienter formidler stemning, antyder lys og dybde og giver et brand langt mere plads til særpræg. Det praktiske svar for de fleste brands er begge dele: en gradient, hvor fladen er stor og udtryksfuld, og en ensfarvet nuance fra gradienten, hvor opgaven er lille, funktionel eller trykt med én farve.
Her vinder ensfarvede flader
- Små størrelser: favicons, appmærker og ikoner mister gradientens detaljer, mens en ensfarvet flade forbliver skarp
- Betjeningselementer: knapper, omskiftere og tilstande er tydeligere, når hver tilstand har én farve
- Bag lang tekst: konstant kontrast betyder, at hver linje er lige læsbar
- Tryk med én farve: broderi, serigrafi, gravering, stempler og opgaver med én trykfarve kan ikke gengive en blanding
- Præcis farvetilpasning: en enkelt specialfarve kan matches på tværs af materialer langt mere pålideligt end en blanding
- Diagrammer og data: ensfarvede flader holder kategorier adskilte og sammenlignelige
Her vinder gradienter
- Store flader: baggrunde, covers, topsektioner og plakater, hvor en ensfarvet flade føles tom
- Stemning og lys: en blanding antyder et tidspunkt på dagen, et materiale eller en glød, som én farve ikke kan
- Særpræg: der findes kun et begrænset antal tydeligt forskellige enkeltfarver, og de fleste er taget i enhver kategori
- Sociale feeds: en velbygget gradientflade skiller sig ud blandt fotos og ensfarvede skabeloner
- Dybde i grænseflader: en diskret gradient på en topsektion eller et primært kort adskiller lag uden skygger
- Bevægelse: gradienter kan drive og ånde; se animerede gradientbaggrunde
Gradient eller ensfarvet, faktor for faktor
| Faktor | Ensfarvet | Gradient |
|---|---|---|
| Læsbarhed | Konstant kontrast overalt | Kontrasten varierer; kontrollér det dårligste sted |
| Genkendelse | Stærk, hvis du ejer en sjælden farvetone | Stærk, hvis opskriften er konsekvent |
| Særpræg | Begrænset af antallet af farvetoner | Et enormt antal kombinationer |
| Små størrelser | Fremragende | Ofte mudret eller usynlig |
| Tryk | Præcist, selv med én trykfarve | Kræver fuldfarvetryk; kan få striber eller farveskift |
| Tilstande i grænsefladen | Klare og forudsigelige | Bedst begrænset til et eller to fremhævede områder |
| Stemning og dybde | Begrænset | Fremragende |
| Filstørrelse og indsats | Minimal | Lille i CSS, større som billeder og video |
Spørgsmålet om læsbarhed
Hvis ét ord har tilstrækkelig kontrast på en ensfarvet baggrund, har alle ord det. På en gradient ændrer kontrasten sig med farven, så en overskrift kan være helt læsbar i den ene ende og forsvinde i den anden. Mål altid kontrasten på det lyseste sted bag lys tekst eller det mørkeste sted bag mørk tekst. Hele metoden findes i tekst på en gradient og farvekontrast og tilgængelighed.
En gradient, der løber lige gennem ordene: kontrasten ændrer sig bogstav for bogstav.
Den samme gradient med plads til ordene: udtrykket bliver, læsbarheden vender tilbage.
En kort historie: fladt design og så gradienter igen
Gennem 2000’erne var skærme blanke: knapper med affasede kanter, glasagtige højlys og teksturer, der efterlignede læder og papir. I begyndelsen af 2010’erne gik store operativsystemer over til fladt design med ensfarvede flader, enkle ikoner og ingen kunstig dybde, og meget af nettet fulgte efter. Fra midten af 2010’erne vendte blødere gradienter tilbage, nu som jævne blandinger af to eller tre farver frem for blanke effekter, og nogle meget synlige brandikoner skiftede til gradienter. Læs mere i gradienternes historie.
Læren er, at ingen stil er moderne for altid. Det, der får et design til at virke dateret, er den konkrete behandling: kraftig glans daterer en gradient, og en standardpalet daterer ensfarvede flader.
Sådan vælger du til hver flade
- 1
Spørg, hvad fladen er til
Hjælper den folk med at handle, læse eller sammenligne, så hæld mod ensfarvet. Sætter den en stemning eller introducerer brandet, så hæld mod gradient.
- 2
Kontrollér størrelsen
Brug ensfarvet under omtrent ikonstørrelse. Gradienter behøver plads til at vise deres blanding.
- 3
Kontrollér, hvordan den skal gengives
Én trykfarve, tråd eller gravering betyder ensfarvet. Skærme og fuldfarvetryk kan bære en gradient.
- 4
Kontrollér ordene
Lang tekst behøver en ensfarvet eller meget rolig bund. En overskrift kan stå på en gradient, hvis kontrasten holder på det dårligste sted.
- 5
Bevar forbindelsen
Hent dine ensfarvede nuancer fra gradienten, så de to altid ligner ét brand.
Vælg ensfarvet til
- Favicons, appmærker og små ikoner
- Knapper, omskiftere, faner og formulartilstande
- Sider med brødtekst og datatabeller
- Broderi, stempler og tryk med én farve
Vælg en gradient til
- Covers, plakater og sociale opslag
- Topsektioner på websites og lanceringssider
- Brandflader bag logoer og overskrifter
- Loops, baggrundsbilleder og præsentationsåbninger
Brug begge dele: en gradient med en ensfarvet reserve
De stærkeste systemer behandler gradienten som signaturen og vælger en eller to ensfarvede nuancer fra den til hverdagsopgaver. Den dybeste tone bliver tekst- eller ikonfarven, en mellemtone bliver knapfarven, og selve gradienten bruges på covers, topsektioner og opslag. Sådan får du udtryk og funktion uden to ubeslægtede paletter. Gradientbranding gennemgår det.
Hver Mark i Gradiently er en gradient med sin egen indbyggede palet, så de ensfarvede nuancer til tekst, knapper og små størrelser kommer fra samme opskrift som baggrunden.
Spørgsmål, folk stiller
Er fladt design bedre end gradienter?
Ingen af delene er bedst overalt. Ensfarvede flader er bedst til små størrelser, grænseflader og tryk med én farve; gradienter er bedst til store, udtryksfulde flader og særpræg.
Er gradienter forældede?
Nej. Tunge, blanke gradienter ser daterede ud, men bløde gradienter med to eller tre farver bruges bredt i nutidige brandidentiteter og grænseflader.
Skal mit logo have en gradient eller være ensfarvet?
Mange logoer har en gradientudgave til stor visning på skærm og en ensfarvet udgave til små størrelser og tryk med én farve. Du behøver den ensfarvede udgave under alle omstændigheder.
Er tekst sværere at læse på en gradient?
Det kan den være, fordi kontrasten ændrer sig over gradienten. Kontrollér kontrasten på det dårligste sted bag teksten, eller hold et roligt område fri til ordene.
Kan jeg bruge gradienter og ensfarvede flader sammen?
Ja, og det gør de fleste stærke brands. Hent de ensfarvede nuancer fra gradienten, så alt passer sammen.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil
