Informatica e grafica per il web - parte Quarti

Informatica e grafica per il web – grafica e colore

Grafica e visual design

Quando parliamo di grafica parliamo di un campo molto ampio che fa parte della comunicazione visiva. L’obiettivo principale del visual design, del design della comunicazione e delle discipline affini (web design, pubblicità, segnaletica ecc.) è quello di veicolare le informazioni importanti in modo chiaro ed efficace. Un cattivo design rende difficile o addirittura impossibile reperire le informazioni corrette: l’utente deve sforzarsi per trovare quello di cui ha bisogno, rendendo la sua esperienza difficile e frustrante.

L’obiettivo principale è quello di comunicare semplicemente un messaggio, il quale deve essere veicolato nel modo più efficace e il più semplice possibile. Fare solo una cosa bella non è detto che sia efficace e che riesca a comunicare nel modo migliore. Quindi, creare qualcosa che è solo esteticamente piacevole, accattivante, non è detto che la comunicazione passi in modo efficace, quindi, l’utente avrà un'esperienza che è frustrante. Questo fa sì che non andiamo a centrare il nostro obiettivo di comunicazione.

Quando si parla di comunicazione visiva, non si parla solo della comunicazione web, anzi si parla sia di comunicazione stampata, sia di comunicazione digitale, sia di pubblicità. Dietro alla progettazione visiva, spesso c’è un intercomune di progettazione anche se ci sono una serie di specificità diverse in base al supporto su cui viene comunicato qualcosa. Ad esempio, se stiamo preparando una brochure per un cliente, questa avrà dei legami con il resto della progettazione dell’azienda per cui il sito avrà delle cose in comune rispetto alla brochure quindi ci può essere un progetto globale che viene applicato in maniera differente nei diversi supporti, questo si chiama immagine coordinata.

Bad vs good design

Se guardiamo i due siti, possiamo notare che uno è chiaro e semplice riuscendo ad invidiare il messaggio mentre nell’altro no. Se guardiamo il sito alla sinistra notiamo molti colori, più effetti possibili che ci può notare, i problemi sono molteplici. Dagli errori di ortografia a problemi di leggibilità perché i colori sono troppo simili tra sfondo e testo, ci sono parti di testi che anche se cambiano di font sono molto vicini uno all’altro. I colori non sono adatti per il tipo di hotel elegante che deve dare una impressione di lusso e quindi ci sono una serie di errori.

Nel sito sulla destra vengono usati un paio di caratteri perché abbiamo un carattere “bastoni” quindi un carattere semplice per i titoletti e un carattere elegante per il resto. Vengono usati solo 3 colori e si abbinano con lo stile interno dell’hotel. Sono ben separate le sezioni, abbiamo un piccolo strillo che rimanda alle recensioni, abbiamo una piccola recensione dell’hotel, la possibilità di sfogliare questa slide iniziale, anche il menù è molto ben distanziato. Quando siamo sopra la voce di menù cambia colore e questo mi fa capire che posso cliccarci sopra.

Visual design: obiettivi e strumenti

Un buon design deve essere chiaro e comprensibile (non per forza minimalisti), sapere quindi trasmettere le gerarchie e le relazioni tra gli elementi, orientare e guidare gli utenti (magari indirizzandolo su qualche pagina), ma anche esprimere significati e stili, e deve saper guidare l’utente verso il raggiungimento degli obiettivi per cui è stato realizzato. Quindi, organizzare le informazioni in base allo scopo del nostro sito, andando a comunicare un messaggio e guidare il nostro utente.

Gli strumenti fondamentali del visual design per raggiungere questi obiettivi sono:

• Colore
• Tipografia
• Layout → organizzare le nostre informazioni. Wireframe e layout sono molto legati insieme, quindi vanno di pari passo.

Colore: la luce

Un elemento di progettazione molto importante è il colore. Dal punto di vista fisico, il colore è la percezione visiva determinata dalle caratteristiche delle onde elettromagnetiche della luce emesse o riflesse dai corpi.

Il colore, dal punto di vista tecnico, è molto legato alla luce la quale è una radiazione elettromagnetica quindi possiamo definire il colore.

Quindi abbiamo una percezione visiva diversa in base alle caratteristiche di questa onda. Normalmente la luce diurna è un'onda che è composta da diverse onde e quindi abbiamo un effetto di luce bianca. Ma se queste onde aumentano/diminuiscono in determinati punti, noi andiamo ad avere una percezione visiva diversa. Se l’onda avrà una dimensione di 480 nm, noi percepiamo il blu. Se noi abbiamo un’onda di 700 nm, allora percepiamo il rosso.

