Mockup: significato, esempi e differenza con il prototipo

Ogni nuovo progetto arriva prima o poi alla stessa domanda: come verrà, dal vero? Il mockup serve a rispondere prima di spendere. Il web designer mostra al cliente la home del sito a colori prima di scrivere il codice, la tipografia mostra il logo stampato sulla felpa prima di ordinare i capi, il negozio su Etsy mette in vendita tazze che vengono stampate solo quando arriva un ordine. Qui trovi il significato di mockup nei diversi settori, come si dice in italiano, la differenza con wireframe e prototipo, i tipi più usati e come crearne uno.

In breve. Un mockup è un'anteprima realistica e statica di un progetto, mostrato come apparirà nell'uso reale prima che il prodotto finito esista. Nel web design è una schermata ad alta fedeltà con colori, caratteri e immagini definitivi, senza interazioni. Nella grafica di prodotto è la tua grafica applicata sulla foto di un oggetto, come una t-shirt, una tazza, una scatola o uno smartphone.

Mockup: il significato della parola

Il verbo inglese to mock up significa costruire un modello o una simulazione di qualcosa. La parola nasce nell'industria e nell'architettura, dove il mock-up era un modello fisico, spesso in scala reale, costruito per vedere l'aspetto di un prodotto, di una stanza o di un veicolo prima della produzione. La grafica ha preso in prestito il termine per l'equivalente digitale: un'immagine che sembra finita, usata per valutare e vendere un'idea.

Oggi i significati principali sono due, e il contesto dice quale:

• Nel web e nell'interfaccia di app, il mockup è la versione statica e ad alta fedeltà di una schermata. Sta tra il wireframe (la struttura) e il prototipo (l'interazione).
• Nella grafica di prodotto, nella stampa e nel merchandising, il mockup è una grafica applicata sulla foto o sul render di un oggetto vero, come una stampa su una t-shirt o un'etichetta su una bottiglia.

Lo scopo è lo stesso: giudicare l'aspetto di qualcosa prima di investire tempo e denaro per costruirlo o stamparlo.

Come si dice mockup in italiano

Una traduzione unica non c'è. A seconda del contesto si usano modello, simulazione, bozza realistica, campione o prova. Nella grafica e nel design digitale la parola inglese è entrata nell'uso comune e si scrive sia mockup sia mock-up; in un testo conviene sceglierne una e mantenerla.

Wireframe, mockup e prototipo: le differenze

Nel design di siti e app il mockup è il secondo di tre passaggi che vanno dall'abbozzo al prodotto reale. Ognuno risponde a una domanda diversa.

	Wireframe	Mockup	Prototipo
Fedeltà	Bassa	Alta	Alta o media
Cosa mostra	Struttura e blocchi di contenuto	Colori, caratteri, immagini e spazi finali	Aspetto finale più clic e transizioni
Interattivo	Statico	Statico	Cliccabile
Domanda	"Dove va ogni elemento?"	"Che aspetto avrà?"	"Come funzionerà?"
Quando si usa	Fase iniziale, architettura dei contenuti	Approvazione visiva con il cliente	Test con gli utenti, consegna agli sviluppatori

Il wireframe usa riquadri grigi e testo segnaposto, così la discussione resta sulla struttura. Il mockup aggiunge il design visivo vero, ed è il momento in cui il cliente reagisce a colori, font e immagini. Il prototipo collega i mockup, così chi lo prova tocca un pulsante e arriva alla schermata successiva. Nei progetti piccoli le fasi spesso si fondono: un sito vetrina può passare dallo schizzo direttamente al mockup, mentre un'app complessa ripete tutti e tre i passaggi più volte.

I tipi di mockup di prodotto

Fuori dal web design, "mockup" indica quasi sempre un mockup di prodotto. Questi sono i tipi più usati nella stampa, nel merchandising e nel marketing:

• Abbigliamento. T-shirt, felpe, shopper e cappellini, con la stampa che segue le pieghe del tessuto. Sono la base dei negozi print-on-demand.
• Tazze e borracce, dove la grafica si avvolge su un cilindro.
• Packaging. Scatole, buste, etichette, bottiglie e lattine, usati per presentazioni e campagne di crowdfunding prima della produzione.
• Stampa e cancelleria. Biglietti da visita, volantini, poster, carta intestata e partecipazioni appoggiati su una scrivania o appesi a una parete.
• Dispositivi. Un sito o un'app dentro la cornice di uno smartphone, di un portatile o di un tablet, per le pagine di lancio e i portfolio.
• Insegne. Insegne di negozi, cartelloni, vetrofanie e grafiche per furgoni, utili per mostrare un logo in scala reale.
• Libri e copertine, in versione ebook, cartacea o vinile.

