Wireframe, Mockup e Prototipi nel design: “che roba è?”

Davide Massarella
Nov 1 · 7 min read

Ciao!

Mi chiamo Davide, ho 22 anni e faccio cose (leggi “sono un Designer”)!

Sono un Product Designer ed ho recentemente iniziato a lavorare presso una società veramente figa come UI designer.

Questo è il mio primo post in assoluto qui su Medium. Mi piacerebbe utilizzare questa piattaforma non solo come piattaforma per leggere spunti interessantissimi di altre persone, ma per condividere un po’ i miei folli flussi di coscienza, oltre che per raccontare un po’ il mio percorso!

Il tuo feedback su questo primo articolo mi sarà utilissimo per calibrare il tiro dei prossimi!

Direi di iniziare con il primo argomento che ho scelto di trattare, perché è in effetti una delle prime cose con cui un designer va ad interfacciarsi.

Sto parlando dei wireframe, dei mockup e dei prototipi.

Cos’è il wireframe, il mockup e il prototipo nella UI/UX
Cos’è il wireframe, il mockup e il prototipo nella UI/UX
Oh, se lo chiede Obama è d’obbligo dargli una risposta con questo articolo!

Ora, tralasciando il fatto che solo un termine su tre è italiano, cerchiamo un attimo di rispondere bene alla domanda “Ok, ma che ca*** sono?!”

Lo so, tutti noi sappiamo cosa sono. O meglio, abbiamo un’idea generale di essi. Ma se provi a spiegartela ad alta voce, oltre a sembrare un folle (ma tranquillo, a noi piace la follia, vero?), ti accorgerai che stai più o meno confondendo i tre termini e ti appariranno tutti e tre simili.

Ecco, per questo c’è questo articolo. Non voglio ancora chiederti un clap, abbiamo appena iniziato (= “In realtà gioco di psicologia inversa ed ho un bisogno immane dei clap, lascialo già ora sulla fiducia!”).

Dai, siamo già sui 1500 caratteri, è il caso di andare dritto al sodo. Sigaro in bocca, lo-fi beats nelle orecchie e iniziamo.

Può succedere che alcuni confondano il wireframe con il prototipo dando loro lo stesso significato, ma in realtà sono ben distanti tra di loro.

Concettualmente, sono gli antipodi.

Che?

Ok, riformulo.

Hai presente il processo di progettazione tipico che si segue prima di arrivare al prodotto finito? Ha più o meno questo andamento:

I quattro step fondamentali della progettazione.

Come vedi, sono due fasi ben distinte e neanche vicine tra di loro. Se escludessimo la fase di sketching iniziale, praticamente uno è l’inizio e l’altro rappresenta la fine del processo.

Se conosci un po’ la modellazione 3D, puoi pensare al wireframe come l’ingombro iniziale che dai all’oggetto tramite l’uso di forme geometriche tridimensionali primitive e al prototipo come il modellino in scala del prodotto fatto in cartone o polistirolo (tanto caro ai nostri cugini architetti…).

Dunque, wireframe, mockup e prototipo sono sostanzialmente tre diversi step del flusso di progettazione.

Scendiamo un po’ più nel dettaglio dei singoli step con qualche esempio pratico.

<nav class=”Primo step: i wireframe”></nav>

Un wireframe è un modello definito a bassa fedeltà (low-fidelity) che rappresenta il prodotto nella sua pura e semplice funzionalità. Nella forma più basilare, un wireframe è composto da forme geometriche primitive senza elaborazioni ulteriori, che occupano a grossi linee gli ingombri vari. Come già anticipato, infatti, un wireframe viene utilizzato per focalizzarsi sulla funzionalità del prodotto e su un primo usability test eventualmente.

Esempio di wireframe di un’applicazione
Esempio di wireframe di un’applicazione
Come appare un wireframe.

Considero il wireframe come condizione necessaria da introdurre nel workflow di un progetto.

Durante i primi anni del liceo (forse erano le medie addirittura?) frequentavo un corso per creare animazioni (non intendo motion design, ma proprio cartoni animati: carta, penna e tanti fogli!) e l’insegnante insisteva sul fare prima l’intera animazione molto stilizzata, senza alcuna cura dei dettagli. Questo perché richiede meno effort ma permette da subito, scorrendo le varie scansioni, di trovare il frame errato. Una volta che l’animazione era completa e funzionava con pochi tratti, allora aveva senso rifinire il tutto.

“Walk” by Galabar

Bene, il wireframe è, per me, quel passaggio che dall’animazione si è trasposto alla UX design. Se i tester comprendono il funzionamento del prodotto con solo dei quadrati, senza alcuna influenza di colori, forme e vezzi artistici, allora avete progettato un ottimo prodotto.

Complimenti! Sei pronto per passare al tuo mockup!

<nav class=”Terzo step: i mockup”></nav>

Ora che la tua User Research (mi auguro di parlarne presto qui!) ha prodotto dati utili a sistemare il wireframe per la versione finale, bisogna iniziare a sostituire i blocchi segnaposto dal vostro design vero e proprio.

