Una griglia errata…

1. Una griglia errata… Prof. Paola Trapani – La griglia di layout

2. Sarebbe stato meglio… Prof. Paola Trapani – La griglia di layout

3. 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 Prof. Paola Trapani – La griglia di layout

4. 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 Prof. Paola Trapani – La griglia di layout

5. 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] Prof. Paola Trapani – La griglia di layout

6. I codici più diffusi su carta • 2° metodo: i rapporti costanti • Es. 1/3 e 2/3 1/3 2/3 1/9 1 1/9 1/9 2/3 Metodo utilizzabile su carta e su schermo Prof. Paola Trapani – La griglia di layout

7. 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] Prof. Paola Trapani – La griglia di layout

8. 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 Prof. Paola Trapani – La griglia di layout

9. 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] Prof. Paola Trapani – La griglia di layout

10. 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 … Prof. Paola Trapani – La griglia di layout

11. 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 Prof. Paola Trapani – La griglia di layout

12. 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 Prof. Paola Trapani – La griglia di layout

13. Leggi della somiglianza e vicinanza 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. Prof. Paola Trapani – La griglia di layout

14. 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à. Prof. Paola Trapani – La griglia di layout

15. 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. Prof. Paola Trapani – La griglia di layout

16. 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. Prof. Paola Trapani – La griglia di layout

17. E lo schermo? Errori comuni Prof. Paola Trapani – La griglia di layout

18. 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 Prof. Paola Trapani – La griglia di layout

19. La griglia canonica su schermoIngombro 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 Prof. Paola Trapani – La griglia di layout

20. La griglia canonica su schermoSuddivisioni 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 Prof. Paola Trapani – La griglia di layout

21. La griglia canonica su schermoSuddivisioni 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 Prof. Paola Trapani – La griglia di layout

22. 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…) Prof. Paola Trapani – La griglia di layout

23. La griglia canonica Prof. Paola Trapani – La griglia di layout

24. 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 Prof. Paola Trapani – La griglia di layout

25. 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 Prof. Paola Trapani – La griglia di layout