La luce:

• Radiazione elettromagnetica
• Lunghezza d’onda varia tra 380 nm (viola) e 770 nm (rossi); diverse lunghezze d’onda corrispondono a diversi stimoli colorati (cromatici)
• Gli oggetti sorgenti irradiano l’energia luminosa
• Gli oggetti opachi riflettono l’energia luminosa

Noi percepiamo i colori che vengono emessi da una sorgente luminosa e possiamo andare a percepire un colore che viene riflesso da un oggetto, quindi, dipenderà dalla luce che ribalza sul nostro oggetto e poi viene riflessa da questo oggetto. Ad esempio, la mia tazza è azzurra perché la luce bianca va a battere sulla superficie di questa tazza, assorbe tutte le altre onde e riflette solo quelle che poi ci fanno percepire questa tazza come azzurra.

Denominare il colore

Siamo abituati a chiamare i colori con i loro nomi: il bianco, il nero, il rosso, il verde, il blu, l’arancione, il viola, il giallo, ecc. Ma spesso questi nomi non sono sufficienti a descrivere un colore, o spesso possono raccogliere una gamma di colori molto diversa: entrambi i colori posso essere definiti arancione ma sono diversi! Uno è più chiaro dell’altro.

In altri casi invece potrebbe essere ambiguo assegnare un nome a un colore, e quindi spesso vengono aggiunti altri nomi più specifici per descrivere un colore: è un arancione? È un rosso? Un vermiglione? Ognuno può dare una definizione diversa.

Anche se andiamo a prendere un nome particolare, ci sono comunque una decina di nomi diversi. Nel modo in cui noi chiamiamo i colori non riusciamo a identificarli in modo univoco, perché ci ha una percezione diversa o culturalmente abbiamo dei ricordi diversi, ad esempio, il fiore del glicine, nel suo sviluppo, assume delle variabilità di colore.

Ma anche usare altri nomi non è sufficiente visto che anche l’interpretazione di questi nomi non è univoco (basta cercare su Google il colore glicine e vedere le numerose tonalità di viola che vengono fuori).

Descrivere il colore: i modelli colore

Per avviare il problema di identificazione di un colore lo andiamo ad alleviare con i modelli colore. I modelli colore sono delle formule matematiche che ci permettono di rappresentare il colore in maniera univoca. Un colore può essere descritto tramite alcune sue proprietà:

1. Tonalità (hue) che viene definita dalla lunghezza d’onda della luce (valori 0°-360°) e assegnata in modo arbitrario. Zero corrispondono i valori più vicini al viola e i 360 più vicini al rosso. Sono, comunque circolari. Utilizziamo i gradi.
2. Saturazione (saturation) può essere definita come intensità o la purezza di un colore. Al diminuire della sua saturazione il colore apparirà più grigio (valori 0%-100%). Il colore è saturo, più sarà intenso e brillante. Utilizziamo la percentuale.
3. Luminosità (brightness) può essere definita come la chiarezza del colore. Al diminuire della luminosità, quindi all’avvicinarsi dello 0%, il colore si avvicina al nero (scuro) (valori 0%-100%) mentre al 100% avremo un colore più chiaro. Nel caso della figura avremo un colore più brillante.

Dando un valore a ciascuna di queste caratteristiche possiamo definire in modo univoco un colore tramite il modello colore HSB (Hue Saturation Brightness). Quelli che andiamo ad utilizzare nel web non è HSB ma ci aiuta ad entrare nel concetto dei modelli di colore. Il modello HSB è utile per creare la nostra palette di colori quando abbiamo bisogno di andare a lavorare su una tonalità e andare a variare la chiarezza o la saturazione.

I modelli colore sono metodi matematici che servono per rappresentare e definire i colori.

Modelli di colore: il metodo RGB

RGB (Red Green Blue):

• Il metodo RGB o tricromia → perché ha 3 colori primari
• Utilizza 3 canali: Rosso, Verde, Blu
• Grafica web e video → è il modello che viene chiamato anche sintesi additiva o sintesi luminosa. Il web e video utilizzano delle sorgenti luminose per riprodurre il colore e per questo andiamo ad utilizzare i colori primari. Combinando insieme queste luci primarie, riesco ad ottenere tutto o una buona parte dello spettro cromatico che noi andiamo a visualizzare.
• Rosso-Verde-Blu sono colori primari della luce che per sintesi additiva o luminosa generano il bianco, le lunghezze d’onda di queste tre luci primarie sommate insieme riescono a riprodurre la luce bianca e per questo vengono chiamati colori primari.

