Des mockups de portable qui rendent une app web crédible

Le mockup de portable est la manière habituelle de dire que quelque chose tourne dans le navigateur. Il fonctionne parce que le cadre apporte un contexte que la capture seule n’a pas : échelle, surface, point de vue. Le risque : un écran de portable est large et bas, donc l’interface à l’intérieur devient floue en petite taille si vous ne préparez pas la capture en conséquence.

Capturez une fenêtre raisonnable, pas tout l’écran

Réglez le navigateur vers 1440 × 900 avant de capturer. Une capture prise sur un moniteur ultra-large et compressée dans un cadre de portable dessine le texte à la moitié de sa taille et transforme votre mise en page en texture. Si la page laisse beaucoup de blanc horizontal à cette largeur, zoomez la page plutôt que de réduire le cadre : le mockup doit montrer ce que voit un vrai visiteur, à une taille lisible.

Angle et écran : un peu suffit

Une légère inclinaison donne de la profondeur ; un angle marqué transforme l’écran en parallélogramme et tue la lisibilité. Si le mockup anime l’ouverture, partir d’un écran presque fermé fait une entrée de deux secondes efficace en vidéo, mais pour une image fixe gardez l’écran presque vertical et la caméra presque de face. Toute perspective qui raccourcit un côté de l’écran de plus de dix pour cent coûte plus en lisibilité qu’elle n’apporte en atmosphère.

Ancrez avec une ombre, puis arrêtez-vous

L’ombre de contact douce sous la base empêche le portable de flotter. Gardez-la peu contrastée et proche du corps ; la grande tache floue sous un appareil est la signature visuelle d’un gabarit de 2013. Sur fond sombre, un liseré de lumière sur l’arête supérieure ancre mieux qu’une ombre. Une seule décision d’éclairage appliquée à tout le jeu vaut mieux qu’un éclairage réglé image par image.