Informatica e grafica per il web - parte Gabbiadini

FROM GRID TO CODE

È necessario stabilire a priori quali griglie di impaginazione (Righe e colonne) si utilizzeranno, così come avviene nei processi di progettazione nella grafica per la stampa, la differenza è che nella stampa vi è un formato prestabilito mentre, nel web, ogni utente visualizza la pagina in un modo differente dall’altro (Dallo Smartphone alla Smart Tv).

Possiamo utilizzare proporzioni classiche, che danno armonia e piacevolezza nelle forme.

Problema: Riempire quello che sfora la colonna dei contenuti. O i contenuti si espandono full screen e quindi indipendentemente dal monitor i contenuti sono in grado di adattarsi allo spazio massimo disponibile oppure la soluzione più usata è quella che i contenuti stiano tutti in una colonna centrale e il disavanzo a destra e sinistra di questa colonna centrale viene riempito da qualcosa di grafico o viene lasciato in bianco e le colonne a destra e Sinistra sono in grado di ampliarsi e occupare.

I paragrafi a due colonne che ho creato, il menù occupa due colonne. Il logo occupa la prima riga mentre il resto le righe sottostanti. Con gli stessi elementi possiamo avere un layout differente. Il logo occupa tutta la prima sotto riga e i paragrafi occupano 4. Il primo layout è per i Paesi Occidentali, mentre l'ultimo è per i Paesi Orientali, che hanno la lettura da sinistra a destra.

Le griglie sono uno strumento molto flessibile che ci danno una prima indicazione di come disporre gli oggetti in maniera che questi appaiano organizzati e ordinati, senza griglie avremmo degli oggetti fluttuanti o che mal si amalgamano nell'economia generale della pagina.

Quali griglie sono utilizzabili nel web?

Un esempio di tecnica molto utilizzata nella progettazione grafica sfrutta la cosiddetta proporzione aurea, o proporzione divina. Questa proporzione la percepiamo estremamente naturale e sottintende un rapporto fra 2 quantità il cui risultato tende a limite mai raggiunto.

Il numero Phi è pari a 1,618. La sezione aurea si basa sul numero Phi = 1,61803398874 scoperto dal matematico italiano Fibonacci. Phi è il rapporto tra la sequenza di numeri 1, 1, 2, 3, 5, 8, 13, 21. Ogni numero è dato dalla somma dei precedenti. Man mano che si dividono numeri consecutivi sempre più alti, il loro rapporto si avvicina al numero 1,618 (rapporto divino).

Esempio: Serie di Fibonacci in cui al passo 0 e al passo 1 vi è 1 e 1 e i passi successivi sono la somma dei numeri precedenti. Se si prendono due numeri nella serie, il risultato sarà sempre vicino al numero 1,61... senza mai essere uguale ad esso per il limite matematico.

Se si prende la lunghezza della mano e si rapporta con la misura dell'avambraccio, sottende 1,618 e lo stesso vale per il raggio della conchiglia, che segue le proporzioni di Fibonacci. Misurare la superficie complessiva della capocchia di un cavolo, la superficie sottende le dimensioni di 1,618. Questa proporzione è quella che segue la regola del 2/3.

se si vuole ritrarre un soggetto bisogna mettere il soggetto a 1/3 dell'immagine complessiva (così da renderla più familiare, armoniosa), se si va il rapporto tra le due quantità sottende il rapporto 1,618, quindi la regola è un'approssimazione della regola aurea.

Le superficie sono 4 circonferenze e l'area delle circonferenze sottende la proporzione aurea.

Le bombature vengono percepite come familiari. Anche il logo dell'Apple si basa sulla stessa logica, ovvero formato da 13 circonferenze inclinate di 45°.

Una delle prime griglie di impaginazione era quella di distribuire il contenuto testuale rispetto a quella che si chiama sidebar, facendo in modo che le due superfici delle aree avessero una relazione pari a 1,618.

I siti web avevano il contenuto sulla sinistra e avevano a destra questa barra che aveva il menù. Se andassimo a fare il rapporto tra questi due quadranti, ci accorgiamo che sottende la proporzione aurea percezione.

