Toolkit

Wireframe

Il wireframe è una rappresentazione visiva dello scheletro di un’interfaccia (app, website, etc.) atta a fornire un prototipo dell’idea del prodotto e/o servizio progettato. La funzione principale del wireframe è la comunicazione dell’idea del progetto, con un particolare focus sull’archittettura della struttura piuttosto che sul suo design. Considerata la sua natura prototipale, l’outcome del wireframe è quello di raccogliere velocemente feedback per migliorare il prodotto e/o servizio nella sua release successiva.
 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