Corso Web Mastering & Design Modulo 2, Unità 1

Composizione e colore

Introduzione al web design grafico

Il web design grafico è una specifica branca del web design che riguarda l’individuazione e la progettazione di determinate soluzioni grafiche atte a migliorare la comunicazione visiva di un sito durante la navigazione in rete.

Il web design grafico si occupa pertanto della realizzazione di tutti quegli elementi grafici comuni nel web (elementi di contenimento, loghi, immagini, palette di colori, ecc.) utilizzati per il raggiungimento di questo obiettivo e soprattutto di come questi debbano essere impiegati per esprimere al meglio le finalità di ogni sito.

Il livello qualitativo di una buona grafica per il web è determinato dalla relazione tra gli elementi grafici utilizzati, che dovrebbero risultare perfettamente armonizzati per creare visivamente quello stile unico, determinante per la caratterizzazione specifica di ogni sito.

In queste due lezioni, dedicate al web design grafico, andremo pertanto ad esaminare i principali elementi utilizzati nella progettazione grafica delle pagine web e le loro migliori modalità di utilizzo.

Progettare la grafica

Il procedimento per la creazione di un buon progetto grafico consta di due soli passaggi: la scoperta e l’implementazione.

La scoperta dei componenti per la realizzazione della grafica di un sito web consiste nel mettere in contatto tutti gli elementi grafici conosciuti con il risultato che attraverso di essi vogliamo ottenere. Partendo da una scoperta delle finalità, potremmo scegliere e costruire un progetto grafico adeguato.

L’implementazione indica quel passaggio in cui, una volta raccolte le idee e considerati gli elementi grafici possibili per la loro realizzazione, realizziamo un bozzetto relativo all’organizzazione grafica e all’aspetto finale di tutte le pagine del nostro sito web.

Gli schizzi realizzati e i layout prodotti a mano dovranno poi essere elaborati attraverso uno specifico software di editing delle immagini, per creare quelle unioni e suddivisioni interne che serviranno a determinare le diverse aree in cui le pagine verranno definitivamente organizzate.

Una volta stabilito l’aspetto del layout generale si potranno fare esperimenti con i colori scegliendo innanzitutto quelli che dovranno essere in primo piano ad indicare i contenuti più importanti di ogni pagina.

L’utilizzo di un software per l’editing dei file grafici, come Adobe Photoshop, è determinante per ottenere, attraverso l’elaborazione dei nostri bozzetti su carta, una composizione digitale adeguata alle esigenze e finalità del sito.

Definizione di un buon progetto

Ci sono due principali indicatori attraverso i quali la maggior parte degli utenti stabilisce se il progetto grafico di un sito è buono o cattivo. Un indicatore preciso è quello che focalizza l’osservazione sulla funzionalità del sito, sulla reale presentazione dell’informazione e sulla sua efficienza.

Nella creazione di pagine web, alcuni web designer puntano tutto sull’estetica degli elementi grafici, dimenticando le fondamentali esigenze navigazionali degli utenti che meglio esamineremo nelle lezioni successive.

Nella progettazione grafica è invece necessario considerare sia le esigenze di visualizzazione sia quelle di usabilità, allo scopo di massimizzare l’interesse dell’utente.

La cosa più importante da tenere a mente è che un progetto grafico per il web riguarda sempre la comunicazione. Se si presenta un buon progetto informativo, con elementi navigazionali efficienti e ben organizzati, ma con un aspetto poco curato, gli utenti difficilmente lo utilizzeranno.

Allo stesso modo realizzando un sito con un aspetto gradevole ma poco utilizzabile e accessibile gli utenti difficilmente saranno in grado di utilizzarlo e valutarlo al meglio.

Uno dei maggiori problemi da considerare nella progettazione grafica di un sito riguarda il tempo impiegato dagli utenti per mettere a fuoco la pagina e per trovare l’informazione desiderata, qualunque essa sia (una parte del contenuto, un link ad un’altra pagina, un’immagine specifica, ecc.).

