Classe F2
Clara Veronese
Tema: “Progettazione di un sito web”
Si immagini di dover progettare il layout grafico di un sito (es. proprio sito web, sezione del sito
della propria classe/scuola...). Descrivere le scelte grafiche che si adotteranno, prestando
particolare attenzione a:
• Tipo di font da utilizzare: individuare quale dimensione, colore, e tipo di font usare per ogni tipo
di testo o di link.
• Uso del colore: individuare una palette di colori da utilizzare per tutto il sito.
• Immagini: uso delle immagini, proporzione e loro posizionamento nella pagina.
• Layout. che tipo di layout dare alla pagina, individuazione di griglia e di possibile template,
posizionamento di logo, menu principale, eventuale sottomenu, contatti e altri elementi che
devono rimanere in ogni pagina.
Se lo si desidera, provare a disegnare la homepage del sito, utilizzando un software di grafica (es.
Photoshop, Gimp, Fireworks, Illustrator, ecc.) oppure un Web editor (es. FrontPage, Dreamweaver,
NVU, ecc.) oppure semplicemente utilizzando PowerPoint o OpenOffice Impress.
“La maggioranza dei Web designer comincia a lavorare ai propri progetti chiedendosi chi sia e
che cosa voglia l’utente finale. Ma noi sappiamo dell’esistenza di almeno un genio del web design
che realizza ogni suo lavoro partendo dall’invenzione di comportamenti dinamici che non ha mai
visto applicati in un sito e che continua ad elaborarli lasciandosi trasportare nella direzione in cui
lo guidano. Per quanto insolito, questo metodo li conduce a siti a tal punto professionali e agili che
incantano esattamente gli utenti cui intendevano arrivare, proprio in virtù della loro singolarità”.
Così Jeffrey Zeldman, nel suo libro “Dalla carta al web” (2001), chiariva l’idea che “progettare per
rivolgersi ad un pubblico specifico è un’attività che non dispone di alcuna base scientifica: non
esistono misure di riferimento certe, anzi, a dire il vero niente è certo in questo settore”. In effetti il
web, medium mutante e mutevole, poco si adatta ad essere imbrigliato nella rigidità del “si fa così”;
è un ambiente “selvaggio”, per questo sicuramente affascinante, dove è necessario avventurarsi con
un considerevole bagaglio di precauzioni (il W3C1 le chiama “raccomandazioni”) ma anche con una
buona dose di creatività.
Colori
La mia ipotesi parte dalla definizione della palette dei colori perché spesso questi costituiscono un
vincolo più che un elemento di scelta. Se esiste un logo aziendale o dei colori sociali definiti e
fortemente caratterizzanti come, ad esempio,
il rosso Ferrari
il blu/rosso Barilla
l’arancione/blu
IngDirect
il patriottico Alitalia
è probabile che il graphic designer debba orientare le proprie scelte in modo armonico e coerente
con l’immagine aziendale. Se invece questo vincolo non esiste la scelta cromatica è espressione
della creatività del designer, delle emozioni che si vogliono suscitare e, inevitabilmente, delle mode
del momento. Ho notato che, mentre nel quadriennio passato era in gran voga l’arancione spesso
abbinato al blu, ultimamente sono sempre di più i siti web che si orientano al verde e al giallo come
negli esempi seguenti:
1
Il W3C (World Wide Web Consortium) è un consorzio internazionale che si occupa della definizione di standard per
il web.
Principi di grafica e layout
pag. 1 di 6
Classe F2
Clara Veronese
il verde Technorati.com
il verde w3schools2
il verde DOL e Scuolab
il giallo CheBanca!
e che sono sempre più diffusi i temi oligocromatici cioè basati su una palette di pochissimi colori
(uno “potente” declinato in diverse tonalità o gradazioni, gli altri neutri – scala dei grigi – e solo
talvolta appare un colore “stridente” di uso limitato alle necessità di evidenziazione).
Un altro aspetto che vorrei sottolineare è il declino dell’uso di colori diversi per contraddistinguere
le diverse sezioni dello stesso sito. Unico baluardo restava il sito delle Poste Italiane che ancora fino
a poco tempo fa usava il blu per la sezione prodotti Bancoposta, il verde per la sezione prodotti
postali e il giallo per gli altri prodotti. I colori chiave venivano riproposti nei menu di navigazione
delle diverse sezioni e consentivano un immediato punto di riferimento visivo nella navigazione del
sito rispondendo efficacemente alla domanda “Dove sono?”. Visitandolo recentemente ho notato
che nella home page la caratterizzazione delle diverse sezioni con i colori chiave è stata mantenuta
(è stato aggiunto il rosso per una quarta sezione che non ricordavo esistente) ma è praticamente
assente nelle pagine delle sezioni (è limitata ad un quadratino in un angolo del menu di navigazione
della sezione).
home page
pagina di sezione
I miei gusti personali mi portano a scegliere una palette di colori composta da:
BLU (colore potente): classico ed elegante esprime sicurezza ed equilibrio, declinato in una gradazione non
troppo scura affinché comunichi brio e freschezza - RGB(51,51,153) - HEX #333399
ARANCIONE (colore stridente): un colore caldo, giovane ed accogliente, che esprime dinamismo, da usare
per evidenziare gli strumenti di navigazione - RGB(255,153,0) - HEX #FF9900
AZZURRO CHIARO: da usare come declinazione del blu e in alternativa al bianco che può risultare troppo
luminoso se usato in primo piano su sfondo blu - RGB(193,218,255) - HEX #C1DAFF
Utilizzerò il bianco per lo sfondo e non escludo l’uso del nero.
2
www.w3schools.com è un validissimo sito di riferimento per progettisti e sviluppatori web; il restyling con l’uso del
verde è recentissimo
Principi di grafica e layout
pag. 2 di 6
Classe F2
Clara Veronese
Il blu e l’arancione che ho scelto sono colori web-safe3, cioè fanno parte dei 256 colori “di base”
rappresentabili con la profondità di colore minima (8 bit)4. L’azzurro invece non è web-safe e, se il
sistema utilizzato per visualizzare la pagina ha una profondità di colore ridotta, potrebbe virare
verso sfumature simili nel caso di profondità di colore a 16 bit ovvero apparire “retinato” nel caso
di profondità di colore a 8 bit. Considero il problema trascurabile sia perché ormai la maggior parte
dei sistemi ha una profondità di colore superiore ai 24 bit, sia perché, in caso contrario, posso
“accontentarmi” di un colore simile se non è disponibile quello identico.
Font
Non ho dubbi, sicuramente Verdana. E’ un font sans serif “nato per il web” che ha un duplice
vantaggio:
-
essendo senza grazie è leggibilissimo anche alle piccole dimensioni.
-
è multipiattaforma in quanto l’azienda proprietaria (Microsoft), attraverso oculate e sagaci
politiche di mercato, ne ha consentito la massiccia diffusione sia sulle piattaforme Windows
che su quelle Mac distribuendolo incluso nel browser Internet Explorer; è disponibile anche
per i sistemi Linux ma deve essere installato appositamente; per evitare problemi è
opportuno specificare nel foglio di stile5 i font alternativi Arial, Geneva, Helvetica e la
famiglia generica sans-serif.
Per quanto riguarda le misure, ritengo adeguati 10 pt per il livello di paragrafo e, tenendo conto
della possibilità di definire fino a 6 livelli di titoli, prevedo la seguente graduazione:
Titolo 1
18 pt, grassetto
Titolo 2
16 pt, grassetto
itolo 3
12 pt, grassetto
Titolo 4
10 pt, grassetto
Paragrafo
10 pt, normale
Titolo 5
8 pt, grassetto
Titolo 6
8 pt, normale
Layout
Ho ipotizzato la realizzazione di un sito aziendale con home page introduttiva e una gerarchia a 3
livelli: sezione, argomento, pagina.
Poiché sono abbastanza esperta di HTML, CSS e linguaggi di scripting,6 ho realizzato mediante
questi il template. Di seguito riporto gli screen-shot delle pagine prodotte e commento le scelte
adottate.
3
Vedi www.coloriwebsafe.it
Profondità di colore a 8 bit vuol dire che si usano 8 bit per rappresentare un colore: con 8 bit si riescono a
rappresentare 28 = 256 colori diversi. Analogamente profondità di colore a 16 bit vuol dire che si usano 16 bit per
rappresentare un colore: con 16 bit si riescono a rappresentare 2 16 = 65536 colori diversi (come negli schermi di
qualche modello di cellulare meno recente). Per rappresentare il colore di immagini fotografiche (che hanno maggiore
varietà di sfumature) in modo "fedele all'originale" (truecolor) sono necessari 24 bit. I monitor dei nostri pc
normalmente utilizzano una profondità di colore anche maggiore, 32 bit, e sono in grado di visualizzare milioni di
colori diversi.
5
L’uso del foglio di stile è una tecnica raccomandata dal W3C che consente di raccogliere tutte le specifiche relative
all’aspetto della pagina web. Tali specifiche sono prodotte in un linguaggio denominato CSS.
6
Permettono di aggiungere contenuto attivo nelle pagine web.
4
Principi di grafica e layout
pag. 3 di 6
Classe F2
Clara Veronese
Home page
La home page del sito è scarna: contiene il logo aziendale, poche altre informazioni essenziali e un
pulsante di accesso ai contenuti veri e propri del sito. Questo tipo di home page ha la funzione di
introdurre il visitatore favorendone anche l’ambientamento cromatico.
Immagini: l’unico elemento “pesante” è il logo (50KB, formato PNG7) mentre è trascurabile il peso
del pulsante di entrata (2KB, formato GIF); gli altri elementi grafici (linee orizzontali) sono ottenuti
mediante impiego di HTML e CSS.
Elementi sensibili:
al click sul pulsante di entrata si ottiene l’accesso ai contenuti;
al passaggio del mouse sull’indirizzo di posta la scritta si evidenzia così
al click sull’indirizzo di posta si avvia il client di posta per l’inoltro di una e-mail.
Pagine dei contenuti
Per quanto riguarda le pagine dei contenuti, opto per un layout classico, con una barra di
navigazione primaria orizzontale in alto ed una secondaria verticale a sinistra. Unica digressione è il
posizionamento del pulsante di ritorno alla home page all’estrema destra della barra di navigazione
primaria anziché a sinistra. Mi è sembrata più efficace questa collocazione perché, nella grafica
complessiva, lo fa risultare discosto dagli altri pulsanti i quali consentono la navigazione “in avanti”
7
Il Portable Network Graphics (abbreviato PNG) è un formato di file per memorizzare immagini. E’ stato creato nel
1995 da un gruppo di autori indipendenti e approvato il 1° ottobre 1996 dal W3C (fonte: www.wikipedia.it)
Principi di grafica e layout
pag. 4 di 6
Classe F2
Clara Veronese
(cioè verso pagine di livello gerarchico pari o inferiore) mentre esso attiva una navigazione
“all’indietro” (cioè verso pagine di livello gerarchico superiore).
L’usabilità8 di un sito dipende molto dagli strumenti di navigazione che devono offrire sempre
risposta certa ed immediata alle seguenti domande:
Dove sono?
Dove posso andare e come ci arrivo?
Come posso tornare dov’ero prima?
Nel definire il template (modello) della pagina ho prestato particolare attenzione a questo
fondamentale aspetto adottando le seguenti strategie:
Dove sono? La linea arancione posta sotto la barra principale evidenzia la sezione,
l’espansione del menu laterale evidenzia l’argomento, il titolo della pagina evidenzia la
pagina attiva.
Dove posso andare e come ci arrivo? La posizione “classica” delle barre di navigazione,
l’uso di richiami testuali espliciti e gli effetti grafici di evidenziazione non dovrebbero
lasciar luogo a dubbi.
8
Il concetto di usabilità è definito, secondo una norma ISO (International Standard Organization), come l'efficacia,
l'efficienza e la soddisfazione con le quali determinati utenti raggiungono determinati obiettivi in determinati contesti.
Principi di grafica e layout
pag. 5 di 6
Classe F2
Clara Veronese
Come posso tornare dov’ero prima? Le barre di navigazione articolate sui 3 livelli
gerarchici del sito (sezione, argomento, pagina) e uniformemente presenti in tutte le pagine
offrono una mappatura costante del sito riducendo al minimo il rischio di smarrimento.
Immagini: anche qui, come nella home page, l’elemento più “pesante” è il banner di intestazione
che richiama il logo aziendale e contiene la barra di navigazione primaria; il banner è costruito
come un “puzzle” di immagini (complessivamente 32KB, tutte in formato PNG) allo scopo di
rendere diversamente sensibili i vari frammenti; le altre immagini sono il punto elenco e un
elemento riempitivo dello sfondo del piè di pagina (complessivamente 2KB, formato PNG); gli altri
elementi grafici sono ottenuti mediante impiego di HTML e CSS.
Elementi dinamici: il messaggio di benvenuto (in alto a destra) contiene un datario attivo e il menu
laterale (a sinistra) espande le voci dell’argomento selezionato; questi elementi sono stati realizzati
mediante javascript9.
Elementi sensibili:
barra di navigazione principale (orizzontale in alto):
o
al passaggio del mouse sui pulsanti della barra di navigazione principale la scritta si
colora di arancione (effetto roll-over ottenuto mediante javascript);
o
al click del mouse sui pulsanti della barra di navigazione principale si ottiene
l’accesso alle diverse sezioni del sito;
barra di navigazione secondaria (menu laterale):
o
al click del mouse sulle voci di 1° livello del menu laterale (argomenti) si espandono
le voci di 2° livello dell’argomento selezionato;
o
al passaggio del mouse sulle voci di 2° livello del menu laterale (link) si ottiene un
effetto di evidenziazione;
o
al click del mouse sulle voci di 2° livello del menu laterale (link) si ottiene l’accesso
alla corrispondente pagina dei contenuti.
altri link testuali:
o al passaggio del mouse le scritte
si evidenziano così
o al click sul testo si attiva il relativo collegamento ipertestuale.
Note conclusive
1. Per il menu laterale ho utilizzato un esempio proposto su javascript.html.it (sezione javascript di
http://www.html.it, sito in lingua italiana ricco di documentazione per gli sviluppatori web) .
2. Elaborando il menu laterale ho ritenuto opportuno introdurre un ulteriore colore nella palette:
ARANCIONE (variante attenuata): - RGB(255,204,102) - HEX #FFCC66
9
Javascript è un linguaggio di scripting che permette di aggiungere contenuto attivo alle pagine web.
Principi di grafica e layout
pag. 6 di 6
