I colori hanno i loro pesi naturali. Il giallo è un colore naturalmente più “leggero”, mentre il blu e il rosso sono considerati naturalmente più “pesanti”.
I colori più scuri in generale sono percepiti come più pesanti. Più ombra ha un colore (il che significa, più nero viene aggiunto in un colore), più pesante appare. Più tinta ha un colore (il che significa, più bianco viene aggiunto a un colore), più chiaro appare. I colori qui sotto appartengono alla stessa tonalità (verde e viola, rispettivamente), ma hanno tinte e sfumature diverse.
Più un colore è saturo, più appare pesante.
Ora, cosa significa questo e come influisce sui vostri disegni? In poche parole…
Un bel caso di studio per tutta questa teoria è mostrato qui sotto. Tutte le texture, le forme e i colori non possono competere con il pulsante Play rosso completamente saturo al centro (anche l’equilibrio radiale aiuta). Inoltre, lo sfondo sfocato aiuta ad attirare l’attenzione verso lo schermo. Notate che i colori sfumati del palloncino non tolgono l’attenzione dal pulsante. I pulsanti inferiori in colori più chiari, turchese e giallo, non competono e sono chiaramente secondari. Ben fatto, Airdrop UI designers!
Considera il design sottostante. 3 righe di testo contro una sola riga contenente un’etichetta del prezzo. Quale elemento attira di più il vostro occhio? Bingo! La tonalità ultra scura sovrasta chiaramente il tipo chiaro e inoltre bilancia piacevolmente le 3 linee rispetto alla linea 1 usando il colore. Notate che c’è anche un bell’equilibrio asimmetrico tra il lato sinistro e quello destro di questo design, ma questo è per un altro post 🙂
C’è una competizione pesante in questo prossimo design! Lo sfondo rosa caldo pesantemente saturo compete un po’ con l’elemento scuro al centro, che spicca grazie alla sua posizione centrata e al peso elevato (in termini di tonalità). C’è un sacco di roba sullo sfondo (e il sito web ha anche del movimento), ma nonostante tutte le texture e il modello ripetuto dello sfondo, l’occhio ha ancora una chiara messa a fuoco. Bel lavoro.
Guarda la composizione qui sotto. Puoi dire che la coppia in rosso e giallo ha un’attrazione visiva molto più forte sul tuo occhio rispetto alla coppia a sinistra, e anche la griglia diventa un punto focale secondario a causa della tonalità rossa? I verdi non possono competere con questi colori forti. In effetti, c’è un po’ di competizione visiva tra la camicia e la griglia rosse e l’icona rossa. Questo è qualcosa che il designer potrebbe considerare e potenzialmente affrontare alleggerendo la camicia e saturando un po’ l’icona (questo sarebbe il mio suggerimento, comunque 🙂 Naturalmente, sul sito live, c’è un’animazione all’icona che spinge il visitatore a prestare più attenzione all’icona: http://yadrenakopot.ru/
Quindi, questa è la vostra guida rapida su come il peso del colore influisce sul design dell’UI. Spero che prendiate in considerazione i pesi dei colori nel vostro prossimo progetto come uno dei tanti strumenti nel vostro toolkit di designer.