Wireframe

Descrizione

Purpose

Permette di comunicare e validare le scelte progettuali.

La realizzazione di wireframe a bassa fedeltà ha la funzione di esplorare le diverse opportunità progettuali e comunicare l’idea di base ai nostri clienti.

Livelli di dettaglio successivi consentono di testare le scelte riguardanti la struttura dei contenuti, la navigazione, l’interfaccia utente e il look & feel.

Il tool serve per permettere al cliente di capire appieno lo svolgersi delle fesi del progetto ed approvare le varie modifiche durante le fasi di sviluppo.

Il disegno del Wireframe è importante perché permette al progettista di pianificare il layout e l’interazione di un’interfaccia senza essere distratto dai colori, da scelte di carattere tipografico o anche dai testi. E’ utile spiegare che se un utente non riesce a capire dove andare su un wireframe bianco e nero, non è importante quali colori si utilizzino alla fine. Un pulsante deve essere evidente, anche se non è lucido o dai colori vivaci.

How to

Il wireframe può scendere più o meno nel dettaglio nella rappresentazione delle funzionalità e degli step del processo, a seconda delle finalità per cui lo si sta utilizzando. Il wireframe può essere creato tramite diversi strumenti a seconda del livello di dettaglio che si vuole raggiungere: da uno schizzo su carta all’utilizzo di appositi software che puoi trovare elencati in RELATED TOOLS.

La sua caratteristica principale consiste nella flessibilità, infatti è possibile cambiare rapidamente gli elementi presenti per adattarli alle evoluzioni del progetto.

Quando un wireframe diventa interattivo prende il nome di prototipo, in quanto non è più statico ma simula i principali meccanismi di interazione e comportamento.

Il wireframe può essere sviluppato sia dal team di progettazione che insieme al cliente. Nel caso in cui venga coinvolto il cliente si organizza solitamente un workshop o si propone una sessione di co-design.

Expected Outcome

Scheletro del layout con la disposizione dei contenuti e le principali funzionalità dell’interfaccia. E’ corredato da note e commenti che ne supportano la comprensione durante le fasi successive della progettazione.

What’s next

Se il wireframe è completo e riesce a trasmettere l’idea del progetto.

Lo sviluppo di mockup più realistici, con elementi grafici (colori, icone, font) fino alla prototipazione completa dell’idea.

Tips

Quando inizi parti sempre da uno user-case, ad esempio: “voglio registrarmi a questo sito” e spacchetta le fasi del processo per mostrare le varie schermate.
Non iniziare con uno strumento digitale
Non giudicare le tue idee prima di metterle su un foglio
Non concentrarti troppo sulla qualità degli schizzi
Procurati buoni strumenti
Le immagini possono essere rappresentate con una croce.
I titoli possono essere rappresentati in grassetto
Il testo può essere rappresentato come linee orizzontali
Il video può essere rappresentato come una scatola orizzontale con un pulsante di riproduzione al centro.
Usa il colore per evidenziare gli elementi