Layout di un sito web impaginare con metodo

Come per qualunque progetto la partenza è data dall’analisi degli obiettivi, target, messaggi. In base a questa prima fase si strutturano le aree di funzionamento del sito: quella emozionale e quella divulgativa.

In base alla prima fase di analisi si strutturano le aree di funzionamento del sito, quella emozionale e quella divulgativa.

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.

L’utilizzo di immagini ed icone dovrà essere definito in base al target e all’obbiettivo comunicativo preposto.

• 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

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.

• 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.

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, così da aggiungere vigore ad un design altrimenti piatto e prevedibile.

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.

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.

Per enfatizzare un elemento, ne aumentiamo le dimensioni rispetto al contesto a cui appartiene o agli altri elementi della composizione grafica.

Un altro modo efficace per dare enfasi ad un elemento consiste nel creare un contrasto tra quest’ultimo e il background in cui è inserito.