I Colori in un Sito Web
Categoria:
Identità visiva di un sito web usando il colore
di Marta Carlon
Dipartimento INDACO
Facoltà del Design - Politecnico di Milano
martacarlon@yahoo.it
Quale colore?
Per comunicare cosa?
Lo scopo di un sito Web è quello di trasmettere contenuti. Quando un utente visita un sito si muove in un ambiente virtuale più o meno strutturato e articolato. Dunque è importante che il sito sia in grado di fornire una segnaletica immediata, che permetta all'utente di muoversi agevolmente, e di indirizzarsi verso i suoi obiettivi.
è essenziale che l'utente sappia sempre dove si trova, in modo da sapersi orientare, ripetere un percorso e avere la sicurezza di avere colto tutte le informazioni, inerenti alla sua ricerca, disponibili in quel sito.
Un sito è l'immagine di un ente o di un'idea, e la coerenza grafica è un elemento che ne rafforza molto l'identità, e ne facilita la memorizzazione. L'utente che naviga in un sito in cui vige il principio dell'armonia visiva, dove tutti i colori delle componenti grafiche - barra di navigazione, banner, bottoni, testi - sono legati tra loro da un attributo comune, sperimenta una piacevole esperienza visiva.
Il colore e l'interfaccia devono quindi guidare l'orientamento dell'utente, e definire l'identità visiva di un sito in tutte le sue pagine. La scelta del colore da impiegare purtroppo non è sempre intuitiva. Quando il sito ha come scopo principale quello di pubblicizzare un prodotto, la scelta del colore automaticamente si focalizza verso il colore del prodotto stesso.
Quando invece il sito ha come scopo quello di veicolare contenuti diversi (supponiamo un portale), la scelta del colore è problematica, in quanto è possibile scegliere un colore base generale che può presentare delle discordanze con il messaggio del contenuto selezionato. Ad esempio il blu (o un azzurro spento) che simboleggia pace e quindi fiducia e tranquillità, autorevolezza, attendibilità, serietà e rigore scientifico, può essere il colore predominante per un sito aziendale. Tuttavia se il rosso identifica l'area delle offerte, si incontrano delle sovrapposizioni in quanto il rosso e il blu suscitano diversi atteggiamenti.
Quale messaggio viene veicolato? Quello di relax e pace corrispondente al colore blu, o quello di forza ed eccitazione corrispondente al colore rosso?
Il teorema
Per creare l'identità di un sito complesso, ad esempio un portale, occorre scegliere i colori non facendo strettamente ricorso alle informazioni che questo intende veicolare, in quanto un sito web è in continuo mutamento, mobile, interattivo, e variabile nei suoi contenuti. La gestione dei colori di un sito non è assolutamente simile a quello di un libro o di un qualsiasi messaggio cartaceo.
è indispensabile che ogni sito abbia un teorema definito che regoli l'impiego del colore in tutte le sue pagine, in modo da creare un mondo fantastico, unico e quindi riconoscibile.
Il teorema deve giocare sulle tre proprietà che caratterizzano ogni colore (la tinta, la luminosità e la saturazione), e sui rapporti quantitativi cromatici.
Tinta, saturazione e luminosità
La tinta (hue) è il colore riflesso o trasmesso attraverso un oggetto. In generale è identificata dal nome del colore, come ad esempio rosso, arancione, blu e verde.
La luminosità (lightness), è la chiarezza o la scurezza relativa del colore ed è comunemente misurata come percentuale da 0% (nero) a 100% (bianco).
La saturazione (croma) è la potenza o la purezza del colore. Rappresenta la quantità di grigio rispetto alla tonalità ed è calcolata come percentuale da 0% (grigio) a 100% (saturazione completa). Si attribuisce saturazione nulla ai colori acromatici (scala di grigi), e saturazione massima ai colori puri.
Possibili teoremi potrebbero essere l'impiego:
- di colori diversi per tinta, ma con chiarezza e saturazione costanti, per ogni contenuto;
- di soli colori vivaci;
- di soli colori attenuati;
- di spostamenti di tinta.
Ad esempio, nel sito di A. Bottoli e G. Bertagna (http://www.colourdesign.it), il teorema adottato è stato quello di differenziare le pagine attraverso leggeri spostamenti di tinta. Possono anche sembrare spostamenti dovuti all'imprecisione, all'incapacità di clonare la stessa tinta per tutte le pagine, invece sono voluti, e ne caratterizzano l'identità visiva.
Rapporti quantitativi tra i colori
è indubbio che un colore assume un valore solo in rapporto ai colori a cui viene accostato.
Supponiamo ad esempio di dover progettare il sito della Ferrari. Il colore della Ferrari è il rosso, dunque, per antonomasia, lo è anche il sito. Tuttavia, se l'intera pagina web appare rossa, la forza e l'energia di questo colore perde efficacia. Perché il rosso trasmetta tutta la sua potenza deve essere messo in contrasto con altri colori. Una pagina nera con solo un pallino o una barra rossa, sarà più efficace in quanto comunicherà "io sono rosso, tutti gli altri no".
Osserviamo ora tre esempi di interfacce in cui il colore funge da segnale coerente e aiuta l'utente nel raggiungimento del suo obiettivo.
I tre esempi sono:
- sito web dell'Istituto del Colore (http://www.istitutodelcolore. it) progettato da P. Borrelli dello studio Nexus. Multimedia Consultino;
- sito web Etnoteam (http:/www.etnoteam.it/maiocchi) progettato da P. Rosignoli e S. De Robertis ;
- il nuovo sistema operativo XP della Microsoft analizzata dalla scuola Politecnica di Design (http://www.scuoladesign.com).
Primo esempio
Questo sito rappresenta l'Istituto del Colore, dunque la scelta cromatica è accuratamente studiata. Essa è giocata prevalentemente su toni di grigio con pochi significativi inserti di colore e con l'uso, altrettanto neutro di una texture su cui collocare i menu secondari. Per il menu principale, che sviluppa i collegamenti alle pagine del sito, si è scelto di identificare ogni campo di attività dell'istituto con una serie di cubi assemblati che compongono un'ipotetica struttura architettonica. La scelta rispecchia il bisogno di rendere graficamente e concettualmente l'idea di una struttura eterogenea dove convivono senza una precisa gerarchia svariati settori di attività. L'insieme di cubi diventa un luogo virtuale, un insieme di stanze, un grande edificio-laboratorio dove il tema del colore è appunto il denominatore comune della navigazione. La scelta dei colori assume una funzione puramente segnaletica e rafforza il sistema di identificazione con il settore scelto che ricorre per tutto il sito.
La palette dei colori si limita alle tonalità websafe per assicurare la massima compatibilità con il sistema in uso dall'utente. Le tinte, sono scelte su una gamma molto vicina alle tendenze attuali e prediligono toni molto abbassati e dominati dal grigio per non creare un impatto violento che renda ingestibile l'introduzione di altri elementi visivi nelle pagine.
Secondo esempio
Questo sito tratta il confronto tra la vita e le opere di due pittori, Francis Bacon e Toulouse Lautrec, partendo dall'idea di fondo che la vita di un'artista ne influenzi la produzione. Le videate presentano dunque tre aree distinte: una parte centrale che corrisponde al nucleo portante dell'idea, e due parti laterali con esemplificazioni e parallelismi tra la vita e le opere di Lautrec, a sinistra, e di Bacon, a destra. Per suscitare all'utente la percezione spaziale della destra, della sinistra e del centro, e dunque per potersi muovere agevolmente in questo modello spaziale, tre colori fungono da guida: il rosso corrisponde sempre alla vita di Bacon, il giallo a quella di Lautrec, e l'arancione (che deriva dalla mescolanza del rosso e del giallo) coincide con l'area comune.
Terzo esempio
Su incarico della Microsoft, l'interfaccia del nuovo sistema operativo XP è stata rigorosamente analizzata, in tutte le sue componenti, dalla Scuola Politecnica di Milano, tramite tre docenti: N. Silvestrini, una delle massime autorità nel settore del Colore, M. Hachen, esperto di Scienza della Visione, e F. Crepaldi, net semiologo.
Secondo questa ricerca il colore blu, utilizzato nella schermata di login, risulta essere una buona scelta in quanto ottimo elemento di supporto e di identificazione aziendale. Il blu, con le sue sfumature, determina una buona leggibilità dei positivi e dei negativi, garantisce ampie gamme di trasparenze fisiche e percettive, molto gradite da parte dell'utenza, e ha una diffusa preferenza percettiva e culturale, almeno in Europa, a partire dal XII secolo. Rimanda infatti a due delle nostre più profonde esperienze naturali: il colore del cielo e il colore del mare. Anche la scelta del colore verde acceso per individuare il pulsante "start", vero e proprio punto di partenza per qualsiasi "esperienza" con il Personal Computer, risulta ben motivata. Il verde è il colore che più si addice per questo pulsante: richiama subito il concetto di avvio di un'operazione e determina un notevole grado di sicurezza nell'utente.
Inoltre, se si analizza in profondità il pulsante, si può notare come il colore verde non sia piatto. La definizione tridimensionale non è più affidata unicamente a una colorazione dei bordi in bianco e nero leggermente sfumati, ma è stata accuratamente studiata in modo tale che la diffusione del colore verde faccia apparire il bottone simile a un led.
Poiché il colore verde dei led è associato solitamente al corretto funzionamento dello specifico dispositivo hardware, nel caso di Xp lo stesso colore comunica il corretto funzionamento del sistema. Si ha dunque l'idea immediata di uno strumento funzionante.
Risulta essere una buona scelta anche la colorazione in rosso del bottone che permette la chiusura della finestra. Nelle precedenti versioni quest'elemento grafico risultava abbastanza uniforme rispetto a quelli adiacenti, e di difficile riconoscibilità. Averlo evidenziato in rosso fa porre attenzione sulla funzione critica a esso collegata: quella della chiusura definitiva della finestra.
Infine, questa interessante analisi, evidenzia l'ottima sequenza di pulsanti di colore verde, giallo e rosso che corrispondono rispettivamente alle funzioni"Standby", "Spegni" e "Riavvia". Anche in questocaso si è infatti in presenza di richiami forti, precisie facilmente riconoscibili da parte dell'utenza.Concludendo è emersa l'importanza di una cultura aggiornata sul colore per gli operatori del web.
Conoscere le "regole" del colore non significa volere definire un codice cromatico internazionale, in quanto questo non solo sottrarrebbe la libertà di espressione grafica, ma priverebbe Internet della sua forza e bellezza, ossia la libertà, il fatto di essere lo specchio dell'umanità.
Le regole ci devono essere, ma contestualizzate, all'interno di ogni sito, in modo tale che il navigatore, imparandole, possa muoversi agevolmente, e ricordare l'dentità del sito.
Versione di stampa
Invia ad un amico