Usar un mockup en la cabecera de una landing

La cabecera es donde la mayoría decide si sigue leyendo. Un mockup allí tiene una función: demostrar que el producto existe y mostrar de qué tipo de producto se trata en el primer segundo, antes de que se lea una sola palabra. Todo lo demás — cómo exportas y colocas la imagen — se deriva de ese plazo.

Recorta dentro del dispositivo en vez de encogerlo

Un móvil entero flotando en la cabecera se ve pequeño en pantallas anchas y su interfaz se vuelve ilegible. Recorta de modo que el dispositivo se salga por abajo o por un lado de la sección — la curva superior reconocible basta para decir móvil — y deja que la pantalla ocupe superficie real. Los mockups recortados además escalan mejor entre puntos de ruptura, porque puedes desplazar el recorte en vez de encoger toda la imagen.

Primero imagen fija; vídeo solo si se gana su peso

Un vídeo de mockup que arranca solo en la cabecera es eficaz y caro: retrasa el primer pintado, gasta ancho de banda en móvil y consume batería. Si lo usas, hazlo corto y sin sonido, ponlo en bucle, añade una imagen de portada para que algo aparezca al instante y desactívalo en pantallas pequeñas. A menudo una cabecera fija más un vídeo corto más abajo convierte igual de bien y carga en una fracción del tiempo.

Haz coincidir la luz del mockup con la página

Un dispositivo renderizado sobre fondo oscuro colocado en una página blanca siempre parecerá pegado, incluso con fondo transparente, porque la luz sobre el cuerpo implica un entorno oscuro. Renderiza el mockup contra el valor que usa tu página de verdad. Ese es el argumento práctico para conservar el proyecto del mockup y no solo la imagen exportada: cuando rediseñes el sitio, vuelves a renderizar en lugar de retocar.