Mockup: significato, cos'è e come farne uno per il tuo logo

Il significato di mockup è «modello»: una riproduzione realistica, spesso di qualcosa che non esiste ancora. Nel web design è la schermata disegnata di un sito o di un’app; per un logo è la sua immagine su una maglietta, per scegliere dimensione, posizione e colore prima di stampare.

Qual è il significato di mockup?

Mockup significa modello dimostrativo: una riproduzione che mostra com’è fatto un oggetto o un progetto senza averne tutte le funzioni. Wikipedia lo definisce una realizzazione a scopo illustrativo o espositivo di un oggetto o di un sistema, senza le complete funzioni dell’originale, in scala reale oppure diversa.

La parola viene dall’inglese. Secondo il Wiktionary inglese, che cita il Webster’s New World College Dictionary, il sostantivo mock-up è attestato intorno al 1915-1920: deriva dal verbo to mock up («realizzare un modello»), per imitazione del francese maquette.

Qui ci interessano due usi della parola: per chi progetta siti e app è la schermata disegnata con i colori definitivi, per chi fa stampare le divise della squadra, le felpe dell’azienda o il merch della propria marca è il logo sul capo. L’idea è la stessa: vedere prima di produrre.

In odontoiatria, invece, il mock-up digitale serve a mostrare al paziente il risultato finale di un trattamento: è un altro mestiere, e qui non ce ne occupiamo.

Che differenza c’è tra wireframe, mockup e prototipo?

Il wireframe fissa la struttura di una pagina, il mockup ne mostra l’aspetto definitivo, il prototipo ne simula già il funzionamento. Il wireframe è un elaborato «low fidelity» che stabilisce dove vanno i blocchi: per disegnarlo possono bastare carta e penna. Il mockup parte da lì e disegna la pagina con un programma di grafica, non in HTML. Il prototipo, invece, offre almeno una parte delle funzioni e permette di provarle.

Cos’è un mockup del logo su una maglietta?

Il mockup di un logo è un’immagine realistica del logo sull’oggetto a cui è destinato: una maglietta, una felpa, una tote bag, un’insegna. Nasce da una foto o da un modello 3D, quindi non si stampa niente e non si spreca niente. Per un capo ne trovi di due tipi:

• Mockup fotografico: il logo è applicato sulla foto di un capo vero, spesso fotografato su un manichino invisibile («ghost mannequin»), che ne conserva il volume senza nessuno dentro. Nei migliori il logo segue le pieghe del tessuto e ne riprende luci e ombre.
• Mockup 3D: un modello che giri con il mouse o con il dito per vedere fronte, fianchi e retro. È il più comodo per giudicare una stampa sulla nuca o sulla schiena.

Il campione fisico non è un mockup: è un capo vero, stampato in serigrafia o in DTF oppure ricamato, che puoi chiedere al laboratorio prima dell’ordine completo. È l’unico che mostra davvero l’inchiostro o il filo sul tessuto.

A cosa serve un mockup?

Un mockup serve a scoprire in un’immagine gli errori che sul tessuto costerebbero cari: un logo troppo grande, troppo in basso, o che sparisce nel colore della maglietta. La voce inglese di Wikipedia lo dice in modo semplice: aiuta a vedere come tutte le scelte di design funzionano insieme. Ha tre usi:

1. Scegliere dimensione, posizione e colore. Sullo schermo un logo può sembrare enorme; su una felpa XL può diventare un francobollo. E un logo blu scuro su una maglietta blu navy quasi scompare.
2. Farlo approvare. Il direttivo della squadra, il socio o il cliente dicono sì più in fretta alla foto di una maglietta che al nome di un file.
3. Vendere prima di stampare. Chi lancia una piccola collezione può mostrare i mockup, raccogliere i preordini e far stampare solo i pezzi venduti. Va detto chiaramente che si tratta di un’anteprima: il capo vero può differire dall’immagine.

Come fare un mockup di una maglietta gratis?

Per fare un mockup di una maglietta gratis basta un generatore nel browser: apri il logo, scegli il capo e il colore, poi sistemi posizione e dimensione. Il nostro generatore di mockup gratis lo fa senza registrazione e senza installare nulla:

• Prodotto: t-shirt, felpa con cappuccio, felpa girocollo o tote bag.
• Colore del capo: nove colori, dal bianco al blu navy, dal verde bottiglia al sabbia, più qualsiasi codice hex se il tessuto ha una tinta precisa.
• Area di stampa: lato cuore, centro petto, retro o nuca. Sulla felpa con cappuccio la nuca manca, perché la copre il cappuccio; la tote bag si stampa solo al centro, sul davanti.
• Dimensione del logo: un cursore, finché le proporzioni ti convincono.
• Capi scuri: un logo nero o scuro a un solo colore diventa bianco in automatico, come la versione in negativo che si usa sui tessuti scuri. Alla voce «Colore di stampa» scegli comunque tu: originale, nero o bianco.
• Foto o 3D: l’anteprima in foto realistica oppure la vista «3D 360°», in cui fai ruotare il capo.

