Il colore, dal cinema alla UX

di Enrico Tanno

23 Giugno 2020

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

Immagine in home di julienrossire_art.

Guardare il Joker è stata un’iniezione d’ossigeno per tutti gli amanti della post produzione e del colore. La fotografia diretta da Lawrence Sher è veramente fine, 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. Abbisso 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 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 abitudinaria.

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 che definiremmo “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 copioso e senza le sue vesti mefistofeliche.

Sarebbe semplicemente Arthur, uno dei tanti esseri umani sopraffatti dalla rats race metropoli, uno sconfitto. Ma Arthur non c’è più, non esiste più nel presente, e quella che vediamo non è una maschera di un personaggio, ma al contrario è sostanza, è identità. Il colore in questo caso lo caratterizza e lo dipinge per come è veramente.

Come Superman, che quando è veramente se stesso ha la tuta blu con il suo logo, tuta formata da un contrasto di colori puri (secondo Joannes Itten) così il Joker si sveglia Joker, non si traveste da Joker. Nella fotografia del film la lavorazione del colore sul personaggio e sulle ambientazioni è postprodotta in modo tale da coincidere con l’evoluzione del personaggio. Si può parlare di color script, integrando alla perfezione il nostro affezionatissimo nel suo contesto tramite contrasti di colori complementari, in questo caso arancio e blu, e tramite contrasti di freddo e caldo.

Rapportando questo studio del colore del cinema allo studio della User Experience, 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 ambito, tra le altre cose, 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ò andrebbero prese come consigli, e non come regole.

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. In particolare ci fa notare come tante convenzioni sono diventate tali esclusivamente per esigenze tecniche di mercato.

Questo concetto di relatività non vuol dire che i sette contrasti (armonie) di Itten non siano validi, anzi. Specialmente in ambito web quando si progetta la parte di user interface degli applicativi, i contrasti di Itten sono provvidenziali e utilissimi, perchè danno una direzione da seguire. Ma il concetto di relatività è per consigliarvi di non prendere “troppo sul serio” nessuna regola sul colore, ma di imparare a conoscerle tutte in modo approfondito 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ì la teoria del colore ha un ruolo fondamentale nell’identità e nel design degli applicativi, nonchè nella psicologia dell’utente che visita il nostro sito. La teoria del colore, insieme ad altri strumenti, permette di progettare la UX di applicativi web in modo tale da condurre l’utente a compiere l’azione che desideriamo tramite la creazione di attenzionalità e punti focali. Nonchè di offrire un’esperienza estetica di alto livello qualitativo e accessibile.

(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 delle fotografia nella celebre serie Breaking Bad, utilizzata per raccontare l’evoluzione in negativo del personaggio, il famoso “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 lavorando 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. Usando ad esempio 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 quello che viene definito un contrasto di quantità.

Dato che il giallo occupa una piccola parte degli elementi grafici rispetto al viola, se usato con sapienza in componenti tipo buttons o icone attive, può fungere da punto focale. Tradotto in termini informali, può essere giallo il pulsante “compra” o “aggiungi al carrello” in un’interfaccia in scala di viola, così l’utente registrerà il giallo come “il colore delle azioni”, e lo userà per comprare o per prendere delle decisioni. In questi casi il colore è un attore principale nel processo di “decision making” dell’utente e nella sua “conversione”, ovvero nel passaggio che vede lo user trasformarsi da un semplice visitatore in un compratore.

Esempi visivi estratti da brybry.co

Esiste una sezione colore del Google Material Design che mette a disposizione delle palette di colore dove abbiamo la possibilità di scegliere dei colori già catalogati, accessibili e al punto di saturazione e luminosità giusti per la maggior parte dei supporti. Da poco la guida del Material Design è stata aggiornatA con un interessantissimo Color Tool che permette di applicare la palette colori di Google su un wireframe e fare dei test di accessibilità in modo interattivo e rapido.

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 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). Come è importante sapere che non necessariamente la nostra progettazione deve includere uno dei contrasti di Itten. Ci sarà sempre il caso in cui un’interfaccia funzionerà bene e sarà bella anche se composta di colori che Itten non accosterebbe mai. Funzionerà bene semplicemente perchè in quel caso specifico quei colori sono belli, e funzionano. C’è ancora tanto da dire e soprattutto tanto da fare in materia. Sulla UX ho scritto anche un post che trovate qui. Spero possa esservi d’aiuto, grazie dell’attenzione e buon lavoro.

Di seguito degli screen del Color tool di Google Material Design

Comments:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Registrati alla nostra newsletter per avere aggiornamenti editoriali dalla redazione.