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

Sarebbe stato meglio… AA 2005/06 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 Prof. Paola Trapani – La griglia di layout

I codici più diffusi su carta 8 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 5 8 I margini in rapporto 2, 3, 4, 6: Se margine di cucitura = 2  margine di taglio = 4 Se margine di testa = 3  margine di piede = 6 AA 2005/06 Prof. Paola Trapani – La griglia di layout

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] I margini in rapporto 2, 3, 4, 6: Se margine di cucitura = 2  margine di taglio = 4 Se margine di testa = 3  margine di piede = 6 AA 2005/06 Prof. Paola Trapani – La griglia di layout

I codici più diffusi su carta 2° metodo: i rapporti costanti Es. 1/3 e 2/3 1/3 2/3 1/9 1/9 1/9 1 2/3 Metodo utilizzabile su carta e su schermo AA 2005/06 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 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 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] Moduli Battute righe 1 173 6 2 394 14 3 602 21 4 826 29 5 1057 37 1279 45 7 1487 52 8 1720 60 AA 2005/06 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 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 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 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. spesso variano anche per layout, carattere tipografico, scala, punto di vista, densità delle immagini. Leggi della somiglianza e vicinanza AA 2005/06 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 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 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 Prof. Paola Trapani – La griglia di layout

E lo schermo? Errori comuni AA 2005/06 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 Prof. Paola Trapani – La griglia di layout

La griglia canonica su schermo Ingombro esterno W max in orizzontale = 770 px H variabile secondo il rapporto scelto 566 425 4:3 16:9 770 770 Testate le vostre pagine su http://www.wpdfd.com/restest.htm AA 2005/06 Prof. Paola Trapani – La griglia di layout

La griglia canonica su schermo Suddivisioni interne Utlizzare il metodo dei rapporti costanti per definire il modulo-base orizzontale e verticale l’unità orizzontale ideale divide in 5-7 parti la larghezza della schermata. Può essere moltiplicata o suddivisa Il modulo orizzontale largo abbastanza per contenere la maggior parte delle labels di 1 parola. Almeno 3 volte l’unità verticale. 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 layout

La griglia canonica su schermo Suddivisioni interne Schizzare (anche a mano) un layout che si avvicina alle dimensioni, posizioni e orientamento degli elementi principali Partire dalle pagine più affollate di informazioni: progettare quelle più scarne sarà più semplice 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 layout

Metodologia Evitare l’impiego locale di moduli più piccoli del normale per accogliere una densità particolare di dati Individuare elementi funzionali comuni che devono essere percepiti con chiarezza nelle diverse schermate 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 layout

La griglia canonica AA 2005/06 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 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 Prof. Paola Trapani – La griglia di layout