In ciascun pixel del nostro monitor ci sono 3 sorgenti luminose che corrispondono al verde, al rosso e al blu che vengono proiettate in un unico pixel e in base al comando informatico, ci saranno le 3 luci che emetteranno una luce in base al colore richiesto.

• Visualizzazione a monitor (le luci rossa, verde e blu vengono proiettate in un unico pixel, che in base all’intensità delle singole luci emette un colore diverso)
• 16,7 milioni di colori, grafica a 24 bit (8 bit per ogni canale) → 256 variabili per ogni canale e moltiplicate insieme possiamo avere 16,7 milioni di colori possibili che possiamo riprodurre mediante il nostro monitor. Il nostro occhio umano ne può percepire molti di più ma in realtà non li distinguiamo. Le variazioni sono talmente lievi che l’occhio non le percepisce.

Modelli di colore: il metodo CMYK

CMYK (Cyan Magenta Yellow Black)

• Il metodo CMYK o quadricromia. È il modello opposto alla tricromia perché lavori sugli inchiostri che sono opposti alle 3 luci primarie.
• 4 canali: Ciano, Magenta, Giallo, Nero.
• Metodo utilizzato in stampa così come facevano i puntinisti ovvero accostavano dei puntini di colori per andare a ricreare una sensazione cromatica. La stessa cosa viene fatta nella stampa in piccolo.
• Ciano magenta giallo sono colori primari che per sintesi sottrattiva (siccome è l’opposto della sintesi additiva, andando a togliere la luce e quindi andiamo a riflettere solo la rimanenza) generano il nero. Sono gli opposti dei colori primari della tricromia: il ciano assorbe il rosso, il magenta assorbe il verde e il giallo assorbe il blu.

Ma gli inchiostri non sono puri! Se mescolo gli inchiostri dei 3 colori primari ottengo un marrone o un grigio scuro; per ottenere il nero in stampa e maggiore profondità nelle immagini devo aggiungere ai 3 colori primari un inchiostro in più: il nero!

Abstract: Ólafur Elíasson

Netflix - Abstract: The Art of Design - Episodio S02 E01: Olafur Eliasson: Il design dell’arte. Il tipo di luce che noi andiamo a proiettare sulla superficie cambia il modo con cui andiamo a vedere questa superficie anche se, in realtà, il nostro occhio può venire ingannato. Se guardo la superficie del muro, io la percepisco bianca, anche se in realtà è giallina questo perché se viene illuminata da una luce bianca, sarà veramente bianca. Ma ora ho una luce calda quindi la superficie non è veramente bianca e, quindi, possiamo avere dei modi in cui noi inganniamo il nostro sguardo e lo rielaboriamo all’interno della nostra testa.

Quindi noi possiamo ingannare il cervello e, inoltre, non bisogna perdere l’obiettivo centrale del progetto. Infatti, questo artista non ha voluto inserire un elemento di troppo altrimenti andava a snaturare il suo progetto. Quando andiamo a progettare bisogna focalizzarsi sugli obiettivi che noi andiamo a voler comunicare anche se non siamo degli artisti. Bisogna centrarsi sull’utente e sui suoi bisogni.

Codici colore per il web

• I colori possono essere definiti tramite i loro valori di RGB. Questo viene usato per esempio quando dobbiamo assegnare un colore allo sfondo, al testo, al bordo o a un qualsiasi elemento dell’interfaccia grafica. Per andare a specificare questo colore andremo a utilizzare una notazione particolare chiamata NOTAZIONE RGB. (che può avere valori tra 0 e 255). Ogni canale ha un valore da 0-255 (2⁸ per canale). Questo si ha perché all’interno della nostra interfaccia andiamo ad utilizzare una grafica a 8 bit. Quindi andiamo a definire 8 bit per canale. Questi 8 bit possono avere 2 valori: 0 e 1. Nel momento in cui abbiamo per ciascun canale 8 bit noi abbiamo 2 valori possibili che possiamo assegnare a quel bit, quindi sono 256 colori, avremo quindi 256 valori per il rosso, 256 per il verde e 256 valori per il blu, questo ci permette di riprodurre i 16 milioni di colori. Il nero avrà i valori più bassi: rgb(0,0,0), il bianco quelli più alti: rgb(255,255,255).

