-
1
Partenza del progetto
Come per qualunque progetto la partenza è data dall’analisi degli obiettivi, target, messaggi. In base alla prima fase di analisi si strutturano le aree di funzionamento del sito, quella emozionale e quella divulgativa .
-
2
Atmosfera e coerenza grafica
Il concetto di "sensazione" (o atmosfera) è strettamente correlato a quello del target. Una volta definito il target dobbiamo infatti intuire quali siano le sue emozioni e sensazioni e quali scelte grafiche siano capaci di valorizzare quest’ultime in modo positivo ed efficace.
Atmosfera e stile dovranno venir giocate innanzitutto tramite scelta della tavolozza colori e dell’iconologia da utilizzare. Particolarmente importante in un layout web l’utilizzo dei background e di eventuali pattern per enfatizzare lo stile scelto.
-
3
Immagini e Iconologia
L’utilizzo di immagini ed icone dovrà essere definito in base al target e all’obbiettivo comunicativo preposto.
-
4
Regola aurea ed elementi di pagina
Possiamo applicare le proporzioni auree anche ad altri elementi delle nostre pagine web, come banner, box pubblicitari o altre piccole sezioni. Dividendo infatti la larghezza di un box per il valore 1,62 possiamo ottenere la corretta altezza in proporzione.
Dobbiamo solo effettuare un piccolo calcolo: 360:1,62=222
-
5
Regola dei terzi
Rappresenta le zone in cui l’occhio si concentra maggiormente, è possibile sfruttare quindi questa potenzialità nella progettazione del layout posizionando su questi punti gli elementi di maggior risalto.
-
6
Dalla griglia dei terzi a quella personalizzata
Le griglie personalizzate sono strutture reticolari, ovvero la suddivisione del layout in un numero definito di colonne verticali, tutte della stessa dimensione, separate l’una dall’altra da una distanza costante.
La griglia offre una discreta versatilità nei blocchi del layout e rende molto più semplice la suddivisione dell’area di design tra contenuti testuali, contenuti decorativi e spazi bianchi.
-
7
Le Griglie
Per motivazioni di ordine pratico/temporale ma anche grazie alla nascita del concetto di web design "responsive" – sempre più web designer scelgono di progettare i loro layout basandosi su griglie
Ethan Marcotte nel suo libro "Responsive web design" identifica 6 Resolution breakpoints:
320 pixel per device con schermi piccoli, come cellulari, mantenuti con orientamento verticale (portrait)
480 pixel per device con schermi piccoli, come cellulari, matenuti con orientamento orizzontale (landscape)
600 pixel piccoli tablet, come Kindle di Amazon (600x800) e Nook di Barnes&Noble (600x1024), tenuti con orientamento verticale
768 pixel tablet da 10 pollici come l'iPad (768x1024) mantenuti con orientamento verticale
1024 pixel computer da scrivania, laptop e netbook, e tablet come l'iPad (1024x768) mantenuti con orientamento orizzontale
1200 pixel computer con schermi larghi, tipicamente desktop ma anche laptop
-
8
Struttura simmetrica
L’equilibrio simmetrico è una forma di equilibrio che rende il layout facile da consultare e visivamente gradevole.
Utilizza un equilibrio simmetrico se il layout conterrà una massiccia quantità di informazioni e necessita di essere di semplice ed immediata consultazione. Si può parlare di equilibrio simmetrico quando, scomponendo una composizione grafica in due parti, quest’ultime appaiano speculari. Può esistere anche una simmetria parziale rispetto un solo asse o in una sola porzione del layout.
-
9
Struttura Asimmetrica
L’equilibrio asimmetrico si basa sull’utilizzo di elementi che disposti in un certo modo riescono, nonostante le loro differenze nei colori, nelle dimensioni o nella forma, a bilanciare visivamente il peso della pagina.
-
10
Ripetizione
Come già suggerito dai principi di gestalt di allineamento e movimento comune, possiamo ritrovare una struttura di ripetizione tra gli elementi compositivi.
-
11
Ripetizione regolare
Gli elementi ripetuti hanno lo stesso colore, la stessa forma e le stesse dimensioni: l’esempio più rappresentativo di questo ritmo sia ha nell’utilizzo di un pattern, ovvero di un immagine ripetuta più volte con cadenza regolare.
-
11
Ripetizione progressiva
Anche nel ritmo progressivo si ha una ripetizione degli elementi grafici o concettuali, ma a differenza del ritmo regolare in questo caso tali elementi vengono rappresentati con dimensioni o colori diversi: la forma non muta.
-
12
Ripetizione Fluida
Il ritmo fluido si basa sulla ripetizione di un elemento o di uno stile grafico capace di dare dinamicità e movimento alla composizione grafica. L’elemento viene ripetuto, ma in modo discontinuo e irregolare, cosi da aggiungere vigore ad un design altrimenti piatto e prevedibile.
-
13
Layout & Contrasto
Il contrasto è uno degli elementi di base per la progettazione di una corretta gerarchia di lettura della composizione. Quando creiamo delle enfasi, definiamo la gerarchia all’interno della nostra composizione grafica; scegliamo quali sono gli elementi che vogliamo colpiscano maggiormente l’attenzione dell’utente e quali invece vogliamo porre in secondo piano. La scelta di un punto focale dipende ovviamente dal tipo di azione che vogliamo far compiere all’utente, se vogliamo stimolarlo all’azione elaboreremo visivamente alcune call-to-actions posizionate in punti strategici del layout.
Le "call to action" sono inviti a compiere un’azione. Nel Web design e soprattutto, nel campo della usability, le Call to Action sono appunto elementi distinguibili, che sollecitano il navigatore a compiere un’azione. Ovviamente, questi elementi, nelle interfacce web, proprio pensando al concetto di usabilità, diventano di enorme importanza e devono essere considerati con estrema precisione.
-
14
Colore per creare contrasto
L’uso del colore è un modo semplice e immediato per creare contrasto. I colori più vivaci e accesi, come il rosso, l’arancione e il giallo attirano maggiormente l’attenzione. Se poniamo un elemento dal colore "caldo" accanto ad un elemento in scala di grigio, o dal colore freddo, l’elemento con il colore acceso sarà il punto focale della nostra composizione grafica.
-
15
Dimensione per creare contrasto
Per enfatizzare un elemento, ne aumentiamo le dimensioni rispetto al contesto a cui appartiene o agli altri elementi della composizione grafica.
-
16
Luminosità e nitidezza per creare contrasto
Un altro modo efficace per dare enfasi ad un elemento consiste nel creare un contrasto tra quest’ultimo e il background in cui è inserito.
indietro
