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
Related Tool
-
5 Whys
Leggi tutto -
8 Steps to Accelerate Change
Leggi tutto -
A/B test
Leggi tutto -
ADKAR Model
Leggi tutto -
Business Model Canvas
Leggi tutto -
Business Model Environment
Leggi tutto -
Challenge Design Framework
Leggi tutto -
Client Segmentation Quadrant
Leggi tutto -
Cluster Analysis
Leggi tutto -
Competitive Analysis
Leggi tutto -
Culture map
Leggi tutto -
Customer Journey Map
Leggi tutto -
Data Research, Cleaning and Analysis
Leggi tutto -
Data Visualization
Leggi tutto -
Digital Prototyping
Leggi tutto -
Digital Skills Cards
Leggi tutto -
Digital Transformation Radar
Leggi tutto -
Empathy Map
Leggi tutto -
Employee Centered Design
Leggi tutto -
Functional Analysis
Leggi tutto -
Kanban Board
Leggi tutto -
Le metriche che contano
Leggi tutto -
Mind Map
Leggi tutto -
Platform Model Canvas
Leggi tutto -
Presentation Design Canvas
Leggi tutto -
Rapid Prototyping
Leggi tutto -
Segmentation Tree
Leggi tutto -
Service Blueprint
Leggi tutto -
Shadowing
Leggi tutto -
Social Network Analysis
Leggi tutto -
Stakeholder Analysis
Leggi tutto -
Stakeholder Map
Leggi tutto -
SWOT Analysis
Leggi tutto -
Time Boxing
Leggi tutto -
Training Canvas
Leggi tutto -
User Personas
Leggi tutto -
Value Proposition Canvas
Leggi tutto -
Wireframe
Leggi tutto