Quando si arriva a parlare di wireframe in un sito web, si è già passati per il primo passo dell’interaction design, cioè si è già arrivati a definire la struttura del sito, come esso reagirà in base all’utente e tutto il resto.

Dopo questo passaggio iniziale, si passa di solito a parlare di wireframe.

Ma cosa è un wireframe?

Fondamentalmente, un wireframe è una sorta di bozza del sito, in cui viene descritto visualmente tutte le informazioni ricavate precedentemente. Ovviamente non si tratta di una cosa accurata, serve soltando a vedere la struttura.

Un wireframe, è solitamente composto di vari blocchi, senza colore, con una sorta di testo al loro interno, o, in alternativa, i blocchi sono accompagnati da una didascalia (più utile per chi i testi li vede a fine sito o piuttosto non li vede e basta).

 

Un wireframe è disegnabile sia con i più tradizionali strumenti come per esempio Photoshop, che sì, è comodo, ma risulterà impossibile da modificare da terzi, oppure con programmi come ad esempio OmniGraffle o Visio che, in un team di persone, permettono modifiche più veloci e alla portata di tutte le persone impegnate nel progetto.

Un wireframe è utile sotto diversi aspetti.

Innanzitutto permette di avere una prima bozza di un sito, traducendo in immagine ciò che era rimasto su carta (o lavagna, o post-it…), e quindi, definisce la struttura del sito visivamente.

È fondamentale poi per il cliente, perchè in questa fase di wireframing il cliente può farsi un’idea di come sta venendo il sito e apportare le sue modifiche (nell’ordine del ragionevole) senza per questo stravolgere il design, i colori o il codice, a vantaggio di tutti, con minor spreco di tempo e di soldi.

In definitiva, quella del wireframing è una tecnica che si presta alle modifiche più disparate, consentendo di sviluppare e modificare siti rapidamente, si adatta a siti grandi e piccini, e inoltre un wireframe potrebbe essere inserito nel preventivo, di modo che i clienti abbiano già qualcosa in mente per il loro sito.