Il layout del sito non dovrebbe pertanto costituire un ostacolo ma dovrebbe rappresentare un’interfaccia carica di significati adatti a costruire un rapporto diretto fra l’utente e l’informazione.

Il principale elemento o sezione di una pagina, indicante la sua finalità specifica, dovrebbe quindi essere sempre chiaramente visibile e immediatamente individuabile.

Ogni link presente dovrebbe avere un titolo preciso che identifichi immediatamente la sua funzione e il suo contenuto.

E’ necessaria anche una struttura per la navigazione che non solo non cambi aspetto quando il cursore passa sopra di essa ma che indichi anche le pagine o le sezioni attive al momento. E’ in questo modo che gli utenti capiscono dove si trovano e dove vogliono muoversi all’interno di un sito.

Nonostante questo gli elementi navigazionali indicati e la presenza di molteplici link non dovrebbero costituire le caratteristiche dominanti di una pagina web.

Se questi elementi sono realizzati graficamente in modo da essere facilmente trovati e sono presentati in maniera evidente nel

contenuto, solo allora gli utenti potranno focalizzarsi sull’informazione e potranno decidere come muoversi verso le altre pagine e gli altri contenuti.

Layout e composizione

Il primo elemento da considerare per un’adeguata progettazione grafica delle pagine di un sito è una corretta suddivisione interna delle pagine: in base agli elementi da inserire e a seconda del valore che ad essi vogliamo attribuire.

La consapevolezza della progettazione grafica di un sito risiede infatti nella comprensione delle relazioni spaziali che esistono fra le sue diverse componenti.

Ogni pagina appartiene al sito

Nonostante normalmente ci sia una notevole differenza fra il layout della homepage e quello del resto del sito, dovrebbe comunque esistere un tema o uno stile trasversale per tutte le sue pagine in modo da renderlo graficamente omogeneo.

Un modo semplice per creare un senso di omogeneità tra le pagine di un sito è, ad esempio la ripetizione dei blocchi per la navigazione e l’impiego in tutte le pagine di una stessa palette di colori o un unico template.

Anatomia di una pagina web

Il primo elemento da determinare nella progettazione grafica di un sito è la suddivisione e l’organizzazione interna delle singole pagine a cominciare ovviamente dalla home page.

E’ necessario organizzare ogni pagina in blocchi distinti a seconda del loro contenuto (titoli, testi, annunci, immagini, ecc.).

Poi bisognerà scrivere all’interno dei blocchi almeno parte dei contenuti per controllare la loro adattabilità alla suddivisione grafica realizzata.

Tali elementi potrebbero infatti oltrepassare i limiti della finestra del nostro browser e finire in uno spazio non visibile.

Blocchi di contenimento

Ogni pagina web ha dei contenitori. Questi possono avere forme diverse a seconda delle nostre esigenze.

Senza contenitori non sarebbe possibile collocare correttamente i contenuti della nostra pagina.

La larghezza del contenitore può essere considerata come un elemento liquido che si espande fino a riempire e ad oltrepassare la finestra messa a nostra disposizione dal browser.

Per evitare questo tipo di inconvenienti possiamo fare in modo che il contenuto ricada esattamente all’interno della finestra del nostro browser.

Il logo o l’emblema di un sito

Nello sviluppo grafico di un sito viene come prima cosa indicato, nel layout della home page, il suo elemento identificativo: il logo di un prodotto o della ditta che ha commissionato il sito oppure un simbolo particolare scelto da un privato per comunicare un determinato messaggio o la mission del sito.

Il primo blocco identificativo che appare nel sito web dovrebbe contenere il logo della ditta oppure il suo nome ed essere collocato in cima ad ogni sua pagina. Il blocco identificativo pubblicizza maggiormente il marchio e consente agli utenti di capire che le pagine che stanno vedendo sono parte di un unico sito.

Posizione degli elementi grafici per la navigazione

E’ essenziale che le modalità di navigazione di un sito siano graficamente facili da individuare, capire e usare.

Gli utenti si aspettano normalmente di vedere il blocco grafico navigazionale proprio in cima alla pagina.