Il mockup altro non è che la UI ad alta fedeltà, idealmente (e se avete nel team degli ottimi sviluppatori) in rapporto 1:1 (il prodotto sarà “as is”, esattamente come l’hai progettata). Serve prevalentemente per comunicare a ipotetici investitori il prodotto, o comunque servirà al team di sviluppo per comprendere al meglio le diverse componenti.

Inoltre, come ben sapranno i graphic designer, per mockup intendiamo anche la rappresentazione dal vero del prodotto. Sì, l’ho già detto, ma specifichiamo meglio.

Non si tratta solo di utilizzare le schermate realizzate racchiuse in un artboard rettangolare, ma si tratta di dare quel look and feel di un prodotto già finito.

In rete basta cercare “[supporto cercato] design mockup” per trovarne diversi, anche free. Personalmente, un po’ per pigrizia, un po’ perché in effetti li preferisco, mi realizzo dei mockup stilizzati al volo o comunque opto per dei mockup abbastanza eterei (si trovano con la keyword “clay mockup”).

Esempio di un mockup del Mac
Esempio di un mockup del Mac
Photo by Amy Hirschi on Unsplash

L’utilizzo di un mockup, coordinato anche alla palette della vostra UI, farà una grossa differenza nelle tue presentazioni! Che ne dici di provarli e farmi sapere?

Ottimo, ora hai la certezza di avere un prodotto funzionale (grazie al wireframe) e curato esteticamente pronto per essere presentato ad altre persone (grazie ai mockup).

Manca però qualcosa ancora.

Vorrei fare il vago e metterti la giusta suspense chiedendoti di rispondere, ma non avrebbe senso per due motivi:

  • non posso aspettare un tuo commento con la risposta per continuare l’articolo (ma tu commenta lo stesso eh!);
  • se finora abbiamo parlato di tre step, è palese che sia quello mancante.

(Sì, sono quello simpatico alle feste).

<nav class=”Quarto step: i prototipi”></nav>

Che cos’è, allora, ‘sto prototipo? Beh, diciamo che sicuramente NON è il wireframe, che spesso trae in inganno.

Infatti, come già detto, il wireframe testa la funzionalità e l’efficacia del prodotto, il prototipo mostra il come avvengono le diverse interazioni e come si comporta il flusso agli input dell’utente.

by Jurre Houtkamp for Framer

Il prototipo si colloca in quello che possiamo definire come interaction design ed è la versione più simile del prodotto funzionante. Resta chiaramente una simulazione, non sognare di proporlo come prodotto finito!

Nel caso in cui si parli di un prodotto fisico, tuttavia, un prototipo ben fatto può essere utilizzato, in fase iniziale, come un MVP di tutto rispetto.

E no, non è l’inizio di un codice fiscale.

Photo by Jo Szczepanska on Unsplash

Per MVP intendiamo il Minimum Viable Product, ovvero il tuo prodotto ridotto all’osso. Chiediti sempre, prima di lanciarne uno:

“Qual è la massima semplificazione che il mio prodotto può avere, mantenendo tutte le funzionalità che voglio, che mi richiede il minimo effort?”

Parlerò nel dettaglio del MVP in un prossimo articolo. Ma se sei talmente ansioso da voler saper subito di cosa si tratta, ti consiglio quello che è probabilmente il must have della lettura: Lean UX: Designing Great Products with Agile Teams (purtroppo non c’è in lingua italiana). Prende gran parte dei contenuti della “Bibbia” delle startup, trasponendo i suoi principi nel design.

Il link è in affiliazione con Amazon.

Potrei dirvi che se acquisterete da lì mi darete una mano a portare sempre nuovi contenuti e migliorare l’attrezzatura, ma credo di aver sbagliato piattaforma. Quindi, se compri il libro dal link, avrò una colazione al bar pagata. E dato che per un designer il caffè non è mai troppo, sarebbe una gran cosa!

Se sei arrivato a leggere fin qui, sappi che hai letto oltre le 1000 parole.

“E quindi?”

Niente, mi piaceva dirlo.

Ė curioso notare come ho iniziato a scrivere questo primo articolo di notte, con un sigaro e una birra artigianale nella mia stanza e dopo quattro giorni lo sto finalmente concludendo su un Intercity in direzione Pavia per prendere parte allo StartupWeekend.

Aggiungo: sono tornato (tra l’altro abbiamo vinto!) e finalmente l’ho ultimato.

Mi auguro che come esordio possa averti anche in parte lasciato qualcosa. Erano cose che già conoscevi? Lasciami un feedback, in modo da direzionare sempre meglio il tiro.

Non sono bravo a chiudere i discorsi, quindi…

Buona progettazione? Al prossimo articolo?

Insomma, ciao.

Davide Massarella

Written by

Hi! I’m Davide, an Italian product designer and I want simply change the world! ☺ https://www.linkedin.com/in/davide-massarella/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade