Wireframe con le matite

C’è un motivo per cui i wireframe sono in bianco e nero, o meglio ancora, creati con uno strumento che forse solo un Lovecraft avrebbe potuto immaginare nei suoi più oscuri e folli sogni: una matita.
Anzi, direi che i motivi sono ben più di uno.

• La loro velocità di creazione innanzitutto, è molto meno complesso e difficile creare un wireframe così che non mettersi a combattere con photoshop, scegliere i colori, bla bla bla..
• Il cliente capisce che è una bozza e non il sito completo, e quindi non vi dirà che il sito è brutto, scarno e preferiva i colori del suo logo, evitandovi di dover ogni volta spiegare che quella è solo la bozza, che quelli non sono i colori definitivi, all’infinito.
• Il grafico che deve mettersi a lavorare sopra questi wireframe non ha costrizioni mentali nella creazione della grafica perché anche lui considererà queste bozze come niente più di indicazioni, da seguire si, ma solo nella struttura, e quindi, si spera, non avrà problemi a disegnare il sito.

A matita è ancor meglio

Come ha spiegato Aaron T. Travis nel suo articolo su Boxes and Arrow, creare wireframe che siano disegnati (o quantomeno che lo sembrino) è una cosa buona e giusta. Non mi metterò a tradurre l’intero articolo, diciamo che in sostanza sostiene (e secondo me a ben ragione, per questo lo cito) che creare le bozze a mano o comunque con un effetto che sembrino disegnate a mano[¹ è una cosa ottima, perché almeno i clienti riescono a capire che quelle sono bozze e niente di più. E vi evitano gli svarioni di cui sopra, oltre agli altri vantaggi.

Velocità

Pensate alla comodità di poter modificare i wireframe semplicemente prendendo il pezzo di carta e scrivendoci sopra, piuttosto che non aprendo il programma sul computer e poi modificare il wireframe. In questo modo si possono creare e modificare wireframe con una velocità nettamente superiore. Ma anche, se non vogliamo usare carta e matita, usando programmi fatti apposta e non quelli generici di disegno.
E non ho affatto parlato di strumenti come l’iPad. Glielo presentate al cliente, non piace? Nessun problema. Glielo modificate sotto gli occhi². Bam.

Fedeltà

Ovviamente questo non vale sempre. I wireframe dovrebbero essere così come descritti nell’articolo solo nelle loro fasi iniziali, e diventare sempre più dettagliati e meno “fatti a mano” mano a mano che si avanza nello sviluppo.
Partire quindi da un wireframe a bassa fedeltà in cui è possibile attuare questo procedimento, fino ad arrivare, passando per diversi passaggi intermedi, a wireframe ad alta fedeltà che per forza di cose non possono essere più disegnati a mano perché il disegno si arricchisce di dettagli che ed elementi che devono essere rappresentati sempre più vicini alla soluzione finale che non a quella iniziale. In questo caso non è sbagliato anche farsi aiutare da un grafico, quantomeno a farsi aiutare a buttare giù i primi abbozzi di grafica.

Programmi

Sto usando da qualche tempo, sarà un annetto buono ormai, Omnigraffle³, che mi pare molto buono. Con questo programma, che uso in maniera esclusiva per creare wireframe (fa anche altre cose, ma io lo uso solo per quello), mi trovo decisamente bene, e riesco a produrre meglio e con meno tempo che non usando Photoshop o un qualsiasi programma di grafica, perché gli ho importato una serie di strumenti, questi.
Questi stencil sono fantastici perché semplicemente fanno loro tutto il lavoro evitando di dover creare ogni volta i vari elementi, oltre a garantire una discreta coerenza tra i vari wireframe, che si è relativamente poco importante mettendo a confronto diversi progetti, ma diventa importantissima quando dobbiamo creare più di un wireframe per sito (cioè sempre).

Iscriviti alla mia newsletter per ricevere altri articoli interessanti come questo!

Iscriviti gratuitamente per ricevere comodamente nella tua email tutti gli articoli della settimana! 100+ iscritti!