Posizione del contenuto

Il contenuto è senz’altro la parte più importante da evidenziare graficamente all’interno delle nostre pagine. Infatti un utente tipico, non trovando quello che cerca, entrerà e lascerà il sito in una manciata di secondi.

Per questo motivo è importante che l’utente venga subito indirizzato, attraverso una corretta suddivisione interna, al punto principale del sito.

Posizionamento del footer

Collocato nella parte inferiore della pagina, il cosiddetto “footer” contiene di norma il copyright, le connessioni e le informazioni legali relative al sito e ai suoi sviluppatori. Separando i contenuti finali dalla parte inferiore del browser, il “footer” dovrebbe indicare agli utenti che essi sono realmente nel fondo della pagina.

Lo spazio vuoto

Il termine “spazio vuoto” (o spazio negativo) si riferisce a qualsiasi area della pagina non coperta da caratteri o da illustrazioni.

In molti casi, nella progettazione grafica delle pagine web, si evidenzia il bisogno di riempire ogni centimetro con foto, testi, tabelle e dati.

Contrariamente a questa tendenza, avere uno spazio vuoto è sempre importante per dare il giusto risalto agli elementi e per non affaticare la vista degli utenti.

Senza l’inserimento e la pianificazione degli spazi vuoti un progetto grafico finisce per sembrare solo una stanza affollata.

Lo spazio vuoto offre respiro alla pagina guidando l’occhio dell’utente, creando inoltre il bilanciamento e l’unità tra le varie parti.

Considerando tutti gli elementi elencati, anche in assenza di un contenuto definitivo, possiamo già usare dei blocchi di contenimento standard, sviluppati proprio per una corretta realizzazione grafica delle pagine web, per iniziare a sviluppare un nostro layout.

Teoria della griglia

Le griglie costituiscono degli elementi essenziali per la realizzazione di un progetto grafico.

Usare una griglia non significa solo allineare gli elementi ma anche metterli in relazione in modo proporzionato. A questo scopo è stata ideata per il web una “teoria della griglia”.

Quelle composizioni grafiche che presentano una struttura benproporzionata sono considerate senz’altro più gradevoli alla vista.

Stiamo parlando di quello stesso concetto di “proporzione” largamente abbracciato in campo artistico già nella pittura del rinascimento italiano, per rendere ogni opera armoniosa in tutte le sue parti.

Attraverso la “teoria della griglia” tale principio viene preso in considerazione anche nel campo del web design grafico.

Il concetto di proporzione ci indica infatti le linee guida per progettare quei layout effettivamente gradevoli alla vista di ogni utente.

La regola delle tre parti

Per cominciare disegnate un rettangolo su un foglio di carta. Le sue dimensioni non hanno importanza.

Ora dividete il vostro rettangolo sia orizzontalmente che verticalmente in tre parti uguali.

Dividete ancora orizzontalmente le tre parti, presenti nella parte più alta del layout creato, in ulteriori due parti (anche di dimensioni leggermente differenti).

Infine dividete ancora a metà le tre colonne in cui è stato diviso l’intero rettangolo, per creare una griglia piu' piccola.

A questo punto sul foglio di carta utilizzato dovrebbe risultare un oggetto diviso proprio in base alla "regola delle tre parti". Esempio di griglia secondo la regola delle tre parti

Con la realizzazione di altri rettangoli, sempre attraverso i passaggi elencati, si potranno sperimentare diverse opzioni per un layout finale.

Utilizzando queste semplici divisioni, possiamo iniziare a disporre su di esse i nostri elementi.

Posizionamento degli elementi secondo la griglia

· Un rettangolo più ampio scelto sulla griglia verrà utilizzato come container principale del nostro contenuto, che pertanto occuperà più sezioni della griglia realizzata (almeno 2/3 della griglia). Normalmente questo blocco principale dovrebbe essere posizionato nella parte medio-bassa del layout della nostra pagina.

· Subito dopo andrà collocato il blocco di navigazione (o menù) a sinistra, possibilmente sempre nella parte centrale.

