Il colore, dal cinema alla UX

di Enrico Tanno

23 Giugno 2020

Lawrence Sher illustra la lavorazione sul colore in Joker, via Vanity Fair

Guardare il Joker è stata un’iniezione d’ossigeno per tutti gli amanti della post produzione e del colore. La fotografia diretta da Lawrence Sher è iper curata e coccolata, e sembra dipingere il carattere del personaggio e tutta la sua evoluzione in una tensione visibile, materica. Il Joker che conosciamo, il folle cattivo viola dai capelli verdi, è il risultato del male e dei traumi che Arthur Fleck, un individuo profondamente allineato, ha subito nel corso della sua vita. E il colore in questa pellicola accompagna la crescita del personaggio, “crescita” che consiste in realtà in una discesa nelle tenebre della psiche umana. Discesa che a che a un certo punto diventa consapevolezza del proprio Inferno, maturità, e scelta. «Sai cos’è buffo, cosa mi fa veramente ridere? Ho sempre pensato che la mia vita fosse una tragedia, ma adesso mi rendo conto che è una cazzo di commedia.»

Arthur vive di una routine rassegnata e alienante, e dopo la sua discesa lenta e inesorabile, tocca il fondo e sceglie. Sceglie con tutto se stesso di stare dalla parte dei cattivi, di accogliere il suo lato oscuro e portarlo al mondo. Perchè le persone, questa volta, hanno veramente esagerato, e il desiderio di vendetta e di sangue è superiore a quello di una vita quieta e “normale”. E il colore, compagno di viaggio silenzioso e presente, ci accompagna nelle stanze, nelle strade, nei letti e nelle scalinate dei quartieri polverosi che vedono il Joker finalmente danzare nella sua nuova fulgida perfida identità. Una danza macabra e insana da cui non si torna più indietro, dove incontriamo IL JOKER che conosciamo, quello presente nel nostro immaginario collettivo, quello “vero”.

Il colore, in questo caso, coincide con l’identità del personaggio. Il Joker non sarebbe Joker senza i suoi capelli verdi, senza il suo trucco e senza le sue vesti scintillanti. Sarebbe semplicemente Arthur, uno dei tanti esseri umani sopraffatti dalla metropoli, uno sconfitto. Ma Arthur non c’è più, non esiste più nel presente, e quella che vediamo non è una maschera di un personaggio, ma è sostanza, è identità. Il colore è in questo caso l’essenza stessa del personaggio, che lo dipinge, lo rappresenta e lo caratterizza così come è veramente. Come Superman con la sua triade di colori puri del suo stemma, e l’Uomo Ragno con la sua tuta rossa e blu, il Joker si sveglia Joker, non si traveste da Joker, e nella fotografia del film la lavorazione del colore sul personaggio e sulle ambientazioni è favolosa, e integra alla perfezione il personaggio nel suo contesto tramite contrasti di colori complementari e di freddo e caldo.

Rapportando questo studio appassionato del colore del cinema alla UX, la prima cosa che insegno ai miei studenti sono i sette contrasti di colore di Itten (che poi contrasti non sono, ma armonie direbbe Riccardo Falcinelli) e di come queste “regole” sul colore nate nell’epoca Bauhaus non debbano essere prese come leggi universali, ma come dei binari da seguire soltanto in una fase iniziale. Il Bauhaus era un periodo storico in cui si tendeva a una estrema igienizzazione di ogni cosa, e anche del colore. Diverse figure al limite dell’esoterismo hanno tirato giù delle convenzioni e delle regole sulle quali è stato poi costruito un intero sistema di leggi. Leggi che però leggi non sono, ma consigli, ecco. Vi consiglio vivamente Cromorama di Falcinellii, per me personalmente è stato illuminante per la semplicità con cui ci mette al corrente della relatività delle presunte regole sul colore e della mutabilità di queste nel corso del tempo.

Non perchè i contrasti di Itten non siano validi, anzi, soprattutto sul web sono fantastici perchè danno una direzione da seguire, ma il suo libro vi darà la sicurezza di non prendere “troppo sul serio” nessuna regola sul colore, ma di imparare a conoscerle tutte per poi però affidarsi, talvolta, anche al buon gusto e all’istinto.

Così come è utile la psicologia del colore nel Cinema per comunicare stati d’animo, per raccontare storie e dare identità ai personaggi, così sul web il colore ad oggi ha un ruolo principale nell’identità degli applicativi e nella psicologia dello user, che se non trova la sua esperienza sul nostro sito web gradevole, funzionale, facile e affidabile, va via.

(Esempio di contrasto di colori complementari, verde e rosso, sia nel celebre ritratto della ragazza afgana del 1984 che nel Joker.)

Ai miei studenti faccio vedere spesso questo interessantissimo link di studio Binder, che parla del colore nella psicologia del cinema. Ci illustra con delle utilissime infografiche il contrasto di colore in diverse pellicole, ad esempio i colori puri di Superman (puri secondo Itten, in realtà non esistono colori più puri di altri), la trasformazione del colore nella serie Breaking Bad per raccontare e caratterizzare l’evoluzione del personaggio, il “verde Matrix” (che faccio modificare su photoshop con le curve per fare gli esercizi tra complementari rosso e verde) e altri esempi molto ben fatti..

Nella stessa lezione in cui si parla di Colore nel Cinema, faccio fare ai miei studenti degli esempi di wireframe (prototipi di applicativi senza grafica, ma solo con gli ingombri “a quadratoni” colorati con dei contrasti di colore, provando a concepire un prototipo di un app con un contrasto di qualità, o di quantità, o di chiaro scuro, o di colori complementari.

Passo passo si scopre poi che i contrasti coesistono, un contrasto di colori complementari (ad esempio viola e giallo) è anche un contrasto di chiaro e scuro, ed è anche un contrasto di freddo e caldo, e se si usa il viola come colore dominante, e il giallo come colore interattivo in zone piccole e efficaci per creare un punto focale, ecco che abbiamo anche un contrasto di quantità.

Esiste (fortunatamente) una sezione colore del Google Material Design che mette a disposizione delle palette di colore dove abbiamo la possiblità di scegliere dei colori già catalogati, accessibili e al punto di saturazione e luminosità giusti per la maggior parte dei supporti e di estrapolare il codice esadecimale per costruire la nostra grafica. Quest’anno è stato inserito un interessantissimo Color Tool che permette di applicare interattivamente la palette colori di Google su un wireframe e fare dei testi di accessibilità.

Quando la creatività è libera e non sottoposta alle regole della Brand identity, la teoria del colore diventa uno strumento importantissimo che fa la differenza tra un progetto improvvisato e un lavoro di Graphic Design e di User Experience ben progettato.

Conoscere il contrasto di colori complementari, il contrasto simultaneo, il contrasto di qualità e di quantità è fondamentale per saper gestire tutta la parte di UX e UI (user interface). Ci sarebbe da dire molto altro, ma in articolo sul web è un miracolo se siete arrivati fin qui. Grazie :-) e buon lavoro.

Di seguito degli screen del Color tool di Google Material Design, dove si possono scegliere dei colori medi “con il numero 500” ed avere automaticamente i colori secondari (uno più chiaro e uno più scuro), i testi accessibili e un test su un wireframe di un ipotetica app in formato mobile.

Comments:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Registrati alla nostra newsletter per avere aggiornamenti editoriali dalla redazione.