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