Utiliser un mockup dans la bannière d’une landing page

La bannière est l’endroit où la plupart décident de continuer à lire. Un mockup y a une mission : prouver que le produit existe et montrer de quel type de produit il s’agit dans la première seconde, avant qu’un mot ne soit lu. Tout le reste — export et placement — découle de ce délai.

Recadrez dans l’appareil plutôt que de le réduire

Un téléphone entier flottant dans la bannière paraît petit sur écran large et son interface devient illisible. Recadrez pour que l’appareil déborde en bas ou sur le côté de la section — la courbe supérieure reconnaissable suffit à dire téléphone — et laissez l’écran occuper de la surface. Les mockups recadrés s’adaptent aussi mieux d’un point de rupture à l’autre, car vous déplacez le recadrage au lieu de réduire toute l’image.

Image fixe d’abord, vidéo si elle mérite son poids

Une vidéo de mockup lancée automatiquement dans la bannière est efficace et coûteuse : elle retarde le premier affichage, consomme de la bande passante sur mobile et vide la batterie. Si vous en mettez une, gardez-la courte et muette, faites-la boucler, prévoyez une image d’attente pour que quelque chose apparaisse tout de suite, et désactivez-la sur petits écrans. Souvent, une bannière fixe plus une courte vidéo plus bas convertit aussi bien et charge en une fraction du temps.

Accordez la lumière du mockup à la page

Un appareil rendu sur fond sombre posé sur une page blanche aura toujours l’air collé, même avec un fond transparent, car la lumière sur le corps suppose un environnement sombre. Rendez le mockup contre la valeur réellement utilisée par votre page. C’est l’argument pratique pour conserver le projet de mockup et pas seulement l’image exportée : à la refonte, vous refaites le rendu au lieu de retoucher.