Una griglia errata…
AA 2005/06
1
Prof. Paola Trapani – La griglia di layout
Sarebbe stato meglio…
AA 2005/06
2
Prof. Paola Trapani – La griglia di layout
L’architettura della pagina
• Impaginare comporta un disegno della
pagina/schermata (campo)
• Margini
• Moduli ripetitivi H e V, che armonizzino le diverse
pagine tra loro
• Le misure derivano dai formati standard per
• Carta
• Schermo
AA 2005/06
3
Prof. Paola Trapani – La griglia di layout
I codici più diffusi su carta
• Proporzione aurea
• Dividere diagonale in 9 parti
uguali
• Nel punto 3: tracciare le linee
in rosso (sezioni auree)
• Il box del contenuto 1-7
• I margini in rapporto 2:4 e 3:6
• Il rapporto della sezione aurea
= 5:8,09
• La sezione aurea è il segmento
medio proporzionale tra la
lunghezza di tutto il segmento e
la parte rimanente (1:a=a:b).
AA 2005/06
4
8
5
5
Prof. Paola Trapani – La griglia di layout
8
I codici più diffusi su carta
• 1° metodo: le diagonali
• Il sistema delle diagonali non propone una misura
iniziale fissa né per i margini, né per la gabbia
• La misura iniziale è presa sulla diagonale ed è
variabile secondo le necessità
• Il sistema non è legato a formati particolari
• Mantiene inalterate le proporzioni per qualsiasi
format [1, pg. 173-6]
AA 2005/06
5
Prof. Paola Trapani – La griglia di layout
I codici più diffusi su carta
• 2° metodo: i
rapporti costanti
1/3
2/3
• Es. 1/3 e 2/3
1/9
1/9 1/9
1
2/3
Metodo utilizzabile su
carta e su schermo
AA 2005/06
6
Prof. Paola Trapani – La griglia di layout
I codici più diffusi su carta
• I rapporti costanti
• Es. 2/5 e 3/5
La griglia all’interno della gabbia è molto flessibile
[1, pg 181]
AA 2005/06
7
Prof. Paola Trapani – La griglia di layout
Metodologia di progetto
• Calcolare gli ingombri
• Prevedere gli spazi destinati ai testi
• Ipotizzare spazio di titoli, sottotitoli,
occhielli con misurazione in
• Punti
• Carattere
• Corpi
• Giustezze
AA 2005/06
8
Prof. Paola Trapani – La griglia di layout
Metodologia di progetto
• Es. progettare una rivista
•
•
•
•
•
Formato A4
4 colonne
8 moduli per colonna
Testi in Times, corpo 10
N° di battute e righe
corrispondenti
• [1, pg 198-9]
AA 2005/06
9
Moduli
Battute
righe
1
173
6
2
394
14
3
602
21
4
826
29
5
1057
37
6
1279
45
7
1487
52
8
1720
60
Prof. Paola Trapani – La griglia di layout
Metodologia di progetto
• Le gabbie: misure
dell’ascissa e
dell’ordinata
12, 12
24 x 24
40, 12
24 x 24
68, 12
24 x 24
96, 12
24 x 24
124, 12
24 x 24
12, 40
24 x 24
40, 40
24 x 24
68, 40
24 x 24
96, 40
24 x 24
124, 40
24 x 24
12, 68
24 x 24
40, 68
24 x 24
68, 68
24 x 24
96, 68
24 x 24
124, 68
24 x 24
12, 92
24 x 24
40, 92
24 x 24
68, 92
24 x 24
96, 92
24 x 24
124, 92
24 x 24
…
AA 2005/06
10
Prof. Paola Trapani – La griglia di layout
Metodologia di progetto
• Una metodologia che si ritrova ad ogni
pagina
• All’interno della gabbia, la griglia può
avere moltissime possibilità,
dall’impaginazione rigida a quella molto
movimentata [1, pg 205]
• Il design finale è vario ma sempre
coerente
AA 2005/06
11
Prof. Paola Trapani – La griglia di layout
E lo schermo?
Errori comuni
• Posizionamento e
dimensionamento arbitrario dei
componenti
• posizionamento casuale e grandezza
variabile dei bottoni, proporzionali
alla lunghezza delle etichette
• bottoni grossi corrispondono a
comandi più importanti di quelli
piccoli?
• mancano gli allineamenti
AA 2005/06
12
Prof. Paola Trapani – La griglia di layout
E lo schermo?
Errori comuni
• Dimensione e aspetto delle
icone non coordinato
• le icone e i bottoni sono
presentati in array, quindi
devono essere dimensionate in
modo consistente per evitare i
problemi di allineamento.
Leggi della
somiglianza e
vicinanza
• spesso variano anche per
layout, carattere tipografico,
scala, punto di vista, densità
delle immagini.
AA 2005/06
13
Prof. Paola Trapani – La griglia di layout
E lo schermo?
Errori comuni
• Inconsistente presentazione dei controlli
Questo problema è molto attenuato nello sviluppo
di GUI per applicativi, ma molto urgente per il
multimedia on e off line. Qui non esistono
standard di ampia condivisione: il regno della
creatività.
AA 2005/06
14
Prof. Paola Trapani – La griglia di layout
E lo schermo?
Errori comuni
• Inconsistente linguaggio visivo
Quando il linguaggio visivo non è applicato in modo
consistente in tutto l’ambiente applicativo perde
in forza comunicativa.
Distacchi radicali dagli standard spesso producono
effetti dannosi ben al di là del caso specifico.
AA 2005/06
15
Prof. Paola Trapani – La griglia di layout
E lo schermo?
Errori comuni
• Grandezza e layout delle finestre variabili
casuale
• il design programmato di finestre secondarie e di
dialog box è raramente considerato.
• poiché compaiono sullo schermo isolatamente non sono
considerati come parte di una serie.
• l’utente ne incontra decine se non centinaia al giorno,
con grave danno funzionale ed estetico.
AA 2005/06
16
Prof. Paola Trapani – La griglia di layout
E lo schermo?
Errori comuni
AA 2005/06
17
Prof. Paola Trapani – La griglia di layout
La griglia canonica su schermo
•
•
•
•
Creare dei layout sulla base di griglie
I rapporti W/H più usati sono 4:3 e 16:9
Risoluzione 800 X 600 ancora lo standard
Proibito lo scrolling orizzontale, ammesso
quello verticale
AA 2005/06
18
Prof. Paola Trapani – La griglia di layout
La griglia canonica su schermo
Ingombro esterno
425
566
• W max in orizzontale = 770 px
• H variabile secondo il rapporto scelto
4:3
770
16:9
770
• Testate le vostre pagine su
http://www.wpdfd.com/restest.htm
AA 2005/06
19
Prof. Paola Trapani – La griglia di layout
La griglia canonica su schermo
Suddivisioni interne
1. Utlizzare il metodo dei rapporti costanti per
definire il modulo-base orizzontale e verticale
a. l’unità orizzontale ideale divide in 5-7 parti la
larghezza della schermata. Può essere moltiplicata o
suddivisa
b. Il modulo orizzontale largo abbastanza per
contenere la maggior parte delle labels di 1 parola.
Almeno 3 volte l’unità verticale.
c. L’unità verticale deve consentire una spaziatura
appropriata tra controlli multi-linea e gruppi di
controlli. Se le labels sono sopra invece che di
fianco, l’unità verticale deve permetterlo
AA 2005/06
20
Prof. Paola Trapani – La griglia di layout
La griglia canonica su schermo
Suddivisioni interne
2. Schizzare (anche a mano) un layout che si avvicina
alle dimensioni, posizioni e orientamento degli
elementi principali
3. Partire dalle pagine più affollate di informazioni:
progettare quelle più scarne sarà più semplice
4. Identificare la grandezza minima (H e V)
ammissibile è meglio che ri-calcolare il layout per
grandezze (piccole) arbitrarie
AA 2005/06
21
Prof. Paola Trapani – La griglia di layout
Metodologia
5. Evitare l’impiego locale di moduli più piccoli del normale
per accogliere una densità particolare di dati
6. Individuare elementi funzionali comuni che devono
essere percepiti con chiarezza nelle diverse
schermate
7. Le singole schermate devono assicurare la posizione
consistente dei principali elementi strutturali
(header, footer, nav_bar…)
AA 2005/06
22
Prof. Paola Trapani – La griglia di layout
La griglia canonica
AA 2005/06
23
Prof. Paola Trapani – La griglia di layout
Bibliografia
• Michele Spera, La progettazione
grafica tra creatività e scienza,
Gangemi Editore, Roma, 2001
• William Lidwell, Kritina Holden, Jill
Butler, Principi universali del design,
Logos, Modena, 2005
AA 2005/06
24
Prof. Paola Trapani – La griglia di layout
Casi studio esercitazione
• Individuare un sito in cui sia presente il
fattore 1+1=3 o più
• Proporre il miglioramento della griglia di
layout attraverso le tecniche apprese
• Impostare la griglia di layout di un
ipotetico sito per la vendita on-line di
abbigliamento sportivo
AA 2005/06
25
Prof. Paola Trapani – La griglia di layout