Mettere lo screenshot dentro un mockup iPhone

Uno screenshot grezzo è un rettangolo di interfaccia. Il mockup dà a quel rettangolo un corpo, un’ombra e un posto dove appoggiarsi, ed è ciò che lo fa leggere come prodotto e non come documento. La meccanica è semplice; quello che si sbaglia sono le proporzioni, il raggio degli angoli e l’aria attorno al dispositivo.

Parti da uno screenshot nelle proporzioni native

Scatta lo screenshot su un dispositivo o un simulatore che corrisponda alla cornice che userai, così le proporzioni sono già giuste. Se allarghi uno screenshot 16:9 dentro una cornice 19,5:9, tutto si deforma in modo sottile e il risultato appare sbagliato in un modo che si percepisce senza saperlo nominare. Se hai solo uno screenshot nel formato sbagliato, ritaglialo invece di stirarlo: perdere una striscia di un elenco non si nota, un testo deformato sì.

Lascia angoli e notch alla cornice

Non arrotondare gli angoli dello screenshot in un editor prima di inserirlo. La cornice maschera già lo schermo, e angoli pre-arrotondati creano un doppio bordo o un alone. Lo stesso vale per la barra di stato e la dynamic island: se il mockup le disegna, nascondile nello screenshot, altrimenti avrai due orologi. Un buon strumento offre interruttori per questo invece di costringerti a ritoccare l’originale.

Lascia aria, poi scegli lo sfondo

Un dispositivo attaccato al bordo della tela appare stretto e si ritaglia male ovunque. Lascia un margine generoso, poi scegli uno sfondo con un solo compito: un gradiente morbido per gli screenshot di store, un colore piatto di marca per i social, la trasparenza per un’intestazione web dove deve vedersi lo sfondo della pagina. Passa a una foto solo se l’app parla del mondo fisico, altrimenti competerà con l’interfaccia per l’attenzione.