Corso di Web design
Anno accademico 2011-12 (IED Arti Visive)
Coordinatore: Luigi Vernieri
Docente: Giuseppe Guariniello
mercoledì 9 maggio 12
Web design
8° lezione
Il colore nella grafica digitale
La grammatica del colore
Nella progettazione di un sito web la scelta dei colori appropriati rappresenta una delle sfide
più impegnative. In Internet il colore adempie a diverse funzioni: comunica lo spirito di un sito,
distoglie o focalizza l’attenzione, aggiunge struttura al layout e assegna i diversi livelli di
importanza
In teoria è possibile identificare otto diversi contrasti cromatici; in pratica gran parte dei
contrasti appare in combinazione. Per il web designer la sfida è farne un uso creativo e
comunicare il contenuto in modo chiaro e interessante
Tipi di contrasto: freddo-caldo, chiaro-scuro, di quantità, di qualità, di simultaneità,
cromatico-acromatico, dei colori puri, dei complementari
mercoledì 9 maggio 12
Web design
8° lezione
Contrasto freddo-caldo
Colori Caldi: il Giallo, l’Arancio ed il Rosso (e le loro relative sfumature).
Colori Freddi: il Blu, il Viola ed il Verde (e le loro relative sfumature).
Descrive la combinazione di un colore che si trova in una posizione calda
sulla ruota dei colori con un colore che si trova in una posizione fredda.
Si basa su un fenomeno percettivo che provoca l’attenuazione dei colori freddi e l’enfasi di
quelli caldi.
Possibile creare un contrasto freddo-caldo usando toni neutri in questo caso si può cercare di
spostare i toni di grigio verso il caldo o il freddo
accanto a un colore caldo
come il rosso sembra freddo
mercoledì 9 maggio 12
mentre vicino a un colore freddo
come il blu, appare caldo
Web design
Contrasto freddo-caldo
mercoledì 9 maggio 12
8° lezione
Web design
8° lezione
Contrasto chiaro-scuro
Il tipo di contrasto più importante per lo schermo, ripaga sia in termini estetici che ergonomici.
Contrasti troppo marcati potrebbero produrre effetti di sfarfallio e illusioni visive, è opportuno
tenere conto di questi fattori soprattutto in presenza di testo.
mercoledì 9 maggio 12
Web design
8° lezione
Contrasto di quantità
Indica il rapporto quantitativo esistente tra i colori. La distribuzione simmetrica, cioè i diversi
colori usati in quantità approssimativamente uguali, produce un risultato visivamente
bilanciato, a volte perfino spento. La modifica delle proporzioni produce un rapporto con effetti
più intensi
Sicuramente il rosso cattura l’attenzione ma in grandi quantità può stancare
mercoledì 9 maggio 12
Web design
Contrasto di quantità
La modifica delle proporzioni produce un rapporto con effetti più intensi...
mercoledì 9 maggio 12
8° lezione
Web design
8° lezione
Contrasto di qualità
Combinazione di gradazioni tonali diverse appartenenti alla stessa famiglia di colori.
Questo tipo di variazione tonale produce un tema di aspetto equilibrato e solido.
Possibile creare effetti di trama e profondità modificando i livelli di luminosità per strutturare
il layout e classificare le informazioni in base alla loro importanza. Tuttavia è consigliabile
utilizzare un altro colore per evidenziare gli elementi di navigazione.
mercoledì 9 maggio 12
Web design
Contrasto di qualità
mercoledì 9 maggio 12
8° lezione
Web design
8° lezione
Contrasto di simultaneità
Inevitabile a causa della mancanza di memoria cromatica “assoluta” i colori sono percepiti in
relazione al loro contesto. Il contesto produce un cambiamento nel valore del colore.
L’utilizzo di un colore ad alta saturazione causa una persistenza dell’immagine nei colori
complementari. Per le aree che contengono grandi quantità di testo è preferibile usare colori a
bassa saturazione.
"Dopo che, verso sera, fui entrato in un'osteria e un'avvenente fanciulla, dal volto bianchissimo, capelli neri, e un corsetto rosso scarlatto, entrò nella mia camera, la fissai mentre stava
distante da me, in una debole luce. Quando infine ella si mosse, sul fondo della parete bianca a me dirimpetto, scorsi un volto nero circondato da un bagliore chiaro, e le vesti della nitida
figura di un bel verde mare". Goethe, La teoria dl colore
mercoledì 9 maggio 12
Web design
8° lezione
Contrasto cromatico-acromatico
L’effetto prodotto dall’uso delle gradazioni di grigio o di gradazioni molto tenui di altri colori, in
combinazione con altri colori in alta saturazione. Usato insieme al contrasto di quantità
costituisce una base solida per il web design. La facilità di lettura aumenta se ampie aree dello
schermo sono a bassa saturazione. Al contrario è preferibile evidenziare con colori ad alta
saturazione gli elementi per la navigazione e l’interazione (menu - link). Lo sfondo neutro
potenzia l’effetto di colori totalmente saturi.
mercoledì 9 maggio 12
Web design
8° lezione
Contrasto dei colori puri
La combinazione di diversi colori ugualmente saturi.
A volte questo tipo di colori può essere associato all’infanzia, al gioco e allo svago.
Possibile ottenere effetti meno sgargianti riducendo la saturazione.
mercoledì 9 maggio 12
Web design
8° lezione
Contrasto dei complementari
La combinazione di un colore accentuato in combinazione con il suo
complementare opposto presente nella ruota dei colori. A causa delle
differenze di organizzazione delle ruote dei colori, le coppie dei
complementari possono variare. Utilizzato con un contrasto di quantità
permette di attirare l’attenzione su elementi quali gli indicatori di navigazione (menu, pulsanti)
mercoledì 9 maggio 12
Web design
8° lezione
L’ergonomia del colore
Rispetto alla carta stampata la modalità di presentazione dei contenuti tipica del digitale
comporta uno sforzo visivo maggiore di cui occorre tenere in considerazione in fase di
progettazione per agevolare la visualizzazione e ridurre al minimo l’affaticamento
La scelta del tipo di carattere e la dimensione incidono sulla legibilità. Di norma è preferibile
evitare i cartteri con grazie per blocchi di testo lunghi.
L’utilizzo di colori complementari ad alta saturazione provoca un evidente effetto sfarfallio.
mercoledì 9 maggio 12
Web design
8° lezione
Colore e testo - Il giusto contrasto
I supporti basati su schermo emettono luce mentre la carta la riflette. Il contrasto di luminosità
condizionato dalle combinazioni di colori è di massima importanza ai fini della leggibilità. La
variazione di luminosità del 100% (uso del nero su bianco) su schermo rende la lettura difficile.
Una discrepanza di luminosità compresa tra il 40% e il 90% garantisce la leggibilità del testo.
Luminosity Colour Contrast Ratio Analyser:
http://juicystudio.com/services/luminositycontrastratio.php
mercoledì 9 maggio 12
Web design
8° lezione
Il colore come indicatore per l’interazione utente
I cambiamenti dinamici nel tono di colore, luminosità, contrasto e saturazione possono
migliorare sensibilmente la struttura di navigazione di un sito web. Le modifiche provocate dai
movimenti del cursore aiutano l’utente ad orientarsi. Nell’html è possibile identificare fino a
cinque modalità diverse
mercoledì 9 maggio 12
Web design
8° lezione
Il colore come indicatore per l’interazione utente
mercoledì 9 maggio 12
Web design
8° lezione
Accessibilità
Requisito indispensabile per sviluppare siti accessibili è sapere innanzitutto cosa si intende
con il termine "accessibile". Ma da dove acquisire questa definizione? La fonte tecnica
normativa a cui ci si deve ispirare per quanto riguarda l’accessibilità sono le raccomandazioni
internazionali prodotte dal WAI, Web Accessibility Initiative, ovvero "Iniziativa per
l'Accessibilità del Web". Si tratta di una sezione del W3C che si occupa esclusivamente di
questo problema per rendere il Web uno strumento realmente democratico ed universale.
"Un contenuto è accessibile quando può essere usato da qualcuno con una disabilità".
"La forza del Web sta nella sua universalità. L'accesso da parte di chiunque,
indipendentemente dalle disabilità, ne è un aspetto essenziale". Tim Berners-Lee
http://www.w3.org/WAI/
http://www.w3c.it/wai/
mercoledì 9 maggio 12
Web design
8° lezione
Accessibilità - Continuiamo con le domande
1. Il sito include metadati dettagliati?
2. Il contenuto è accessibile quando i css sono disabilitati?
3. Il contenuto è accessibile quando le immagini sono disabilitate?
4. Il sito può essere stampato senza problemi?
5. Il sito viene visualizzato correttamente su dispositivi mobili?
6. Ci sono adeguati contrasto/luminosità?
7. Il sito funziona sui nuovi e vecchi browser?
8. I tempi di caricamento del sito sono ragionevoli?
...
http://www.maxdesign.com.au/presentation/checklist.htm
mercoledì 9 maggio 12
Web design
8° lezione
Aderenza agli standard
1. Il sito ha un corretto Doctype? (http://www.gdesign.it/pages/howto/articoli/doctype/doctype.php)
2. Il sito ha un corretto Character set? (http://en.wikipedia.org/wiki/Character_encoding#Popular_character_encodings)
3. Il sito ha un (X)HTML Valido?
4. Il sito ha CSS Valido?
5. Il sito usa CSS hacks?
6. Il sito ha classi o id inutili?
7. Il codice è ben strutturato?
8. Il sito ha link rotti?
9. Quali sono le performances del sito in termini di velocità/peso della pagina?
10. Il sito ha errori nel JavaScript?
11. Il sito usa i CSS per tutti gli aspetti di presentazione (fonts, colour, padding, borders etc)?
12. Tutte le immagini decorative sono inserite nel CSS, o sono nel (X)HTML?
...
http://www.maxdesign.com.au/presentation/checklist.htm
mercoledì 9 maggio 12
Web design
8° lezione
Tipografia nel web
La scelta del font è un passaggio fondamentale per la creazione di un progetto grafico e per
veicolare il messaggio. Nel web l’uso dei font (i caratteri tipografici) è limitato a quelli
predefiniti installati sul sistema operativo.
Font-Face
Col tempo le cose sono migliorate e i browser moderni hanno cominciato a riconoscere ad
esempio la proprietà @font-face, già prevista dalle reference dei CSS 2, che permette di
caricare, con due righe di codice, sul computer dell’utente qualsiasi font il designer abbia
scelto per il suo sito web.
mercoledì 9 maggio 12
Web design
8° lezione
Tipografia nel web
Se dal punto di visto tecnico e teorico è possibile usare tutti i font che si hanno sul computer,
dal punto di vista legale e pratico no. I font predefiniti installati sul nostro computer hanno una
licenza che ne limita l’utilizzo al solo sistema operativo e anche quando ne acquisto di nuovi
bisogna sempre far attenzione alle licenze che rilasciano gli studi che realizzano e vendono
font (Type Foundries).
In alternativa è possibile installare e usare gli openfonts, font che hanno una licenza
commerciale free. Una fornitissima lista la troviamo su webfonts.info e su fontsquirrell.com.
Di recente Google ha rilasciato la sua lista di openfonts da usare liberamente.
Anche usando gli openfonts bisogna affrontare un’altro inconveniente: Internet Expolorer.
Explorer non supporta la proprietà @font-face per i font TrueType (TTF) e OpenType (OPF), i
formati più diffusi, ma solo per i font EOT (Embedded Open Type), formato proprietario proprio
dalla Microsoft.
Sempre su fontsquirrel.com è possibile scaricare il @font-face font kit che in un solo file zip ha
le versioni EOT e TTF del font scelto e un CSS di esempio.
mercoledì 9 maggio 12
Web design
8° lezione
Tipografia nel web
Typekit è nato per risolvere i problemi di licenze di utilizzo dei font nel web, pagando un
abbonamento annuale si può accedere ai cataloghi di Fonterie come TypeTogheter, FontFont,
Exljbirs, Buro Destruct, dello Studio Simonson, T-26, Veer e di una parte del catalogo
dell’Adobe. (siti simili a Typekit: Fontdeck e Kernest)
Altre soluzioni:
- image-replacement
- sIFR, permette(va) di usare tutti i font usando flash e javascript
- Cufon e Typeface sfruttano javascript e il tag canvas, non richiedono flash o altri plug-in e
sono supportate da tutti i browser più diffusi.
Fonte: http://www.tiragraffi.it/lavoro/strumenti/2010/09/la-tipografia-web/
mercoledì 9 maggio 12
