AA 2005/06Prof. Paola Trapani – La griglia di layout 1 Una griglia errata…

AA 2005/06 Prof. Paola Trapani – La griglia di layout1

Una griglia errata…


Sarebbe stato meglio…


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


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



• 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]



• 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



• I rapporti costanti• Es. 2/5 e 3/5

La griglia all’interno della gabbia è molto flessibile

[1, pg 181]


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



• 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



• 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

…



• 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


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


• 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.


Leggi della somiglianza e vicinanza


• 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à.



• 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.



• 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.





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


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


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


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


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…)


La griglia canonica


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


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

Date post:	01-May-2015
Category:	Documents
Upload:	martino-benedetti
View:	215 times
Download:	0 times

AA 2005/06Prof. Paola Trapani – La griglia di layout 1 Una griglia errata…

Documents