· Dopo verrà collocata l’intestazione, pertinente al contenuto indicato, esattamente sopra allo stesso e leggermente a sinistra.

· Poi si potrà posizionare il logo o il simbolo del sito al di sopra del menù.

· Infine il footer verrà posizionato al di sotto del blocco del contenuto e possibilmente nella parte inferiore destra della griglia.

Ovviamente oltre alla griglia è possibile utilizzare ulteriori elementi e principi per ottenere una giusta distribuzione degli elementi all’interno del layout delle pagine.

Bilanciamento

Per bilanciamento visivo si intende una particolare disposizione dei vari elementi secondo i criteri di: simmetria e asimmetria.

Bilanciamento simmetrico

Il bilanciamento simmetrico, o bilanciamento esplicito, indica che gli elementi di una composizione sono gli stessi e sono disposti ad una distanza uguale rispetto ad un asse mediano.

Questo tipo di bilanciamento (chiamato anche "simmetria orizzontale") può essere applicato al layout di un sito web centrandone il contenuto oppure bilanciandolo fra le diverse colonne.

Altre due forme di bilanciamento simmetrico meno usate nella progettazione dei siti web sono:

· La simmetria bilaterale: quando una composizione viene bilanciata su due assi di simmetria.

· La simmetria radiale: quando gli elementi grafici vengono ugualmente distanziati rispetto ad un punto centrale.

Bilanciamento asimmetrico

Il bilanciamento asimmetrico, o bilanciamento irregolare, presenta gli elementi grafici a specchio su ambedue i lati del layout e coinvolge oggetti di diversa grandezza, forma, colore e disposizione.

Questi oggetti vengono disposti in modo tale che, a dispetto della loro disomogeneità, la pagina non risulti sbilanciata.

Ad esempio, pur avendo su un lato della pagina un elemento grafico di grandi dimensioni, accostato ad elementi molto più piccoli, la composizione viene ancora percepita come bilanciata.

Diversamente dal bilanciamento simmetrico quello asimmetrico è molto versatile e, per questa ragione, molto più usato nel web.

Unità

Il concetto di unità si riferisce al modo in cui i diversi elementi di una composizione interagiscono fra loro. Un layout unitario è quello che si presenta come un insieme unico piuttosto che come una moltitudine di parti separate.

E’ importante che un’unità esista non solo fra gli elementi di una singola pagina ma anche tra tutte le pagine di un sito web, concepite secondo un’unica idea di fondo.

Per conferire un aspetto unitario al nostro layout è possibile seguire i seguenti criteri: prossimità e ripetizione.

Prossimità

La prossimità indica un modo per creare un gruppo di oggetti allo scopo di farli apparire come una singola unità.

Collocando gli oggetti l'uno vicino all'altro in un stesso layout si creerà un punto focale verso il quale far convergere l’attenzione.

Ipotizziamo che in una pagina web si abbiano due colonne di testo, ed al centro di esse i titoli di due paragrafi. Immaginiamo che, nella colonna di sinistra, il titolo del paragrafo sia equidistante dai testi posti sopra e sotto; mentre nella colonna di destra il titolo sia attaccato al testo del paragrafo sottostante. In questo caso, secondo la regola di prossimità, il titolo nella colonna di sinistra verrà percepito come un separatore fra il testo che sta sopra e quello che sta sotto; mentre quello nella colonna di destra verrà ritenuto come appartenente al paragrafo sottostante.

Ripetizione

Ogni volta che vengono messi insieme elementi simili, questi creano un gruppo. Allo stesso modo la ripetizione dei colori, delle forme, delle texture o di altri oggetti simili fra loro aiuta a rendere omogeneo il design di una pagina web. Pertanto i concetti di ripetizione e unità di pagina sono strettamente collegati.

Un buon esempio di questo concetto è rappresentato dagli elenchi puntati. Il punto che precede ciascun elemento della lista serve ad in-dicare l’appartenenza dei medesimi ad un unico gruppo.

Enfasi

Strettamente collegato all'idea di unità è il concetto dell’enfasi in relazione ad un determinato elemento.