Il logo si apre con il pulsante «Carica il tuo logo» e viene letto sul tuo dispositivo: l’anteprima si calcola nel browser e non parte nulla, a meno che tu non chieda via email il mockup in HD, anche questo gratis. Puoi anche condividere un’anteprima del mockup.

Come si fa un mockup con Photoshop?

Con Photoshop un mockup si fa mettendo il logo su un livello sopra la foto del prodotto, deformandolo perché segua la superficie e fondendolo con il tessuto. Per l’ultimo passaggio è comodo il metodo di fusione Moltiplica, che secondo Adobe scurisce i colori mantenendo intatte le ombre: su una maglietta chiara, le pieghe restano visibili anche sotto un logo scuro.

Se non vuoi cercare la foto giusta, esistono i modelli di mockup: file PSD a livelli con uno spazio riservato al tuo design, dove deformazione e ombre sono già impostate. Serve comunque Photoshop o un altro programma che apra i PSD.

Cosa non garantisce un mockup?

Un mockup non garantisce né i colori né la resa sul tessuto: è un’immagine su uno schermo, non una prova di stampa. Tre limiti da tenere a mente:

1. I colori dello schermo. Ogni periferica riproduce la sua gamma di colori, il gamut, e quella della stampa, che di solito lavora in quadricromia (CMYK), è più piccola e meno satura di quella di uno schermo. Un verde acceso sul telefono può uscire più spento sulla maglietta.
2. Il tessuto. Sullo schermo non senti lo spessore dell’inchiostro e non vedi come rendono i dettagli più sottili su un tessuto a trama grossa.
3. Il file. Il generatore toglie lo sfondo bianco solo nell’anteprima: l’opzione «Rimuovi lo sfondo bianco», già spuntata, compare quando i quattro angoli dell’immagine sono chiari e dello stesso colore. Il tuo file resta com’è, con il suo rettangolo bianco: un mockup pulito non prova che il logo sia pronto per la stampa. Come ottenere un file nitido e senza sfondo lo spiega la guida su come vettorializzare un’immagine.

Nel glossario della stampa di Wikipedia, la prova contrattuale è eseguita con il processo e sul supporto della stampa finale, e serve al cliente per approvare il lavoro. Il mockup ti aiuta a decidere; la prova, quando la tipografia te la manda, serve a dare il via: confrontala con il mockup prima di approvarla.

Come ottieni un logo pulito da mettere nel mockup?

Un logo pulito per il mockup lo ottieni gratis con Depixelise: carichi l’immagine che hai, anche un JPG sgranato, e il logo viene vettorializzato, cioè ridisegnato come file vettoriale (fatto di forme invece che di quadratini colorati), senza sfondo. Il kit per la stampa contiene quattro file, ognuno con il suo uso:

• il PNG trasparente da 2000 px va dritto nel generatore di mockup, senza sfondo da nascondere;
• l’SVG è il file vettoriale da girare alla tipografia, al laboratorio di serigrafia o a chi taglia il vinile termoadesivo;
• la versione monocromatica serve per il ricamo a un colore, l’incisione o il timbro;
• la versione in negativo, tutta bianca, è quella per le magliette nere o blu navy.

Depixelise accetta PNG, JPG, WebP o SVG fino a 10 MB. In una decina di secondi il risultato compare in grande e puoi zoomare fino all’800% per controllarlo. Via email ricevi il kit per la stampa, 100% gratis, senza account né filigrana. Se l’immagine di partenza è molto piccola, viene ingrandita in automatico e le forme vengono ricostruite: confronta le lettere con l’originale. Depixelise non stampa nulla: prepara il file per chi stampa.

FAQ

Si scrive mockup o mock-up?

Mockup e mock-up sono corretti tutti e due: la voce di Wikipedia in italiano si apre proprio con «un mockup, o mock-up». In inglese la forma staccata, mock up, è il verbo. In italiano la parola è maschile e non cambia al plurale: il mockup, i mockup.

Si possono usare i mockup gratis per vendere?

Un modello di mockup gratuito si può usare per vendere solo se la sua licenza lo consente. Nelle licenze Creative Commons, la clausola NC ammette solo scopi non commerciali e la clausola BY chiede di indicare l’autore. Controlla le condizioni nella pagina di download prima di mettere il mockup in un negozio online o in un preventivo: la licenza riguarda il modello, non il tuo logo.

Un mockup mostra come verrà un ricamo?

Un mockup mostra dove andrà il ricamo e quanto sarà grande, ma un’immagine piatta non rende il rilievo dei punti né dice se una scritta piccola resterà leggibile una volta ricamata. Per un ordine importante, chiedi al laboratorio di ricamarti un pezzo di prova.

La tipografia ti prepara il mockup?

La tipografia non prepara sempre il mockup al posto tuo: alcune allegano un’anteprima al preventivo, altre mandano soltanto la bozza da approvare poco prima della produzione. Informati quando chiedi il preventivo. Se arrivi con il tuo mockup, le scelte sono già fatte e ti risparmi parecchi botta e risposta.

Si può fare un mockup dal telefono?

Sì, un mockup si può fare dal telefono: basta un generatore che funzioni nel browser, senza installare nulla. Nel nostro, la vista 3D richiede un browser recente; su un telefono più vecchio resta l’anteprima in foto.