5 motivi per usare i gradienti nel Web

Esiste uno strumento sempre più utilizzato da parte dei designer attivi nella progettazione e nella realizzazione di layout web: i gradienti. In tempi recenti questi sono decisamente tornati alla ribalta: molti dei layout in circolazione fanno uso di una specifica tipologia di gradienti. Vediamo quali possono essere 5 motivazioni per sceglierli al posto delle palette di colori standard.

Impatto sugli sfondi

Se ben incastrato nel contesto globale del design, un gradiente è in grado di creare un "interesse visuale" utile all'utente per "muoversi" nel layout. Il cambio di colore dato dal gradiente può produrre effetti visivi d'impatto, in cui zone chiare e scure si intrecciano per favorire la user experience.

Esistono svariate modalità di utilizzo dei gradienti, ma una delle più utilizzate attualmente è l'inserimento di elementi di background contenenti immagini, testi ed altri elementi disposti al di sopra di esso, in foreground.

Prendiamo per esempio questo layout, dedicato ad una famosa marca di orologi. Qui il gradiente fornisce una sorta di leggerezza visuale all'utente, che è libero di concentrarsi sugli elementi fondamentali del layout, dall'angolo superiore sinistro fino a quello inferiore destro.

Impatto sui testi

Cosi come il gradiente può essere utilizzato come parte di uno sfondo, può essere utilizzato anche come parte di un testo. Invertire l'utilizzo del gradiente, posizionandolo nel testo invece che nello sfondo, è una strategia utile per evidenziare e portare maggiore attenzione al contenuto letterale.

Ecco un esempio molto interessante di gradiente testuale. La scelta del colore va effettuata attentamente, verificando che le caratteristiche di user friendship come il contrasto e la leggibilità vengano rispettate.

Impatto sulla grafica

Un utilizzo professionale dei gradienti può produrre effetti visuali che sono difficilmente raggiungibili dai singoli colori. Questi effetti sono in grado di produrre una reazione emotiva nel visitatore e indurlo a ricordare maggiormente, o a tenere maggiormente in considerazione, un brand o un sito.

Semplici da realizzare

Indipendentemente dalla tipologia del gradiente (lineare, radiale, direzionale o diagonale) non occorrono particolari skill per la sua realizzazione. Esistono poi ottimi strumenti che consentono di velocizzare la scelta del gradiente e di produrlo con il minimo sforzo, quali ad esempio Web Gradients, Gradient Buttons e Web Gradient Generator.

Sfruttano CSS3

Con CSS3 abbiamo a disposizione nuovi controlli per produrre gradienti, quali le nuove caratteristiche della proprietà background:

#myElement {
background: linear-gradient(to right, red , yellow);
}

Perché non sfruttare a pieno le tecnologie che abbiamo a disposizione? Le possibilità sono ora decisamente infinite.