Sei sulla pagina 1di 65

CORSO

Web Design
Triennio
Layout
Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

La costruzioni di un layout la
combinazione di una serie di elementi

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

- architettura delle infomazioni


- user experience design
- tipografia
- colori
- griglie

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

un web designer deve tener presente


altre variabili:
- browser
- dimensione dello schermo
- risoluzione

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Che dimensione
deve avere il nostro
layout?
Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Che dimensione
non deve avere

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

non troppo grande, in modo da


costringere lutente a scorrere con la
barre a dx e sx

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

non troppo piccolo, senza sfruttare a


pieno lo spazio a disposizione

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

non deve essere


in mm o cm

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Attualmente il riferimento, nella


scelta della dimensione di un layout,
la risoluzione per monitor pi
diffusa: 1024x768

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Il mio layout dovr essere largo al


massimo 960 px

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

il mio layout nel web, come le


immagini e gli altri elementi che
compongono una pagina web sono
misurati in pixel

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Perch proprio 960?

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Soprattutto perch con una


dimensione di 960px pi facile
realizzare e suddividere una griglia.
960 divisibile per: 2, 3, 4, 5, 6, 8,
10, 12, 15 e 16

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Deve per forza realizzare tutti i miei


progetti a 960px?

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

No.
Importante non superare quella
dimensione.

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

TIPI DI LAYOUT

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

LAYOUT FLUIDO
Il contenuto si adatta alla pagina:
es. www.ibs.it

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

LAYOUT FISSO
Il contenuto si visualizza in uno
spazio predefinito:
es. www.repubblica.it

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

LAYOUT RESPONSIVE
Il contenuto si adatta a pi
risoluzione ed responsive (reattivo),
reimpostando la disposizione dei
contenuti
es: www.seesparkbox.com

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

LAYOUT RESPONSIVE

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Le griglie
nel web design

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

La teoria e i principi sullutilizzo delle


griglie nel graphic design risalgono
allInternational Typographic Style di
Brockmann, Bill e Baker.

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Nel web design la teoria e i principi


sullutilizzo delle griglie molto pi
recente.

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Khoi Vinh e Mark Boulton sono i


web designer che hanno definito
meglio luso e lapplicazione delle
griglie nel web.
www.subtraction.com
www.markboulton.co.uk

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Perch le griglie?

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

le griglie aggiungono ordine,


continuit e armonia alla
presentazione delle informazioni

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

le griglie consentono ad un lettore di


prevedere dove trovare informazioni,
e sono di aiuto nella comunicazione
di tali informazioni

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

con le griglie pi facile aggiungere


nuovi contenuti in modo coerente
con la visione complessiva della
presentazione originale

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Le stesse definizioni
valgono anche
per il web
Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

con le griglie aggiungo ordine,


continuit e armonia alla
presentazione delle informazioni
sulle pagine web

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

le griglie aiutano gli utenti


a prevedere dove trovare le
informazioni da pagina a pagina o da
interazione a interazione, e aiuta
nella comunicazione di tali
informazioni.

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

le griglie rendono pi facile


laggiunta di nuovi contenuti a un
sito Web in modo coerente con
la visione d'insieme del sito web
originale

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

La struttura di una
griglia

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Unit

Colonne

Regioni

Campi

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Unit
Lelemento pi piccolo di una griglia,
sul quale sono costruite le colonne.
Le unit sono generalmente troppo
strette per ospitare i contenuti pi
testuale.

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Colonne
Le colonne sono gruppi di unit,
combinate insieme per creare aree
per la presentazione dei contenuti.

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Colonne
La maggior parte delle colonne di
testo, ad esempio,richiedono due o
pi unit.

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Colonne
Un sistema a griglia a sedici unit
pu essere combinato in due
colonne di otto unit ciascuna,
o quattro colonne di quattro unit
ciascuno, e cos via

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Regioni
Le regioni sono raggruppamenti di
colonne simili che formano parti
della pagina

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Campi
I campi sono divisioni orizzontali
della pagina (i campi sono misurati
in altezza) che aiutano i designer
al posizionamento verticale degli
elementi

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Campi
I campi possono essere calcolati in
molti modi, ma con la sezione aurea
uno dei metodi pi efficaci

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Gutters
sono gli spazi vuoti tra le unit e le
colonne.

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Margin e Padding
Il margine lo spazio tra unit
e colonne, ed generalmente
utilizzato per creare gutters.

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Margin e Padding
il padding in genere utilizzato per
creare uno spazio tra il contenuto e il
suo bordo allinterno di una colonna

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

E lAltezza?

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Una pagina web non ha


unaltezza fissa

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

COME SI MUOVE UN
UTENTE

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Un utente pu arrivare su un sito in


diversi modi.
Pu digitare direttamente lindirizzo
nel browser, pu arrivarci tramite
un RSS, un link su un social network
e quasi sempre ci arriva dopo una
ricerca su un motore di ricerca.

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Quando si approda ad un sito web


si decide in pochi secondi se restare
e approfondire oppure chiudere la
finestra.

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Le tre domande

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

In quei pochi secondi lutente,


incosciamenete si fa tre domande:
1) Dove mi trovo?
2) Sono sulla pagina corretta?
3) Come faccio a muovermi?

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

1) Dove mi trovo?
In primo luogo ci si chiede dove mai
siamo capitati.
La risposta nelheader: li che
si trova lidentit del sito.
La presenza di un logo e di un claim
o una tagline favoriscono la
risposta.
Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

2) Sono sulla pagina corretta?


Se la risposta alla prima domanda
soddisfacente ci si chiede se
la pagina su cui siamo arrivati
corrisponde a ci che si cercato
o allaspettativa del link visto su un
social network

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

3) Come faccio a muovermi?


Infine, se le prime due domande
hanno trovato una risposta,
credibilmente vorremo esplorare il
resto del sito.
Quindi il nostro occhio corre alla
ricerca del menu di navigazione.

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Necessariamente le tre risposte


dovranno essere Above the fold.
Letterarmente sopra la piega.

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Gli elementi pi importanti di una


pagina web devo essere inseriti in
unaltezza massima di 500-600px.
Dopodich la mia pagina web pu
essere alta anche 3000 px

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Nel web lAbove the fold indicato in


unaltezza tra i 500 e i 600px

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Ispirazione
www.grid-based.com
www.designbygrid.com

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Risorse
www.fuelyourcreativity.com/
grid-based-design-toolbox/

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout

Dire che una griglia limitante


come dire che il linguaggio
limitante
- Ellen Lupton

Accademia di Belle Arti di Catania

Web Design - Triennio 2011-12

Docente / Ciro Esposito

Layout