Presenta screenshot in mockup di browser e dispositivi

Prepara lo screenshot

Inizia dalla cattura più pulita disponibile. Rimuovi avvisi temporanei, dati personali e dettagli accidentali della barra di stato prima di inserirla. Mantieni l'interfaccia importante vicino al centro, perché una cornice o una prospettiva possono ridurre l'area leggibile. Se mostri un flusso di lavoro, scegli una schermata decisiva oppure crea una piccola serie con la stessa logica di ritaglio.

Usa uno stile browser quando il contenuto è una pagina web o una vista simile a un desktop. Usa lo stile telefono o tablet quando sono centrali il layout touch e la lettura verticale. Sono cornici decorative: non aprono un browser, non caricano un URL e non modificano lo screenshot. Questa distinzione aiuta a comunicare aspettative corrette sull'immagine finita.

1. Scegli uno screenshot con un soggetto chiaro e rimuovi i contenuti sensibili.
2. Decidi se una cornice browser, iPhone o iPad spiega meglio il contesto.
3. Controlla che testo e comandi importanti restino visibili dentro la cornice.

Posiziona la cornice e scegli la scena

Scegli uno sfondo che sostenga lo screenshot. Un colore pieno e tranquillo funziona per la documentazione; una foto delicata o una scena naturale può rendere più calda una presentazione di prodotto. Posiziona il mockup lasciando abbastanza spazio intorno da vedere il bordo della cornice. In una finestra browser, fai riconoscere gli elementi del browser senza permettere ai comandi decorativi di competere con la pagina.

Mantieni credibile la prospettiva. Una leggera inclinazione può aggiungere energia, ma una rotazione forte rende difficile leggere il testo piccolo. Allinea il mockup alla direzione visiva dello sfondo. Una cornice inclinata verso uno spazio libero sembra intenzionale; una rivolta verso un oggetto affollato appare compressa.

Leggi anche: come aggiungere una cornice iPhone a uno screenshot

1. Scegli uno sfondo semplice o personale con contrasto sufficiente.
2. Posiziona la cornice decorativa e lascia un margine intorno al bordo esterno.
3. Prova prima la versione dritta, poi confronta eventuali inclinazioni alla dimensione di condivisione.

Controlla leggibilità e credibilità

Riduci lo zoom e chiediti cosa nota per prima una persona. Lo screenshot deve restare il soggetto, mentre la cornice comunica che tipo di schermata è. Se lo sfondo prevale, semplificalo o riducine il contrasto. Se lo screenshot scompare, ingrandisci il mockup o usa una scena più discreta.

Controlla angoli, testo e bordi. Ritagliare una cornice troppo stretta può sembrare accidentale; lasciare una striscia sottile e irregolare di sfondo può distrarre più di un ritaglio deciso. Mantieni, quando possibile, le proporzioni originali degli screenshot ed evita di deformare un'icona circolare o una persona in una foto.

Gli stili delle cornici e le condizioni Pro possono cambiare tra versioni dell'app: controlla quindi il pannello Mockup attuale nell'app prima di pianificare una serie.

1. Controlla prima la gerarchia, poi esamina testo e bordi della cornice.
2. Confronta il risultato a grandezza naturale e alla dimensione usata in un post o articolo.
3. Aggiungi una breve didascalia fuori dallo screenshot se serve contesto.

Risolvi i problemi comuni dei mockup

Se lo screenshot appare deformato, sostituiscilo con quello nelle proporzioni originali e adattalo di nuovo. Se il testo è troppo piccolo, ritaglia l'area significativa o usa una cornice più grande. Se cornice e sfondo hanno colori simili, crea separazione con uno sfondo diverso o una cornice più sobria. Se l'immagine sembra inclinata senza motivo, torna all'allineamento dritto.

Se lo sfondo con una tua immagine è affollato, non nascondere lo screenshot con decorazioni pesanti. Sposta il mockup in una zona più tranquilla, riduci la competizione visiva o scegli un colore più semplice. Esporta una prova e controlla il risultato realmente salvato prima di inviarlo a un cliente o pubblicarlo.

1. Correggi le proporzioni prima di cambiare la scala.
2. Risolvi la leggibilità con ritaglio e gerarchia prima di aggiungere decorazioni.
3. Visualizza una volta l'immagine salvata alla reale dimensione di destinazione.