Progettare un sito con wireframes

Assunto: i Wireframes non sono un programma, è una tecnica di webdesign.

Cosa è il wireframing?

Il wireframing è una tecnica di web design che prevede la creazione di una base su cui sviluppare il sito, come le fondamenta di una casa. Ci sono diverse tecniche di usare i wireframes. La prima consiste nel creare una pagina HTML con il primo abbozzo di grafica, il secondo (quello che preferisco) è disegnare la pagina completa usando solo due colori: nero e grigio (questa tecnica è chiamata anche grey box method).

In questo modo intervenire sul layout ancora in costruzione è molto più semplice rispetto a una pagina a pieni colori, poichè non si sono definiti i colori finali, quindi non si deve modificare tutto il sito o cancellare sezioni che noi abbiamo inserito ma che al cliente non vanno giù.

In questo articolo scomporrò il disegno con wireframe in due punti
fondamentali, che sono diciamo comuni i siti/clienti/design.

Vediamo come funziona, partendo dall’incontro col cliente fino alla consegna del sito:

Wireframing #1

Col cliente, un foglio di carta e una penna, si decide intanto la struttura del sito (questo se non sapete quantomeno l’argomento del sito che andrete a sviluppare, o comunque un’idea sui contenuti, altrimenti passate pure questo passaggio.) le sezioni principali almeno della home page.

Dopodichè, si può creare almeno due versioni del sito, usando i wireframe, cioè creare vari box per delimitare la pagina, e facendo scegliere al cliente quella che preferisce, se vuole apportare modifiche o quant’altro, sebbene personalmente preferisca effettuare sempre una sola versione di un sito, perchè rappresenta la mia visione di esso.

Wireframing #2

Scelta la versione, la si può ancora modificare con semplicità usando la tecnica del wireframing, così si può arrivare ad una pagina definitiva, in scala di grigi, in davvero breve tempo. In questo modo abbiamo ottenuto una pagina vera e propria solo desaturata di tutti i colori.

Immagini e colori
Fatto questo, si procederà allo sviluppo della pagina vera e propria, e, basandoci sui wireframe, possiamo lavorare al sito, senza preoccupazioni che il cliente non approvi il disegno
o i colori. Soprattutto, oltre al tempo risparmiato, rende meno faticoso il lavoro.

Generalmente il discorso finisce qui, queste sono solo le linee guida di un sito progettato con wireframe, dato che cambia da caso a caso, da sito a sito, e non per ultimo dettaglio, da cliente a cliente.

L’uso del wireframe permette di abbattere i tempi di costruzione del design del sito e al contempo non sacrifica la creatività del designer perchè è sempre libero di inserire qualsiasi elemento grafico lui voglia.

Dopo il wireframe e la colorazione, brevemente, si passa a scomporre in
diversi pezzi il layout per poi essere rimessi insieme via css.

]]>