Se chiami «bozza» qualsiasi schermata, prima o poi qualcuno approverà la cosa sbagliata. Un wireframe serve a discutere la struttura. Un mockup mostra l’aspetto visivo. Un prototipo simula il comportamento. Confonderli porta feedback sui colori quando dovresti verificare il percorso, oppure fa sembrare già funzionante qualcosa che non è stato sviluppato.
Wireframe: dove va cosa
Il wireframe è lo scheletro. Mostra blocchi, ordine delle informazioni, navigazione e azioni principali. Può essere disegnato su carta o in digitale, spesso in grigio.
La sua povertà visiva è un vantaggio: costringe a discutere se il contenuto è al posto giusto. Per un sito di servizi, permette di verificare se dalla home si arriva al servizio e poi al contatto senza perdersi.
Mockup: come apparirà
Il mockup aggiunge identità visiva: colori, font, immagini, spazi e componenti. È utile per valutare gerarchia e coerenza con il brand, ma di solito resta statico.
Qui il feedback «mi piace» non basta. Chiedi se l’azione principale si distingue, se i testi sono leggibili e se l’aspetto sostiene la fiducia richiesta dal servizio.
Prototipo: come si comporterà
Il prototipo collega schermate e simula interazioni. Può essere semplice, con pochi passaggi cliccabili, o molto realistico. Serve a provare attività: prenotare, acquistare, cercare, compilare.
Non è necessariamente il sito finito. È uno strumento per scoprire errori quando correggerli costa ancora poco.
«Un wireframe serve a discutere la struttura. Un mockup mostra l’aspetto visivo. Un prototipo simula il comportamento.»
Quale serve davvero
Non ogni progetto richiede tre documenti separati e dettagliati. Una landing semplice può passare da wireframe a sviluppo con un sistema visivo già definito. Un e-commerce o un flusso di prenotazione beneficia invece di un prototipo testabile.
La scelta dipende dal rischio: più il percorso è complesso o decisivo per il fatturato, più conviene verificarlo prima del codice. È particolarmente importante nelle pagine che accompagnano la decisione d’acquisto.
Come presentare le fasi al cliente
Spiega quale decisione stai chiedendo. Sul wireframe: contenuti e ordine. Sul mockup: gerarchia e linguaggio visivo. Sul prototipo: comprensione e comportamento. Rimandare ogni discussione a ogni fase allunga le revisioni e confonde responsabilità.
Se stai commissionando un sito, chiedi quali elaborati riceverai e cosa potrai approvare in ciascuna fase. Verifica anche che il preventivo spieghi le attività comprese: il prezzo ha senso soltanto quando sai quanto costa un sito e perché. Se lo stai progettando, non usare il dettaglio grafico per nascondere una struttura ancora debole.
- Wireframe: dove va cosa. Blocchi, ordine delle informazioni, navigazione e azioni principali.
- Mockup: come apparirà. Colori, font, immagini e gerarchia visiva.
- Prototipo: come si comporterà. Schermate collegate per provare un’attività vera.
- Più il percorso è complesso o pesa sul fatturato, più conviene verificarlo prima del codice.
Hai un progetto fermo tra bozze e revisioni? Prenota una call in regalo. Possiamo aiutarti a rimettere in ordine struttura, interfaccia e percorso prima che gli errori arrivino allo sviluppo.
Scritto da
Consulente di marketing digitale e strategist della customer experience. Parte sempre dalla customer journey: chi è il cliente ideale, dove ti cerca e cosa lo frena dall'acquistare. Si è formata in UX/UI design, e porta quello sguardo in ogni punto di contatto con il brand.