più armoniosa e più bilanciato

Se si fosse scambiato il Sidebar con il contenuto, oppure se la pagina fosse stata divisa a metà il sito sarebbe apparso molto sproporzionato (Contenuto è il fulcro della pagina, il menù è un accessorio)

Esempi:

Nel primo esempio abbiamo il contenuto che occupa circa i 2/3 mentre l'oggetto 1/3 dell'interfacce. Se fosse diviso a metà il contenuto sarebbe troppo sacrificato mentre si darebbe troppa importanza all'immagine e avrebbe prevaricato sul testo.

Nel secondo esempio vi è sia la proporzione con gli oggetti (L'immagine e a Sinistra perché l'obiettivo è vendere il panino Peso visivo dell'immagine fotografica) sia l'utilizzo del colore a contrasto che mi attira l'occhio. Wordpress versione 2 Utilizza la sidebar per metterci widget e contenuti accessori (Sta in un monitor in cui la risoluzione e 1024X 768 che è lo standard

attuale.

NEL PROGETTO USARE UNA GRID CHE SIA LARGA 1170 PIXELDISTRIBUITE SU 12 COLONNE E LO SPAZIO TRA UNA COLONNA EL'ALTRA È DI 30PX.

(960 PIXEL di larghezza è lo spazio della nostra pagina il più standard possibile ma oggi si usa una griglia un po' più grandeossia 1170)

(960 pixel) Importanza parte fotografica perché è un e-commerce, quindi, non potendo toccare l'oggetto bisogna dare rilievo all'immagine. → Rilievo anche della call to action Pulsante Buy

GRID 960

Rettangolo al centro del monitor la cui grandezza è massimo 960 pixel (Su Photoshop si crea una tavola di 1440 oppure 1920 pixel che lo schermo full HD, e dentro si crea un rettangolo di 1170 o 960 pixel dove si pongono i contenuti – 1170 perché ormai i monitor anche più scaccioni, chi ha un monitor più piccolo vedrà la versione responsive, ovvero la visualizzazione table.

Si tratta di un sistema a 12 colonne per la stesura di

Layout lineari e gradevoli, riempiendole colonne degli oggetti, calcolando quante colonne i miei oggetti andranno ad occupare. È un sistema particolarmente versatile, che trova corrispettivo in altrettanti framework CSS.

960 perché lo standard web si consideri come spazio massimo di visualizzazione 1024MA, ci si deve ricordare che il browser ha delle barre di scorrimento, quindi per essere sicuri si è scelto di utilizzare una grid di 960, inoltre, 960 pixel di larghezza è facilmente divisibile per 1,2,3,4,6,9,12, ovvero si può creare un layout particolarmente versatile.

Layout a 3 colonne dove ogni oggetto occupa 4 delle 12 colonne base della grid.

Perché scegliere una dimensione di 960px? Tutti i monitor moderni supportano ormai una risoluzione minima di 1024x768 pixel. Il numero 960 è divisibile per 2,3,4,5,6,8,10,12,15,16,20,24,30,32,40,48,60,64,80,94,120,160,192,240,320 e 480. Questo rende molto più flessibili le combinazioni relative.

Testare anche il flusso di navigazione vero e proprio. Non possono includere la versione reale del prodotto finale, ma devono includere una descrizione di come sarà il prodotto finale. Sono un linguaggio diverso dagli sketch e sono un modo rapido per far comprendere la struttura. Introducono rumore perché servono per analizzare la distribuzione dei contenuti e non i colori, le immagini.

A cosa servono?

• Rappresentazione degli ingombri degli oggetti
• Gerarchia dei contenuti (quali oggetti hanno più peso comunicativo rispetto ad altri)
• Relazioni spaziali dei contenuti (quanto margine diamo tra una colonna e quella successiva)
• Come essi sono rappresentati
• Interazione utente con i contenuti

I wireframes sono una versione più raffinata della griglia. La griglia ci determina gli spazi che possiamo occupare, con i wireframes andiamo...