Wireframe

I wireframe letteralmente  significano “modello in fil di ferro“.
Nascono come strumento legato al 3d, e indicano un tipo di visualizzazione a struttura “nuda”, senza texture e superfici.

wireframe
Nella progettazione di sistemi sono spesso uno dei tasselli fondamentali della costruzione di prototipi. Attraverso i wireframe vengono rappresentate su diverse tavole,  le varie “Fasi” del sistema (esempio pagine o template di pagina se stiamo parlando di un sito, le schermate di un app e via dicendo) strutturando quella che poi diverrà l’interfaccia utente.

basamiq

I wireframe sono il primo passo di rappresentazione visiva dall’idea progettuale, non hanno però valenza grafica, ma solo strutturale: alla grafica ci penserà lo UI designer che utilizzerà i wireframe e il prototipo come modello.

Il livello di dettaglio del wireframe dipende dallo stato della progettazione e dalle necessità di progetto. Possono rappresentare in generale i blocchi  e le principali aree dell’applicazione:

Fonte
Fonte

O essere molto dettagliati, come:

wireframe dettagliato
Fonte

Solitamente si compongono da schema + annotazioni.
Lo schema identifica i vari blocchi, senza entrare nel dettaglio, le annotazioni e labeling servono per identificare i contenuti non autoesplicativi.

I wireframe sono documenti che servono a diverse figure nel processo di costruzione di un sistema, dai designer, ai dev per lo sviluppo delle funzionalità, ai business analyst, etc… e possono  essere utilizzati congiutamente ai Flowchart (process flow, o workflow), alle mappe di navigazione e agli altri strumenti derivanti dalle fasi preliminari delle raccolta informazioni.

Sono spesso utilizzati come strumento di verifica: la rappresentazione grafica delle funzionalità, dei blocchi e dei contenuti, può far emergere delle lacune o delle incongruenze che nella progettazione “su carta” rimangono in ombra. Ad esempio facilitano l’individuazione di aree troppo vuote, o troppo piene: se in una fase ci sono troppe funzionalità, si può decidere di suddividerle in chunk più piccoli.

Strumenti

La scelta dello strumento per la composizione dei wireframe, dipende da tre fattori: tempo, budget a disposizione e modalità di condivisione degli stessi.

Carta e penna
(ma anche post-it, colla, pennarelli etcc)

E’ il metodo classico, e funziona quando: siete in fase embrionale del progetto, le fasi da prototipare sono poche, avete una naturale predisposizione per lo sketching, o dovete relazionarvi con stakeholder particolarmente restii alla tecnologia.

wireframe sketch
Fonte

Il wireframe “di carta” evita il fraintendimento che quello che state mostrando sia in la grafica e non il prototipo… soprattutto se lo state mostrando ad un committente…

Se non siete particolarmente abili nel disegno non disperate. Esistono in commercio degli stencil  che vi possono aiutare, o ancora, soprattutto se i wireframe sono ad un livello di dettaglio basso, utilizzate forme elementari o post-it, che vi faciliteranno le eventuali modifiche collaborative.

wireframe-postit

iphone-iOS8-tall4_1024x1024_080eeb08-45f9-47d4-8ef6-0caa5ea4dc58_1024x1024
Software e sistemi online

Esistono molti strumenti per la generazione di wireframe con tastiera e mouse. I vantaggi sono facilmente intuibili, dal copiaincolla di parti simili, alla facilità di distribuzione e di modifica, all’uso di librerie grafiche con gli elementi di base.

Si possono utilizzare sistemi online come Balsamiq (sas), che consente di creare una vero e proprio prototipo di navigazione collegando le voci e le parti con dei link, o dei software tipo Pencil (free). Molti di questi sistemi, permettono di passare dal wireframe ad un prototipo html/css funzionante.

Html e css

Diversamente, se volete baypassare la fase di disegno, potete creare dei prototipi direttamente utilizzando html e css (sempre tenendo presente che non state disegnando la ui ma la sua struttura).

Perchè complicarsi la vita?

Perchè nella prototipazione su tavole è difficile rendere i comportamenti responsivi, come ad esempio il cambio di dimensione di uno schermo.

Spesso, per velocizzare il processo, si utilizzano o dei boilerplate o direttamente dei framework (Bootstrap in primis, ma anche Foundation o wirefey).

Qualsiasi tool visuale

L’equivalente del “carta e penna” può essere realizzato con un IDE grafico, da photoshop, a illustrator, indesign, gimp, sketc, visio… mi è capitato di vedere persino wireframe in powepoint.

Anche in questi casi, non reinventatevi la ruota: il web è pieno di kit per wireframe, sottoforma di librerie di png o template vettoriali da cui partire.