L'enfasi mira a fare in modo che un particolare oggetto attiri l'attenzione di chi osserva.

Quando si progetta il layout di una pagina web accade spesso che si voglia far risaltare un certo elemento (oppure la pagina stessa). Alcune volte la scelta ricade su un pulsante che si desidera far utilizzare, oppure su di un messaggio di errore che volete che essi

leggano. Un metodo per raggiungere una sua enfatizzazione è quello di collocare l’elemento in un punto focale della pagina.

Un punto focale è un elemento qualsiasi della pagina che attrae sempre l'occhio dell'osservatore.

Posizionamento

Il centro diretto della composizione di una pagina è quel punto che viene immediatamente percepito ad una prima occhiata e rappresenta il migliore posizionamento per un elemento a cui si vuole conferire una particolare enfasi.

Più un elemento è lontano dal centro, meno verrà notato ad una sem-plice occhiata.

Isolamento

Il concetto di isolamento serve ancora una volta a conferire enfasi a particolari elementi. Ad esempio un’immagine visualizzata in questo modo richiamerà sempre l’attenzione dell’utente.

Contrasto

Questa tecnica consiste nella giustapposizione di elementi grafici dissimili e costituisce uno dei metodi più usati nel layout della pagine web per conferire enfasi. Più grande è la differenza tra un elemento grafico e il suo background, più l’elemento risalterà all’interno della pagina. Ovviamente il contrasto può essere ottenuto anche attraverso l’utilizzo di colori opposti.

Tipologie generali del layout

· Elementi navigazionali a sinistra

Normalmente, in quasi tutti i siti, gli elementi navigazionali vengono progettati sul lato sinistro delle pagine, come il modello di layout presentato nella prossima slide mette bene in evidenza.

Intestazione

Elementi navigazionali

Contentuti

Footer

Molti siti che utilizzano questa configurazione standard non utilizzano la colonna di sinistra come blocco navigazionale che invece viene posizionato orizzontalmente sulla parte alta della pagina.

In questo caso gli elementi navigazionali a sinistra vengono usati per dividere lo spazio sotto all’intestazione del sito in due colonne di dimensioni differenti.

· Elementi navigazionali a destra

Normalmente in questo caso gli elementi di navigazione sul lato destro della pagina non costituiscono quasi mai il blocco

navigazionale principale di un sito, dal momento che lo sguardo degli utenti tenderà sempre ad analizzare la pagina partendo da sinistra. Al contrario gli oggetti posizionati a destra spesso indicano degli elementi per la navigazione secondaria, degli annunci pubblicitari o dei contenuti secondari.

· Navigazione a tre colonne

Un layout di pagina che presenta un’organizzazione di questo tipo ha in evidenza una colonna centrale più grande, affiancata da due

colonne di dimensioni minori. L’immagine seguente, relativa al sito della Apple, è un esempio di questo tipo specifico di layout di pagina.

Molto spesso un’organizzazione di questo tipo è utile per quei siti web che hanno moltissimi elementi atti a facilitare la navigazione, e uno scarso contenuto testuale.

Molto spesso un layout di questo tipo viene applicato alla sola home page, mentre nelle pagine dipendenti verrà utilizzato un layout con elementi navigazionali a sinistra.

Risoluzione dello schermo

Molto spesso capita che i designer progettino un sito web ottimizzandolo per una particolare risoluzione dello schermoutilizzato dagli utenti.

Un sito web destinato solo agli utenti dotati di schermi ad alta risoluzione dovrebbe prevedere un design grafico maggiore di 800 pixel.

Tuttavia l’obiettivo fondamentale da raggiungere in questa particolare scelta è quello di evitare sempre che gli utenti, per visualizzare correttamente le pagine, debbano muoverle da sinistra a destra per vedere l’intero contenuto.

La scelta dei colori

La scelta dei colori costituisce un passaggio fondamentale nella concettualizzazione grafica di un sito web.

In questa scelta dobbiamo tenere contro contemporaneamente di un fattore estetico, di usabilità e di identità stessa del sito.

