Mockup di un dispositivo

Un mockup di un dispositivo inserisce uno screenshot in una cornice realistica, come un telefono, un portatile o un tablet, per presentarlo nel suo contesto in materiali promozionali, presentazioni o documentazione.

Related workflow terms: Flusso di lavoro per gli screenshot, Screenshot responsive.

Perché i mockup sono utili

Uno screenshot grezzo è un rettangolo senza contesto visivo. Chi lo guarda vede i pixel, ma non capisce subito dove si trovi l'interfaccia: app mobile, pannello desktop o esperienza tablet. Una cornice riconoscibile risponde immediatamente.

Il contesto svolge una funzione concreta. Nel marketing comunica il supporto di una piattaforma senza aggiungere testo. Nelle presentazioni indirizza l'attenzione sul prodotto invece che sullo sfondo della diapositiva. Nella documentazione chiarisce a quale piattaforma si riferiscono le istruzioni.

I mockup rendono inoltre coerenti le risorse. Se ogni screenshot di una presentazione compare nella stessa cornice di portatile e con la stessa inclinazione, il risultato appare curato anche quando le immagini sono state acquisite in momenti diversi.

Cornici comuni

• Smartphone — la scelta più diffusa per promuovere app mobili, creare schede negli app store e annunci social. Sono comuni sia le sagome iPhone sia quelle Android.
• Portatili — usate per prodotti SaaS, pannelli web e software desktop. Le cornici MacBook sono molto diffuse, mentre un portatile generico evita di favorire una piattaforma.
• Tablet — utili per app destinate espressamente ai tablet o per mostrare layout responsive a una dimensione intermedia.
• Finestre del browser — una barra minimale con indirizzo e pulsanti, senza l'intero dispositivo. Adatta alle app web quando conta il contesto del browser, non l'hardware.
• Composizioni con più dispositivi — riuniscono telefono, tablet e portatile per mostrare il comportamento responsive a diversi breakpoint.

Come creare un mockup

Il metodo più semplice usa un modello. Parti da una cornice PNG o SVG con l'area dello schermo trasparente e inserisci lì lo screenshot. Molti strumenti di design integrano questa funzione; i generatori dedicati automatizzano allineamento e ridimensionamento.

Se produci mockup regolarmente, l'automazione elimina il passaggio manuale. Uno strumento di acquisizione che supporta le cornici può applicarle mentre crea lo screenshot, senza passare da un editor. Il vantaggio cresce quando servono decine di immagini per un lancio o più dimensioni per gli app store.

La corrispondenza della risoluzione è essenziale. Le dimensioni in pixel dello screenshot devono coincidere con l'area dello schermo nella cornice. Un'immagine piccola in una cornice ad alta risoluzione appare sfocata; una troppo grande e poi ridotta perde i dettagli fini. Acquisire subito alla risoluzione corretta evita entrambi i problemi.

In pratica, usa una cornice soltanto quando serve il contesto di presentazione. Per documentazione e QA, lo screenshot senza decorazioni è spesso più chiaro; per lanci e app store, la cornice può valere lo spazio occupato.

Errori comuni

• Usare dispositivi superati. La sagoma di un telefono vecchio di tre generazioni fa sembrare poco aggiornato il prodotto, o almeno il suo marketing. Scegli cornici attuali.
• Non far coincidere le risoluzioni. Inserire uno screenshot largo 750 pixel in una cornice progettata per 1170 pixel produce sfocatura visibile. Adegua l'acquisizione all'area dello schermo.
• Abusare delle prospettive 3D. Le cornici molto inclinate funzionano nei banner, ma rendono l'interfaccia più difficile da leggere. Usale per le panoramiche e preferisci una vista frontale quando conta il contenuto.
• Ignorare le aree sicure. Tacche, angoli arrotondati e barre di stato possono coprire parte dello screenshot. Controlla che gli elementi importanti non finiscano sotto queste zone.