Maccapan Linda, Classe I6
T04 Principi di grafica e layout
Tutor Alessandro Perri
1.
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:
 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 essere presenti in ogni pagina.
 Uso del colore: individuare una palette di colori da utilizzare per tutto il sito. Motivare la
propria scelta.
 Testo: individuare quale tipo di font, dimensione, colore usare per ogni tipo di testo o di
link.
 Immagini: scelta delle immagini, dimensioni e loro posizionamento nella pagina.
Se lo si desidera, provare a disegnare la homepage del sito, utilizzando un software di grafica (es. Gimp,
Photoshop, Fireworks, Illustrator, ecc.) oppure un Web editor (es. NVU, FrontPage, Dreamweaver, ecc.)
oppure semplicemente utilizzando un programma per la creazione di presentazioni (es. PowerPoint,
OpenOffice Impress, Keynote, ecc.).
Premessa:
In queste settimane di studio ho cercato di finalizzare un progetto cui sto collaborando da due anni. Si
tratta di un partenariato europeo Comenius che vede la coinvolti, oltre al mio ex istituto, altre due scuole
una di Dublino, l’altra di Karlstad in Svezia. In questo periodo si sta pianificando l’ultimo incontro fra i
colleghi italiani, irlandesi e svedesi per fare il punto sulle attività svolte in questi due anni; le idee non sono
ancora ben chiare ma, il dirigente vorrebbe provvedere alla raccolta digitale dei materiali prodotti dalle
varie scuole. Così, visto l’argomento del modulo di studio, mi sono impegnata per proporre poi ai colleghi
un “sito” che, oltre ad illustrare il progetto divenisse una finestra nella quale presentare le attività, i
materiali, i testi e quanto fin ora è stato fatto. Mi rendo conto che la proposta risulta tardiva rispetto al
progetto, ma ciò servirebbe in ogni caso per documentare ciò che i nostri bambini e i bambini irlandesi e
svedesi hanno fatto in questi due anni.
-
Provare a disegnare la home page:
“… La regola attuale impone che si progetti per una risoluzione di 1024×768, con una larghezza massima di 960px.
Perché 960px? È stato costatato che questi siano i pixel necessari affinché ci sia del margine dall’estremità del
browser, quale esso sia, lasciando respiro.” ( Principi di grafica e layout: Silvia Fiamberti,, Nicola Piccinotti)
Nell’impostare la pagina, quindi, dovrò tener conto di queste indicazioni (larghezza massima, per
permettere la visione sulla maggior parte dei monitor) propendendo per un layout fisso, anche per le
pagine interne, nell’ipotesi progettuale mi piacerebbe inserire non molto testo, dando maggior spazio ad
immagini esplicative; la grafica, così come viene progettata, rimarrà sempre la stessa ad ogni risoluzione e
anche il testo risulterà più leggibile.
Dopo vari tentativi sia con Photoshop che con Gimp ho impostato la pagina in Power Point utilizzando gli
strumenti di disegno, questo è il risultato:
Maccapan Linda, Classe I6
T04 Principi di grafica e layout
Tutor Alessandro Perri
Il Logo si trova posizionato in alto a sinistra e sempre in alto vi è il titolo. Nella parte centrale il blocco
contenitore con una parte di testo nella quale viene presentato il progetto e nella parte inferiore tre
immagini che stanno ad indicare i Paesi partner e rimandano a pagine specifiche.
Sulla sinistra il menu di navigazione, menu che verrà posizionato anche in alto a destra, sopra il titolo.
A destra un box che conterrà le news (trattandosi di sito “postumo” potrebbe non avere senso, ma il
progetto dovrebbe avere un’appendice anche per il prossimo anno, ad oggi non ci sono certezze).
Il piè di pagina contiene il footer che riprende il menu e il Copyright.
La struttura della pagina rimarrà la stessa anche nelle pagine interne mantenendo la posizione di Logo,
Titolo, menù di navigazione superiore e verticale.
Maccapan Linda, Classe I6
T04 Principi di grafica e layout
Tutor Alessandro Perri
Questo dovrebbe essere il risultato finale.
-
Uso del colore:
…”I colori hanno determinati significati che è importante tenere in considerazione nella realizzazione di grafica
per il web. … Nella realizzazione di grafica per il web è importante tenere in considerazione i diversi significati e le
emozioni cui possono essere associati”… ( Principi di grafica e layout: Silvia Fiamberti,, Nicola Piccinotti)
Ho scelto uno schema colore monocromatico all’interno della gamma RGB giocando sulle tonalità del
blu in modo da richiamare anche visualmente i colori della bandiera dell’Unione Europea e quindi il
contenuto del sito.
Sfondo: colore RGB blu scuro 14 - 27 - 141
Pulsanti: colore RGB blu: 79 - 129 - 189
Box contenuto:
per il contenitore testo: azzurro 219 - 238 – 244; mentre per i pulsanti che rimandano alle singole pagine
dei paesi partner blu: 79 - 129 – 89.
Maccapan Linda, Classe I6
T04 Principi di grafica e layout
Tutor Alessandro Perri
-
Testo:
o
Verdana 14 per i pulsanti di navigazione, (i pulsanti verranno poi trasformati in immagini) colore del
testo: bianco; per il menu in alto mi piaceva l’idea di riprendere nella prima lettera della parola uno dei
colori che richiamano le bandiere delle tre nazioni; allineamento al centro
o Verdana 11 per il testo all’interno del box centrale, il colore sarà l’azzurro; allineamento centrato,
interlinea 1,0
o Verdana 10 per il testo nel box a destra (news), allineamento a sinistra
o Verdana 9 per i testi all’interno del footer a piè di pagina; allineamento al centro
Il colore dei link e l’azzurro chiaro
- Immagini:
Nella parte superiore per la testata, ho utilizzato un’immagine preparata in precedenza le cui dimensioni sono:
700x286 pixel in formato jpeg, l’immagine, è stata creata con Photoshop, il logo a sinistra comprende le silouette delle
varie Nazioni riempite con i colori delle rispettive bandiere e le stelle presenti nella bandiera dell’Unione Europea;
l’acronimo READE, scritto in Comic sans, richiama proprio i colori delle varie bandiere e sempre gli stessi sono usati
all’inizio di ciascuna parola che va a comporre il titolo del progetto (Reading Europeans Assisting Development in
Education.
All’interno del contenitore centrale si trovano anche le foto delle Città partner. Il formato è jpeg e le dimensioni sono
160x108 pixel.
Altre immagini (sempre facendo attenzione al formato e alle dimensioni per non appesantire la pagina) verranno
inserite nelle pagine interne dedicate ai vari paesi, a documentare il percorso didattico svolto.
La grafica in un sito web viene definita come “ … l'insieme dei colori, dei segni, dei simboli che caratterizzano un sito e
che danno la certezza all'utente di essere sempre al suo interno”. (Sofia Postai - Web design in pratica. Navigazione, interazione, usabilità – Hops tecniche nuove 2006)