Come è noto ogni tipo di colore produce una specifica sensazione in chi osserva.

Pertanto anche nel campo del web design grafico i colori utilizzati nelle pagine web sono scelti in base a quello che possono comunicare.

Senza entrare in dettaglio nel tema relativo alla psicologia applicata all’utilizzo dei colori, è senz’altro importante, nella realizzazione grafica, tenere bene a mente le sensazioni che ogni colore può comunicare all’utente.

Ad esempio è ormai risaputo che il colore rosso, un colore caldo, sia utilizzato per comunicare una sensazione di “forza e aggressività” mentre l’azzurro, un tipo di colore freddo, venga usato generalmente per infondere un senso di pace e tranquillità nell’osservatore.

Determinati accostamenti di colori possono essere scelti considerando tre componenti fondamentali: la tonalità, la luminosità e la saturazione.

Per tonalità di un colore di intende la sua purezza. Un colore puro corrisponde infatti ad un’unica lunghezza d’onda dello spettro della luce. Inoltre un colore di questo tipo non presenta aggiunte di pigmenti bianchi o neri.

La luminosità (o valore) indica la quantità di bianco o di nero presente in un determinato colore.

Infine la saturazione indica l’intensità di un colore in base alla sua brillantezza o opacità.

Utilizzando dei valori di colore vicini tra loro si conferisce alle pagine un aspetto generale di tranquillità dove non appaiono elementi con particolare enfasi o discordanti nell’aspetto generale.

Colori in contrasto vengono usati come mezzo efficace per dirigere l'attenzione dello spettatore in uno specifico punto della composizione.

Infatti proprio in base alla sua saturazione, è normale che un colore brillante attragga immediatamente l’occhio dell’utente.

Ovviamente è fondamentale tenere conto di questo fattore nel momento in cui si vuole conferire una maggiore enfasi ad un determinato elemento, indipendentemente dalla sua posizione nella pagina.

Schemi per l’utilizzo dei colori

Come possiamo facilmente individuare e scegliere quei colori che lavorano bene insieme? A questo proposito è possibile utilizzare degli schemi appositi.

Gli schemi per l’utilizzo ragionato dei colori sono delle formule di base per creare combinazioni efficaci e armoniose anche nella creazione di pagine web.

E’ possibile distinguere sei schemi basilari:

· schema monocromatico

· schema acromatico

· schema analogo

· schema complementare

· schema della separazione dei colori complementari

· schema dei colori a triade

· schema complementare doppio

Per iniziare a utilizzare uno di questi classici schemi di colore bisogna prima di tutto scegliere un colore di partenza.

Nella scelta di questo colore è senz’altro fondamentale avere bene in mente la sensazione che vogliamo comunicare all’utente attraverso le nostre pagine.

Schema monocromatico

Uno schema di questo tipo è costituito da un unico colore di base e da un certo numero di tinte dello stesso colore. Le tinte secondarie

vengono utilizzate in combinazione con il colore principale per conferire proprio a questo una particolare enfasi.

Schema acromatico

In questo schema vengono utilizzati insieme solo quei colori neutri, come il bianco e il nero che, se normalmente aggiunti ad un altro colore, modificano solo la sua intensità.

Dal momento che tale modello spesso implica il solo utilizzo di bianco, nero e variazioni di grigio, può essere considerato non come uno schema distinto ma come una semplice variazione di quello monocromatico.

Schema analogo

Uno schema di questo tipo consiste nell’utilizzo di colori che sono adiacenti all’interno della ruota dei colori.

Ruota dei colori

Per creare un buon schema analogo è necessario che le parti rappresentate dai colori, scelti in base alla loro vicinanza nella ruota, non risultino troppo differenti per grandezza.

La proporzione ideale da rispettare è quella in cui ogni elemento non appare più grande di 1/3 dell’intero, come ad esempio nell’immagine seguente, dove il marrone, il bordeaux e l’arancio vengono non solo utilizzati, su sfondo neutro, per la loro vicinanza ma anche per il loro messaggio di calore e accoglienza.

