A cosa serve un mockup
Uno screenshot da solo è piatto e senza contesto. Lo stesso screenshot dentro un telefono mostra un prodotto che potresti tenere in mano. Sembra poco. Su una pagina dello store o in una pubblicità, però, spesso è la differenza tra chi scorre oltre e chi tocca.
I mockup si usano:
- negli screenshot dell'App Store e di Google Play;
- nelle immagini di apertura e nei video di prodotto dei siti;
- nei post su Instagram, TikTok e LinkedIn;
- nelle presentazioni ai clienti e nei portfolio;
- nei pitch deck per gli investitori.
Per chi progetta c'è anche un lato pratico. Un cliente che guarda un PNG piatto prima o poi chiede: "E sul telefono come viene?". Il mockup risponde prima della domanda.
I tipi di mockup
Oggi se ne vedono tre, e ognuno è forte in qualcosa di diverso.
Mockup piatto (2D)
Lo screenshot sta in una cornice di dispositivo vista di fronte. Si fa in fretta, pesa poco e per gli store spesso basta. Però è tutto dallo stesso angolo, e una pagina piena di mockup 2D diventa presto monotona.
Mockup fotografico
Qualcuno fotografa un dispositivo vero, per esempio un telefono in mano o un portatile su una scrivania. Si segna l'area dello schermo e il tuo design ci viene messo con la prospettiva giusta. Luce e ambiente sono veri, quindi il risultato è molto naturale: per questo funziona così bene sui social e sui siti.
Mockup 3D e video mockup
Un modello tridimensionale del dispositivo. Ruoti il telefono in qualsiasi angolo, sposti la luce e l'ombra la segue. La vera forza è il movimento: il dispositivo gira o il portatile si apre mentre la tua app scorre sullo schermo. Per i video di lancio e le anteprime dell'App Store è ormai il tipo più usato.
Mockup, wireframe e prototipo
Si confondono di continuo. Il wireframe è lo scheletro di una schermata: riquadri, linee, testo segnaposto, niente colore. Serve a mettersi d'accordo su cosa va dove. Il prototipo è cliccabile: tocchi un pulsante e si apre la schermata successiva. È quello che si fa provare agli utenti.
Il mockup mostra il design finito, o quasi, in un contesto realistico. Non si clicca: è fatto per essere guardato.
Come si crea un mockup
Prima c'erano due strade: aprire un PSD con oggetti avanzati in Photoshop o costruire una scena in un programma 3D come Blender o Cinema 4D. La prima è veloce ma limitata. La seconda è potente ma richiede settimane per impararla.
Oggi ci sono app fatte apposta. In Mockup Center funziona così:
- Trascina lo screenshot o la registrazione dello schermo nell'app.
- Scegli un dispositivo (iPhone, Galaxy, iPad, MacBook, Apple Watch e altri) o apri un modello animato.
- Regola angolo, luce e sfondo ed esporta in PNG o video.
La guida come creare un mockup spiega ogni passaggio.
Cosa rende buono un mockup
Dopo aver guardato tante pagine degli store e tanti post di lancio, quelli buoni hanno sempre le stesse abitudini:
- Lo screenshot è nitido. Uno schermo sfocato rende economica anche la scena 3D più curata. Fallo alla risoluzione vera del dispositivo.
- La barra di stato è pulita: 9:41, batteria piena, nessuna notifica. È un dettaglio, ma si nota.
- Lo sfondo non fa concorrenza al prodotto.
- Ogni immagine dice una cosa sola, con una funzione e un titolo.
