Presenta capturas de pantalla en mockups de navegador y dispositivos

Prepara la captura de pantalla

Empieza con la captura más limpia disponible. Elimina alertas temporales, datos personales y detalles de estado accidentales antes de colocarla. Mantén la interfaz importante cerca del centro, porque un marco o tratamiento en perspectiva puede reducir la zona legible. Si muestras un flujo, elige una pantalla decisiva o crea una serie pequeña con la misma lógica de recorte.

Usa un estilo de navegador cuando el contenido sea una página web o una vista parecida a un escritorio. Usa un estilo de teléfono o tableta cuando el diseño táctil y la lectura vertical sean centrales. Son marcos decorativos: no abren un navegador, no cargan una URL ni cambian la captura. Esta distinción ayuda a establecer expectativas honestas sobre la imagen terminada.

1. Elige una captura con un sujeto claro y elimina el contenido sensible.
2. Decide si el marco de navegador, iPhone o iPad explica mejor el contexto.
3. Comprueba que el texto y los controles importantes seguirán visibles dentro del marco.

Coloca el marco y elige la escena

Selecciona un fondo que apoye la captura. Un color liso y tranquilo funciona para documentar; una foto suave o una escena natural puede hacer más cálida una presentación de producto. Coloca el mockup con espacio suficiente alrededor para ver el borde del marco. En una ventana de navegador, deja reconocibles sus elementos sin que los controles decorativos compitan con la página.

Mantén creíble la perspectiva. Una ligera inclinación puede aportar energía, pero una rotación fuerte dificulta leer el texto pequeño. Alinea el mockup con la dirección visual del fondo. Un marco inclinado hacia el espacio abierto parece intencionado; uno que apunta a un objeto recargado se siente encajonado.

Lee también: cómo añadir un marco de iPhone a una captura

1. Elige un fondo liso o una imagen propia con contraste suficiente.
2. Coloca el marco decorativo y deja margen alrededor de su borde exterior.
3. Prueba primero una versión recta y compara cualquier inclinación al tamaño real de uso.

Comprueba la legibilidad y la credibilidad

Aléjate con el zoom y pregunta qué ve primero el espectador. La captura debe seguir siendo el sujeto y el marco debe indicar qué tipo de pantalla es. Si gana el fondo, simplifícalo o reduce su contraste. Si desaparece la captura, haz más grande el mockup o usa una escena más tranquila.

Inspecciona esquinas, texto y bordes. Recortar un marco demasiado cerca puede parecer accidental; dejar una franja estrecha y desigual de fondo puede distraer más que un recorte deliberado. Mantén las capturas en su proporción original cuando sea posible y evita estirar un icono circular o una persona en una foto.

Los estilos de marco y las condiciones Pro pueden cambiar entre versiones de la app, así que comprueba el panel Mockups actual antes de planificar una serie.

1. Revisa la jerarquía y después el texto y los bordes del marco.
2. Compara el resultado a tamaño completo y al tamaño usado en una publicación o artículo.
3. Añade un pie breve fuera de la captura si el espectador necesita contexto.

Soluciona problemas habituales de los mockups

Si la captura parece estirada, sustitúyela por la proporción original y vuelve a encajarla. Si el texto es demasiado pequeño, recorta la zona significativa o usa un marco mayor. Si el marco y el fondo tienen colores similares, sepáralos con otro fondo o un tratamiento de marco más discreto. Si la imagen parece inclinada sin motivo, vuelve a una alineación recta.

Si el fondo propio está recargado, no ocultes la captura con una decoración intensa. Mueve el mockup a una zona más tranquila, reduce la competencia visual o elige un color sencillo. Exporta una prueba y revisa el resultado guardado antes de enviarlo a un cliente o publicarlo.

1. Corrige la proporción antes de cambiar la escala.
2. Soluciona la legibilidad con recorte y jerarquía antes de añadir decoración.
3. Previsualiza una vez la imagen guardada a su tamaño real de destino.