Esempio di utilizzo di schema analogo.

Schema complementare

Uno schema di questo tipo implica l’utilizzo di quei colori posizionati in zone opposte della ruota dei colori, come ad esempio il verde e il rosso oppure il giallo e il viola.

Questi colori vengono definiti come complementari l’uno dell’altro.

Errori nell’utilizzo dello schema complementare

Dal momento che i colori definiti come complementari sono così differenti è importante che vengano utilizzati con una certa cautela: quando utilizzati insieme provocano infatti un particolare effetto conosciuto come contrasto simultaneo.

Per contrasto simultaneo si intende quell’effetto in cui ogni colore fa apparire l’altro più vibrante e forte. Questo effetto è l’elemento che rende efficace l’utilizzo di questa schema di colori, tuttavia non funziona assolutamente quando i colori complementari vengono utilizzati in primo piano, come nell’immagine seguente.

Un altro comune errore nell’utilizzo di questo schema riguarda la scelta di quei colori che non sono direttamente opposti sulla ruota o che non sono neppure così vicini da essere analoghi.

Combinazioni di questo tipo vengono definite discordanti dal momento che i colori non si abbinano adeguatamente, non migliorando di certo l’aspetto delle pagine.

Lo schema della separazione dei colori complementari, lo schema triade e lo schema tetradico sono delle semplici varianti allo schema complementare già analizzato.

Schema della separazione dei colori complementari

Per creare questo schema specifico è necessario utilizzare un colore base insieme ai due colori che sono adiacenti al suo complementare.

Ad esempio se il colore base scelto è il rosso, gli altri due colori, al posto del verde che è il complementare, saranno quelli posizionati vicino al verde, come ad esempio il colore acquamarina, ottenuto da una particolare mescolanza di verde e blu.

Schema di colore triade

Per la scelta dei colori adatti a questo schema utilizzeremo lo stesso criterio visto per il modello precedente ma in questo caso i colori scelti saranno ancora più distanti sulla ruota rispetto al colore base.

Sempre partendo da un colore di base rosso, gli altri colori scelti non saranno un giallo-verde e un verde-azzurro ma direttamente il giallo e l’azzurro.

Schema tetradico

Questo schema implica l’utilizzo di 4 colori. In questo modello specifico vengono utilizzati contemporaneamente due schemi complementari di base. Ad esempio una schema complementare che combina l’arancione e il blu può essere associato ad un altro schema dello stesso tipo che invece unisce il giallo e il viola.

Creare e utilizzare una “tavolozza di colori” o palette

Abbiamo visto nelle lezioni precedenti come i monitor usino un sistema di colori RGB e come ogni pixel presente venga “colorato”attraverso una combinazione di rosso, verde e blu.

Ognuno di questi tre colori presenta in relazione alla sua luminosità 256 livelli di luce. Pertanto questi livelli possono essere utilizzati per creare una combinazione di 16.777.216 colori diversi.

Fortunatamente esiste un modo per descrivere e usare facilmente ciascuno di questi colori. Come abbiamo già visto in relazione ai fogli di stile, a ogni colore è associato un codice che indica, per ogni caso, il livello di rosso, verde e blu presente in ogni colore.

Questo codice fondamentale nella scelta dei colori e nella creazione di una palette può essere facilmente visualizzato attraverso un programma come Adobe Photoshop.

Attraverso l’utilizzo di tutti questi colori possiamo scegliere quelli che, a seconda delle esigenze, faranno parte della nostra palette, andando a formare una gamma di colori differenti con uno stesso gradiente, specifica per una realizzazione grafica ottimale delle nostre pagine web.

Nella scelta e nella realizzazione di una determinata palette bisogna sempre considerare l’inserimento di almeno due colori in contrasto

che possano essere utilizzati per distinguere al meglio lo sfondo e il nostro contenuto testuale.

Un contrasto appropriato tra testo e colore di sfondo è infatti essenziale per migliorare la leggibilità delle nostre pagine: un elemento fondamentale nella loro creazione.

FINE LEZIONE