In breve
- Il colore piatto vince dove contano chiarezza, riproduzione esatta e dimensioni piccole, come icone, controlli dell’interfaccia, sfondi del testo lungo e stampa a un colore.
- I gradienti vincono dove una superficie ha bisogno di atmosfera, profondità o carattere distintivo, come sfondi, copertine, hero, post social e campi del brand.
- Il contrasto di un gradiente cambia lungo la sua superficie, quindi il testo va verificato nel punto peggiore e non nella media.
- La maggior parte delle identità visive forti usa un gradiente come firma e un colore piatto ricavato da esso come riserva di tutti i giorni.
- Gli schermi sono passati dagli stili lucidi e materici al flat design nei primi anni 2010, per poi tornare più tardi a gradienti più morbidi, quindi nessuno dei due è semplicemente moderno o datato.
In questa pagina
Nella questione gradiente o design piatto, nessuno dei due vince ovunque. Il colore piatto è più chiaro, si riproduce esattamente e sopravvive alle dimensioni minime e alla stampa a un colore. I gradienti portano atmosfera, suggeriscono luce e profondità e danno a un brand molto più spazio per essere distintivo. La risposta pratica per la maggior parte dei brand è entrambi: un gradiente dove la superficie è grande ed espressiva, e un colore piatto, ricavato dal gradiente, dove il compito è piccolo, funzionale o stampato con un solo inchiostro.
Dove vince il colore piatto
- Dimensioni piccole: favicon, badge di app e icone perdono i dettagli di un gradiente, mentre un colore piatto resta nitido
- Controlli dell’interfaccia: pulsanti, interruttori e stati si leggono più chiaramente quando ogni stato è un solo colore
- Dietro testi lunghi: un contrasto costante significa che ogni riga è leggibile allo stesso modo
- Stampa a un colore: ricamo, serigrafia, incisione, timbri e lavori con un solo inchiostro non possono riprodurre una sfumatura
- Corrispondenza esatta: un singolo colore diretto si può far corrispondere tra materiali in modo molto più affidabile di una sfumatura
- Grafici e dati: i colori piatti mantengono le categorie distinte e confrontabili
Dove vincono i gradienti
- Superfici grandi: sfondi, copertine, hero e poster dove il colore piatto sembra vuoto
- Atmosfera e luce: una sfumatura suggerisce un momento del giorno, un materiale o un bagliore che un solo colore non può
- Carattere distintivo: le tinte singole distinguibili sono limitate, e in ogni categoria la maggior parte è già presa
- Feed social: un campo di gradiente ben costruito si distingue in uno scroll di foto e template piatti
- Profondità nelle interfacce: un gradiente sottile su un hero o su una card principale separa i livelli senza ombre
- Movimento: i gradienti possono scivolare e respirare; vedi gli sfondi con gradiente animato
Gradiente o piatto, fattore per fattore
| Fattore | Colore piatto | Gradiente |
|---|---|---|
| Leggibilità | Contrasto costante ovunque | Il contrasto varia; controlla il punto peggiore |
| Riconoscibilità | Forte se possiedi una tinta rara | Forte se la ricetta resta coerente |
| Carattere distintivo | Limitato dal numero di tinte | Un enorme spazio di combinazioni |
| Dimensioni piccole | Eccellente | Spesso fangoso o perso |
| Stampa | Esatta, anche con un solo inchiostro | Richiede il colore pieno; può formare fasce o spostarsi |
| Stati dell’interfaccia | Chiari e prevedibili | Meglio limitarlo a una o due aree di enfasi |
| Atmosfera e profondità | Limitate | Eccellenti |
| Peso del file e lavoro | Trascurabili | Piccolo in CSS, maggiore come immagini e video |
La questione della leggibilità
Su uno sfondo piatto, se una parola supera il contrasto, lo supera ogni parola. Su un gradiente, il contrasto cambia al cambiare del colore, quindi un titolo può leggersi perfettamente a un’estremità e sparire all’altra. Misura sempre il contrasto nel punto più chiaro dietro il testo chiaro, o nel più scuro dietro il testo scuro. Il metodo completo è nel testo su un gradiente e in contrasto dei colori e accessibilità.
Un gradiente che attraversa dritto le parole: il contrasto cambia lettera per lettera.
Lo stesso gradiente che fa spazio alle parole: l’espressione resta, la leggibilità torna.
Una breve storia: prima il piatto, poi di nuovo i gradienti
Negli anni 2000 gli schermi erano lucidi: pulsanti smussati, riflessi vitrei e texture che imitavano pelle e carta. Nei primi anni 2010 i principali sistemi operativi sono passati al flat design, con colori pieni, icone semplici e nessuna profondità finta, e gran parte del web li ha seguiti. Dalla metà del decennio i gradienti più morbidi sono tornati, ora come sfumature lisce di due o tre colori e non come effetti lucidi, e alcune icone di brand molto visibili sono passate ai gradienti. Altro nella storia dei gradienti.
La lezione è che nessuno dei due stili è moderno per sempre. Ciò che fa invecchiare un design è il trattamento specifico: la lucidità pesante fa invecchiare un gradiente, e una palette standard fa invecchiare il colore piatto.
Come decidere per ogni superficie
- 1
Chiediti a cosa serve la superficie
Se aiuta le persone ad agire, leggere o confrontare, punta sul piatto. Se crea un’atmosfera o presenta il brand, punta sul gradiente.
- 2
Controlla la dimensione
Sotto circa la dimensione di un’icona, usa il piatto. I gradienti hanno bisogno di spazio per mostrare la loro sfumatura.
- 3
Controlla come verrà riprodotto
Un solo inchiostro, filo o incisione significa piatto. Gli schermi e la stampa a colori possono portare un gradiente.
- 4
Controlla le parole
Il testo lungo vuole un fondo piatto o molto calmo. Un titolo può stare su un gradiente se il contrasto regge nel punto peggiore.
- 5
Tienili imparentati
Prendi i tuoi colori piatti dal tuo gradiente, così i due sembreranno sempre un solo brand.
Scegli il piatto per
- Favicon, badge di app e piccole icone
- Pulsanti, interruttori, schede e stati dei moduli
- Pagine di testo e tabelle di dati
- Ricamo, timbri e stampa a un solo inchiostro
Scegli un gradiente per
- Copertine, poster e post social
- Hero dei siti e pagine di lancio
- Campi del brand dietro loghi e titoli
- Loop, sfondi e aperture di presentazioni
Usali entrambi: un gradiente con riserva piatta
I sistemi più forti trattano il gradiente come la firma e scelgono uno o due colori piatti al suo interno per i compiti di tutti i giorni. Il tono più profondo diventa il colore del testo o delle icone, un tono medio diventa il colore dei pulsanti, e il gradiente vero e proprio compare su copertine, hero e post. È così che ottieni espressione e funzione senza due palette scollegate. Il branding con i gradienti lo illustra passo per passo.
Ogni Mark di Gradiently è un gradiente con la sua palette integrata, quindi i colori piatti per testo, pulsanti e dimensioni piccole vengono dalla stessa ricetta dello sfondo.
Le domande più frequenti
Il design piatto è meglio dei gradienti?
Nessuno dei due è meglio ovunque. Il colore piatto è ideale per dimensioni piccole, interfacce e stampa a un colore; i gradienti per superfici grandi ed espressive e per essere distintivi.
I gradienti sono superati?
No. I gradienti pesanti e lucidi sembrano datati, ma i gradienti morbidi di due o tre colori sono molto usati nelle identità di brand e nelle interfacce attuali.
Il mio logo dovrebbe avere un gradiente o un colore piatto?
Molti loghi usano una versione con gradiente per l’uso su schermi grandi e una versione piatta per le dimensioni piccole e la stampa a un colore. La versione piatta ti serve in ogni caso.
Il testo è più difficile da leggere su un gradiente?
Può esserlo, perché il contrasto cambia lungo il gradiente. Controlla il contrasto nel punto peggiore dietro il testo, oppure tieni un’area calma per le parole.
Posso usare insieme gradienti e colori piatti?
Sì, e lo fanno quasi tutti i brand forti. Prendi i colori piatti dall’interno del gradiente così tutto corrisponde.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
