Mockup di laptop che rendono credibile un’app web

Il mockup di laptop è il modo abituale per dire che qualcosa gira nel browser. Funziona perché la cornice porta un contesto che lo screenshot da solo non ha: scala, superficie, punto di vista. Il rischio è che uno schermo di laptop sia largo e basso, quindi l’interfaccia dentro diventa una macchia a dimensioni ridotte se non pianifichi la cattura di conseguenza.

Cattura una finestra sensata, non tutto il monitor

Imposta il browser intorno a 1440 × 900 prima di catturare. Uno screenshot preso da un monitor ultrawide e compresso in una cornice di laptop disegna il testo a metà misura e trasforma il layout in texture. Se a quella larghezza la pagina lascia molto spazio orizzontale vuoto, ingrandisci la pagina invece di ridurre la cornice: il mockup deve mostrare il layout che vede un visitatore reale, a una misura leggibile.

Angolo e schermo: poco basta

Una lieve inclinazione dà profondità; un angolo forte trasforma lo schermo in un parallelogramma e uccide la leggibilità. Se il mockup anima l’apertura, partire da schermo quasi chiuso è un ingresso di due secondi molto efficace in video, ma per un fermo immagine tieni lo schermo quasi verticale e la camera quasi frontale. Qualsiasi prospettiva che accorcia un lato dello schermo di oltre il dieci per cento costa più leggibilità di quanta atmosfera aggiunga.

Ancoralo con un’ombra, poi fermati

L’ombra di contatto morbida sotto la base è ciò che impedisce al laptop di fluttuare. Tienila poco contrastata e vicina al corpo; la grande macchia sfocata sotto un dispositivo è la firma visiva di un template del 2013. Su sfondo scuro, un filo di luce lungo il bordo superiore ancora meglio di un’ombra. Una sola decisione di illuminazione applicata a tutto il set batte una luce regolata immagine per immagine.