Quella nell’immagine è la paletta (color picker) di Photoshop. In alto c’è HSB che ci serve per andare a definire i colori, quindi abbiamo da 0 a 360 gradi sempre rosso perché arriviamo da rosso a rosso, 100% è la saturazione e 100% è l’altra saturazione. Sotto l’HSB c’è RGB (255, 0, 0). Sotto ancora abbiamo la notazione esadecimale, che non è altro che la notazione RGB ma scritta in un altro sistema numerico (16 cifre che vengono combinate).

• I colori HTML vengono definiti tramite una notazione esadecimale (HEX) la combinazione dei valori RGB. Ogni canale è definito da due cifre. Il valore più basso è 00 (0), il più alto è FF (255). Nero: #000000 / Bianco: #FFFFFF / Rosso: #FF0000.

Se si guarda la notazione della quadricromia in basso a destra non si ha magenta 100 e giallo 100 perché abbiamo detto che gli inchiostri non sono puri e quindi la corrispondenza inchiostro colore potrebbe essere diversa. Infatti, il magenta del RGB (+ viola) è diverso dal magenta della quadricromia. Il cian del video è più brillante del cian dell’inchiostro di stampa.

L’RGB può essere espresso anche in percentuale da 0 a 100%

• In alcuni casi può essere utile avere degli elementi di colore in trasparenza, con i CSS3 è stata introdotta una nuova codifica rgba, che aggiunge il canale alpha alla codifica rgb. Per esempio: un nero con trasparenza al 70% avrà valori rgba(0, 0, 0, 0.7).
• La spunta only web colors è rimasto da anni questa opzione che non ci interessa perché vuol dire solo i colori web safe!

La notazione esadecimale è la trascrizione in numeri esadecimali dei numeri che vanno da 0 a 255.

Web safe color

Una quindicina di anni fa, i computer e le schede video supportavano al massimo 256 colori che venivano gestiti in maniera diversa dalle diverse piattaforme. Venne creata una lista di 216 colori web standard che venivano visualizzati in modo corretto. Questi colori erano molto limitanti ed era difficile fare qualcosa di bello con solo questi, ma eravamo sicuri che Mac, Windows e Linux li avrebbero riprodotti in modo più o meno uguali. Anche oggi c’è una variabilità di riproduzione sul monitor ma è molto inferiore ma gli schermi AMOLED o LED hanno una riproduzione diversa ma riusciamo comunque a riprodurre tutte le migliaia di colori.

Oggi sia i computer sia i dispositivi mobili permettono la visualizzazione di milioni di colori e l’utilizzo di questa palette è obsoleto e non più necessario; quindi, non bisogna fare l’errore di spuntare quella casella. Quando usiamo il selettore colore in Photoshop, possiamo isolare i colori browser o web safe.

Questa notazione è interessante perché si vede che ci sono queste coppie che sono sempre 00 33 00, in realtà oggi quando abbiamo 6 delle coppie tra di loro uguali per tutta la notazione esadecimale si può sintetizzare in tre lettere soltanto #fff = #ffffff; #013 = #001133.

Il colore nel progetto grafico

Nel progetto di un’interfaccia o di qualunque altro artefatto grafico, la scelta dell’uso del colore è importante perché aiuta a creare uniformità e identità. I colori possono creare reazioni emotive nell’utente per questo sono molto efficaci nel veicolare messaggi e “atmosfere”. A ogni colore vengono attribuiti significati e simbologie, sia per alcune caratteristiche fisiche sia per cause di tipo culturale. In occidente il nero è il colore che viene usato per il lutto, mentre in alcuni paesi orientali viene usato il bianco. Il rosso è un colore che richiama l’attenzione (anche il giallo) e spesso viene usato per indicare pericolo, ma è anche associato all’amore e alla passione. Il rosso può essere visto sia come colore dell’aggressività (nei paesi occidentali) sia come colore legato alla salute e alla buona fortuna, alla purezza e alla divinità (nell’est).

La scelta del colore oltre a una scelta estetica deve anche essere attenta alla cultura del bacino di utenza del sito (o progetto grafico) e quindi al significato simbolico e culturale del colore. Il colore ci porta determinate immagini infatti è importante nella progettazione grafica perché crea delle emozioni all’interno del nostro utente.