Un buon mockup di prodotto ha tre qualità. La grafica segue la superficie, piegandosi con il tessuto o curvandosi sulla tazza. Luci e ombre della foto restano sopra la stampa, così sembra stampata e non incollata. E la dimensione della stampa corrisponde a quella che il fornitore produrrà davvero, così il cliente riceve il prodotto che ha visto.

Gli altri significati di mock-up

La stessa parola compare in settori molto diversi dalla grafica:

• Odontoiatria. Il mock-up è una prova estetica provvisoria: il dentista applica sui denti una resina modellata secondo il progetto del sorriso, così il paziente vede in bocca forma e lunghezza dei denti prima di faccette o restauri definitivi.
• Edilizia e architettura. Il mock-up è un campione in scala reale di una porzione di facciata, di un serramento o di una stanza tipo, costruito per verificare materiali, colori e dettagli prima di realizzare l'intero edificio.
• Industria. È un modello che riproduce l'aspetto di un prodotto, spesso senza le parti funzionanti, usato per valutare ergonomia e design.

In tutti i casi resta l'idea di fondo: vedere il risultato prima di produrlo.

A cosa servono i mockup

Nella grafica e nell'e-commerce i mockup di prodotto servono in cinque situazioni:

1. Schede prodotto. I negozi print-on-demand e molti shop su Etsy o Shopify vendono articoli stampati dopo l'ordine: i mockup sono le loro foto prodotto.
2. Approvazioni del cliente. Un logo su un'insegna o su una divisa viene approvato più in fretta di un file piatto, perché il cliente lo vede nel suo contesto.
3. Scelta dei colori. La stessa grafica su t-shirt bianca, grigia e nera mostra quale colore funziona prima di ordinare la merce.
4. Prevendite e lanci. Mockup di packaging e merchandising misurano l'interesse su una campagna di crowdfunding o sui social prima della produzione.
5. Immagini coerenti. Pagina di lancio, catalogo e schede prodotto usano la stessa serie di mockup.

Per le schede su Etsy, le linee guida sulle foto di Etsy consigliano immagini di almeno 2.000 pixel per lato. Usa il primo mockup per la vista più chiara su fondo neutro, poi aggiungi mockup ambientati e, se puoi, una foto reale di un campione stampato: è la prova più convincente per chi compra.

Come fare un mockup

Le strade principali sono tre:

• Modelli PSD in Photoshop. Apri il file mockup, fai doppio clic sulla miniatura dell'oggetto avanzato, incolla la grafica nel documento che si apre, salva e chiudi: la grafica compare sul prodotto con prospettiva e ombre già impostate.
• Generatori di mockup online, che partono da una libreria di scene e applicano la grafica caricata in pochi clic.
• Mockup su misura, come la foto di un campione reale o un render 3D del tuo packaging fatto da uno studio, la via più costosa e adatta alle immagini principali di un lancio.

Per un mockup di sito o di app il costo è il tempo del designer: le ore per trasformare un wireframe in una schermata ad alta fedeltà in strumenti come Figma o Adobe XD.

Creare un mockup di prodotto con Playyy

Playyy è un AI design agent con una funzione mockup integrata che applica la tua grafica su foto di t-shirt, felpe, maglioni, tazze e altri prodotti. Nell'editor apri Elements → Mockups, inserisci la foto di un capo e trascina sopra il tuo design: doppio clic per posizionare la stampa, trascina per spostarla, tira un angolo per scalarla e usa la maniglia in alto per ruotarla. Il menu Print size propone Recommended size o Fill print area, e la pagina del generatore di mockup per t-shirt mostra lo stesso flusso partendo da un caricamento.

Se cambi il colore del capo, pieghe, costine e ombre restano realistiche e la stampa resta identica al design: così il generatore di mockup per felpe crea versioni avena, antracite e blu da un solo posizionamento. Puoi anche chiedere in chat all'agente di Playyy di mettere un design su una tazza o una shopper, oppure caricare una foto del tuo prodotto: l'agente riconosce le superfici stampabili (facce piane, cilindri verticali come le tazze, fronti dei capi rivolti alla fotocamera) e vi applica la grafica, che resta modificabile.

Per un'intera linea di merchandising metti più capi sulla stessa pagina ed esportali insieme con il generatore di mockup per abbigliamento: PNG o JPG raccolti in un file ZIP per le schede prodotto, PDF per le bozze. Playyy si usa gratis per iniziare, con crediti bonus giornalieri che si rinnovano ogni giorno.

Un mockup è l'anteprima realistica e statica che sta tra l'idea e il prodotto finito. Nel web design è la schermata ad alta fedeltà tra wireframe e prototipo; nella grafica di prodotto è il tuo design sulla foto di una t-shirt, una tazza o una scatola. Usalo per vendere prima di stampare, per ottenere approvazioni più rapide e per avere immagini coerenti in ogni scheda e in ogni lancio.