Kortversionen
- Platt färg vinner där tydlighet, exakt återgivning och små storlekar spelar roll, som ikoner, gränssnittskontroller, bakgrunder till brödtext och enfärgstryck.
- Gradienter vinner där en yta behöver stämning, djup eller särprägel, som bakgrunder, omslag, hero-ytor, inlägg i sociala medier och varumärkesfält.
- En gradients kontrast ändras över dess yta, så text på den måste kontrolleras vid sämsta punkten, inte i genomsnitt.
- De flesta starka visuella identiteter använder en gradient som signatur och en platt färg ur den som vardaglig reserv.
- Skärmar svängde från blanka, texturerade stilar till platt design i början av 2010-talet och tillbaka mot mjukare gradienter senare, så ingen av dem är helt enkelt modern eller omodern.
På den här sidan
I frågan om gradient eller platt design vinner ingen sida överallt. Platt färg är tydligare, återges exakt och klarar små storlekar och enfärgstryck. Gradienter bär stämning, antyder ljus och djup och ger ett varumärke mycket mer utrymme att vara särpräglat. Det praktiska svaret för de flesta varumärken är båda: en gradient där ytan är stor och uttrycksfull, och en platt färg, hämtad ur gradienten, där uppgiften är liten, funktionell eller tryckt i ett bläck.
Där platt färg vinner
- Små storlekar: favicons, appmärken och ikoner tappar en gradients detaljer, medan en platt färg förblir skarp
- Gränssnittskontroller: knappar, reglage och lägen läses tydligare när varje läge är en färg
- Bakom lång text: konstant kontrast betyder att varje rad är lika läsbar
- Enfärgstryck: broderi, screentryck, gravyr, stämplar och jobb med ett enda bläck kan inte återge en övergång
- Exakt matchning: en enda specialfärg kan matchas mellan material mycket säkrare än en övergång
- Diagram och data: platta färger håller kategorier åtskilda och jämförbara
Där gradienter vinner
- Stora ytor: bakgrunder, omslag, hero-ytor och affischer där platt färg känns tom
- Stämning och ljus: en övergång antyder en tid på dygnet, ett material eller en glöd som en enda färg inte kan
- Särprägel: det finns bara så många urskiljbara enskilda nyanser, och de flesta är tagna i varje kategori
- Sociala flöden: ett välbyggt gradientfält sticker ut i en scroll av foton och platta mallar
- Djup i gränssnitt: en subtil gradient på en hero eller ett primärt kort skiljer lager åt utan skuggor
- Rörelse: gradienter kan driva och andas; se animerade gradientbakgrunder
Gradient eller platt, faktor för faktor
| Faktor | Platt färg | Gradient |
|---|---|---|
| Läsbarhet | Konstant kontrast överallt | Kontrasten varierar; kontrollera sämsta punkten |
| Igenkänning | Stark om du äger en sällsynt nyans | Stark om receptet förblir konsekvent |
| Särprägel | Begränsad av antalet nyanser | Ett enormt utrymme av kombinationer |
| Små storlekar | Utmärkt | Ofta grumlig eller borttappad |
| Tryck | Exakt, även i ett bläck | Kräver fyrfärg; kan få band eller skifta |
| Gränssnittslägen | Tydliga och förutsägbara | Bäst hållen till ett eller två betoningsområden |
| Stämning och djup | Begränsat | Utmärkt |
| Filstorlek och arbete | Trivialt | Litet i CSS, större som bilder och video |
Frågan om läsbarhet
På en platt bakgrund gäller att om ett ord klarar kontrasten så gör alla det. På en gradient ändras kontrasten när färgen ändras, så en rubrik kan läsas perfekt i ena änden och försvinna i den andra. Mät alltid kontrasten vid den ljusaste punkten bakom ljus text, eller den mörkaste punkten bakom mörk text. Hela metoden finns i text på en gradient och färgkontrast och tillgänglighet.
En gradient som löper rakt genom orden: kontrasten ändras bokstav för bokstav.
Samma gradient som gör plats för orden: uttrycket finns kvar, läsbarheten är tillbaka.
En kort historia: platt, sedan gradienter igen
Under 2000-talet var skärmar blanka: fasade knappar, glasiga högdagrar och texturer som imiterade läder och papper. I början av 2010-talet gick stora operativsystem över till platt design, med solida färger, enkla ikoner och inget falskt djup, och stora delar av webben följde efter. Från mitten av 2010-talet återvände mjukare gradienter, nu som jämna övergångar mellan två eller tre färger snarare än blanka effekter, och några mycket synliga varumärkesikoner bytte till gradienter. Mer i gradienternas historia.
Lärdomen är att ingen stil är permanent modern. Det som gör en design daterad är den specifika behandlingen: kraftig glans daterar en gradient, och en standardpalett daterar platt färg.
Så avgör du för varje yta
- 1
Fråga vad ytan är till för
Om den hjälper folk att agera, läsa eller jämföra, luta åt platt. Om den sätter en stämning eller presenterar varumärket, luta åt gradient.
- 2
Kontrollera storleken
Under ungefär ikonstorlek, använd platt. Gradienter behöver utrymme för att visa sin övergång.
- 3
Kontrollera hur den ska återges
Ett bläck, en tråd eller en gravyr betyder platt. Skärmar och fyrfärgstryck kan bära en gradient.
- 4
Kontrollera orden
Lång text vill ha en platt eller mycket lugn botten. En rubrik kan ligga på en gradient om kontrasten håller vid sämsta punkten.
- 5
Håll dem besläktade
Hämta dina platta färger ur din gradient så att de två alltid ser ut som ett varumärke.
Välj platt för
- Favicons, appmärken och små ikoner
- Knappar, reglage, flikar och formulärlägen
- Sidor med brödtext och datatabeller
- Broderi, stämplar och tryck i ett bläck
Välj gradient för
- Omslag, affischer och inlägg i sociala medier
- Webbplatsers hero och lanseringssidor
- Varumärkesfält bakom logotyper och rubriker
- Loopar, bakgrundsbilder och presentationsöppningar
Använd båda: en gradient med en platt reserv
De starkaste systemen behandlar gradienten som signaturen och väljer en eller två platta färger inuti den för vardagliga uppgifter. Den djupaste tonen blir text- eller ikonfärg, en mellanton blir knappfärg, och själva gradienten syns på omslag, hero-ytor och inlägg. Så får du uttryck och funktion utan två obesläktade paletter. Gradient i varumärket går igenom det.
Varje Mark i Gradiently är en gradient med sin egen palett inbyggd, så de platta färgerna för text, knappar och små storlekar kommer från samma recept som bakgrunden.
Vanliga frågor
Är platt design bättre än gradienter?
Ingen är bättre överallt. Platt färg är bäst för små storlekar, gränssnitt och enfärgstryck; gradienter är bäst för stora, uttrycksfulla ytor och särprägel.
Är gradienter omoderna?
Nej. Kraftiga blanka gradienter ser föråldrade ut, men mjuka gradienter i två eller tre färger används flitigt i dagens varumärkesidentiteter och gränssnitt.
Ska min logotyp vara en gradient eller en platt färg?
Många logotyper använder en gradientversion för stor skärmanvändning och en platt version för små storlekar och enfärgstryck. Du behöver den platta versionen oavsett.
Är text svårare att läsa på en gradient?
Det kan den vara, eftersom kontrasten ändras över gradienten. Kontrollera kontrasten vid sämsta punkten bakom texten, eller behåll ett lugnt område för ord.
Kan jag använda gradienter och platta färger tillsammans?
Ja, och de flesta starka varumärken gör det. Hämta de platta färgerna ur gradienten så att allt matchar.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil
