AA 2005/06 Prof. Paola Trapani – La griglia di layout1
Una griglia errata…
AA 2005/06 Prof. Paola Trapani – La griglia di layout2
Sarebbe stato meglio…
AA 2005/06 Prof. Paola Trapani – La griglia di layout3
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 Prof. Paola Trapani – La griglia di layout4
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).
5 8
5
8
AA 2005/06 Prof. Paola Trapani – La griglia di layout5
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 Prof. Paola Trapani – La griglia di layout6
I codici più diffusi su carta
• 2° metodo: i rapporti costanti• Es. 1/3 e 2/3
1/3 2/3
1/9 1
2/3
Metodo utilizzabile su carta e su schermo
1/91/9
AA 2005/06 Prof. Paola Trapani – La griglia di layout7
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 Prof. Paola Trapani – La griglia di layout8
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 Prof. Paola Trapani – La griglia di layout9
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]
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
AA 2005/06 Prof. Paola Trapani – La griglia di layout10
Metodologia di progetto
• Le gabbie: misure dell’ascissa e dell’ordinata
12, 1224 x 24
40, 1224 x 24
68, 1224 x 24
96, 1224 x 24
124, 1224 x 24
12, 4024 x 24
40, 4024 x 24
68, 4024 x 24
96, 4024 x 24
124, 4024 x 24
12, 6824 x 24
40, 6824 x 24
68, 6824 x 24
96, 6824 x 24
124, 6824 x 24
12, 9224 x 24
40, 9224 x 24
68, 9224 x 24
96, 9224 x 24
124, 9224 x 24
…
AA 2005/06 Prof. Paola Trapani – La griglia di layout11
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 Prof. Paola Trapani – La griglia di layout12
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 Prof. Paola Trapani – La griglia di layout13
• 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.
• spesso variano anche per layout, carattere tipografico, scala, punto di vista, densità delle immagini.
E lo schermo? Errori comuni
Leggi della somiglianza e vicinanza
AA 2005/06 Prof. Paola Trapani – La griglia di layout14
• Inconsistente presentazione dei controlliQuesto problema è molto attenuato nello sviluppodi GUI per applicativi, ma molto urgente per ilmultimedia on e off line. Qui non esistonostandard di ampia condivisione: il regno dellacreatività.
E lo schermo? Errori comuni
AA 2005/06 Prof. Paola Trapani – La griglia di layout15
• Inconsistente linguaggio visivoQuando il linguaggio visivo non è applicato in modoconsistente in tutto l’ambiente applicativo perde in forza comunicativa.Distacchi radicali dagli standard spesso producono effetti dannosi ben al di là del caso specifico.
E lo schermo? Errori comuni
AA 2005/06 Prof. Paola Trapani – La griglia di layout16
• 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.
E lo schermo? Errori comuni
AA 2005/06 Prof. Paola Trapani – La griglia di layout17
E lo schermo? Errori comuni
AA 2005/06 Prof. Paola Trapani – La griglia di layout18
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 Prof. Paola Trapani – La griglia di layout19
La griglia canonica su schermoIngombro esterno
• W max in orizzontale = 770 px • H variabile secondo il rapporto scelto
4:3
770
566
16:9
7704
25
• Testate le vostre pagine su http://www.wpdfd.com/restest.htm
AA 2005/06 Prof. Paola Trapani – La griglia di layout20
La griglia canonica su schermoSuddivisioni interne
1. Utlizzare il metodo dei rapporti costanti per definire il modulo-base orizzontale e verticalea. 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 Prof. Paola Trapani – La griglia di layout21
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 Prof. Paola Trapani – La griglia di layout22
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 Prof. Paola Trapani – La griglia di layout23
La griglia canonica
AA 2005/06 Prof. Paola Trapani – La griglia di layout24
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 Prof. Paola Trapani – La griglia di layout25
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