Mockup de dispositivo
Qué es un mockup de dispositivo, cómo colocar capturas dentro de marcos de dispositivo y dónde lo usan los equipos.
Un mockup de dispositivo es una imagen que muestra una captura dentro de un marco de dispositivo dibujado o fotografiado, como un teléfono, una tableta, una laptop o una ventana de navegador. El marco indica al espectador en qué dispositivo se ejecuta la interfaz.
Cada plantilla de mockup tiene un área de pantalla con un tamaño y una relación de aspecto fijos. La captura debe coincidir con esa área; si no, se estira, se recorta o queda rodeada de espacio vacío. Las plantillas basadas en fotografías también aplican perspectiva, de modo que la captura se deforma para encajar en la pantalla inclinada.
Un mockup es una imagen de presentación. No es lo mismo que la emulación de dispositivos, que cambia cómo se renderiza la propia página.
Por qué importan los mockups de dispositivo
Una captura de teléfono sin marco en una página web puede parecer un rectángulo alto y arbitrario. El marco comunica a la vez el tamaño de la pantalla y el contexto. También da a las capturas mixtas un aspecto uniforme en una página de inicio o en una presentación.
Marcos de dispositivo habituales
- Teléfonos en orientación vertical, con o sin la zona de la muesca o de Dynamic Island.
- Tabletas en orientación vertical u horizontal.
- Laptops con la pantalla en ángulo.
- Ventanas de navegador con una barra de direcciones sencilla, usadas para capturas de aplicaciones web.
Cómo crear mockups de dispositivo
- Captura la pantalla con la relación de aspecto de la pantalla del marco.
- Abre una plantilla de mockup en una herramienta de diseño o en un generador de mockups.
- Coloca la captura en el área de pantalla y revisa las esquinas y la muesca.
- Exporta con el tamaño que necesita el destino.
En Temposhot, el selector Custom Area tiene preajustes de teléfono como iPhone 17 Pro (402×874), iPhone 17 Pro Max (440×956), Galaxy S25 (360×780) y Pixel 9 (360×808). Para páginas web, Website Capture tiene el tamaño de dispositivo Mobile de 390×844.
Errores comunes
- Usar una captura con una relación distinta, de modo que el marco corta el contenido.
- Ampliar una captura pequeña para llenar un marco grande, lo que difumina el texto.
- Colocar un mockup donde una tienda espera una captura sin marco. Revisa los requisitos actuales de la tienda.
- Usar marcos de dispositivo desactualizados que ya no coinciden con el hardware actual.
¿Tomas las mismas capturas una y otra vez?
Captura todas las pantallas de tamaño teléfono en una sola ejecución con la automatización de capturas en Mac.
Preguntas frecuentes
¿Las tiendas de apps aceptan mockups?
Las reglas cambian según la tienda y con el tiempo. Lee las directrices actuales de capturas de la tienda antes de enviar la app.
¿Qué resolución debe tener la captura?
Como mínimo, el tamaño en píxeles del área de pantalla del marco. Una captura Retina suele proporcionar píxeles suficientes.
Fuentes
Recursos relacionados
- Fuentes de captura: preajustes de Custom Area.
- Social Image Composer: coloca una captura sobre un fondo con margen.
- Aspect Ratio Calculator: ajusta la relación de la pantalla de un marco.
¿Repites las mismas capturas de pantalla una y otra vez?
Temposhot captura una pantalla, una ventana o un área con temporizador y exporta el conjunto como PDF, imágenes, ZIP o MP4. Las herramientas gratuitas para navegador solo sirven para imágenes sueltas.
Recursos relacionados
Términos relacionados
- Relación de aspectoQué significa la relación de aspecto en imágenes y capturas de pantalla, las proporciones más comunes y los errores que conviene evitar.
- Tamaño de imagen para redes socialesDimensiones recomendadas de imagen para Instagram, X, LinkedIn y Facebook, y cómo redimensionar para que se vean bien en cada plataforma.
- Plantilla de captura de pantallaQué es una plantilla de captura de pantalla, cómo los ajustes reutilizables ahorran tiempo y los errores comunes.
- Superposición de imagenUna superposición es cualquier elemento colocado encima de una imagen: texto, flechas, un logotipo o un marco de dispositivo. Tipos principales, cómo funciona la transparencia y errores comunes.
- Eliminación del fondo de una imagenCómo funciona la eliminación del fondo de una imagen, dónde se usa y la diferencia entre la eliminación con IA y la manual.
- Captura responsivaQué son las capturas responsivas, los tamaños de ventana gráfica habituales y los errores que conviene evitar al capturar en varios dispositivos.
- Flujo de trabajo con capturas de pantallaQué es un flujo de trabajo con capturas de pantalla y cómo crear un proceso repetible desde la captura hasta la entrega.