La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


Presentazione sul tema: "AA 2005/06Prof. Paola Trapani – La griglia di layout 1 Una griglia errata…"— Transcript della presentazione:

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

2 AA 2005/06Prof. Paola Trapani – La griglia di layout 2 Sarebbe stato meglio…

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

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

6 AA 2005/06Prof. 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/32/3 1/9 1 2/3 Metodo utilizzabile su carta e su schermo 1/9

7 AA 2005/06Prof. Paola Trapani – La griglia di layout 7 I codici più diffusi su carta I rapporti costanti Es. 2/5 e 3/5 La griglia allinterno della gabbia è molto flessibile [1, pg 181]

8 AA 2005/06Prof. 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

9 AA 2005/06Prof. 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] ModuliBattuterighe

10 AA 2005/06Prof. Paola Trapani – La griglia di layout 10 Metodologia di progetto Le gabbie: misure dellascissa e dellordinata 12, x 24 40, x 24 68, x 24 96, x , x 24 12, x 24 40, x 24 68, x 24 96, x , x 24 12, x 24 40, x 24 68, x 24 96, x , x 24 12, x 24 40, x 24 68, x 24 96, x , x 24 …

11 AA 2005/06Prof. Paola Trapani – La griglia di layout 11 Metodologia di progetto Una metodologia che si ritrova ad ogni pagina Allinterno della gabbia, la griglia può avere moltissime possibilità, dallimpaginazione rigida a quella molto movimentata [1, pg 205] Il design finale è vario ma sempre coerente

12 AA 2005/06Prof. 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

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

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

15 AA 2005/06Prof. Paola Trapani – La griglia di layout 15 Inconsistente linguaggio visivo Quando il linguaggio visivo non è applicato in modo consistente in tutto lambiente 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

16 AA 2005/06Prof. Paola Trapani – La griglia di layout 16 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. lutente ne incontra decine se non centinaia al giorno, con grave danno funzionale ed estetico. E lo schermo? Errori comuni

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

18 AA 2005/06Prof. 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

19 AA 2005/06Prof. Paola Trapani – La griglia di layout 19 La griglia canonica su schermo Ingombro esterno W max in orizzontale = 770 px H variabile secondo il rapporto scelto 4: : Testate le vostre pagine su

20 AA 2005/06Prof. Paola Trapani – La griglia di layout 20 La griglia canonica su schermo Suddivisioni interne 1.Utlizzare il metodo dei rapporti costanti per definire il modulo-base orizzontale e verticale a.lunità 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 lunità verticale. c.Lunità verticale deve consentire una spaziatura appropriata tra controlli multi-linea e gruppi di controlli. Se le labels sono sopra invece che di fianco, lunità verticale deve permetterlo

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

22 AA 2005/06Prof. Paola Trapani – La griglia di layout 22 Metodologia 5.Evitare limpiego 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…)

23 AA 2005/06Prof. Paola Trapani – La griglia di layout 23 La griglia canonica

24 AA 2005/06Prof. 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

25 AA 2005/06Prof. 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


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

Presentazioni simili


Annunci Google