Mockups de portátil que hacen creíble una app web

El mockup de portátil es la forma habitual de decir que algo funciona en el navegador. Funciona porque el marco aporta un contexto que la captura sola no tiene: escala, superficie y punto de vista. El riesgo es que una pantalla de portátil es ancha y baja, así que la interfaz se vuelve una mancha a tamaño pequeño si no planificas la captura pensando en eso.

Captura a un viewport sensato, no a tu monitor entero

Ajusta el navegador a algo como 1440 × 900 antes de capturar. Una captura de un monitor ultrapanorámico metida en un marco de portátil dibuja el texto a la mitad de tamaño y convierte tu diseño en textura. Si a ese ancho la página tiene mucho espacio horizontal vacío, aumenta el zoom de la página en vez de reducir el marco: el mockup debe mostrar el diseño que ve un visitante real, a un tamaño legible.

Ángulo y tapa: poco es suficiente

Una inclinación leve da profundidad; un ángulo fuerte convierte la pantalla en un paralelogramo y mata la legibilidad. Si el mockup anima la tapa, abrirla desde casi cerrada es una entrada de dos segundos muy eficaz para vídeo, pero en una imagen fija deja la tapa casi vertical y la cámara casi frontal. Cualquier perspectiva que acorte un lado de la pantalla más de un diez por ciento te cuesta más legibilidad de la atmósfera que aporta.

Ánclalo con una sombra y para ahí

La sombra de contacto suave bajo la base es lo que impide que el portátil flote. Mantenla de bajo contraste y pegada al cuerpo; la mancha grande y difusa bajo un dispositivo es la firma visual de una plantilla de 2013. Si el fondo es oscuro, un filo de luz sutil en el borde superior ancla mejor que una sombra. Una sola decisión de iluminación aplicada a todo el juego gana a ajustar la luz imagen por imagen.