Para qué sirve un mockup
Una captura de pantalla suelta es plana y no tiene contexto. Esa misma captura dentro de un celular muestra un producto que podrías tener en la mano. Parece poca cosa. En una página de tienda o en un anuncio, muchas veces es la diferencia entre que alguien siga de largo o toque.
Los mockups aparecen en:
- las capturas del App Store y de Google Play;
- las imágenes principales y los videos de producto de las webs;
- los posts de Instagram, TikTok y LinkedIn;
- las presentaciones a clientes y los portafolios;
- los pitch decks para inversores.
Para quien diseña también tiene un lado práctico. Un cliente que mira un PNG plano siempre acaba preguntando cómo se verá en el celular. El mockup responde antes de que pregunte.
Tipos de mockup
Hoy se ven tres tipos, y cada uno destaca en algo distinto.
Mockup plano (2D)
La captura va dentro de un marco de dispositivo visto de frente. Se hace rápido, pesa poco y para las tiendas suele bastar. Pero todo se ve desde el mismo ángulo, y una página llena de mockups 2D acaba pareciendo repetitiva.
Mockup en foto
Alguien fotografía un dispositivo real, por ejemplo un celular en la mano o un portátil sobre un escritorio. Se marca la zona de la pantalla y tu diseño se coloca con la perspectiva correcta. Como la luz y el lugar son reales, el resultado se ve muy natural, y por eso funciona tan bien en redes y webs.
Mockup 3D y video mockup
Un modelo tridimensional del dispositivo. Giras el celular a cualquier ángulo, mueves la luz y la sombra la sigue. Su verdadera fuerza es el movimiento: el dispositivo gira o el portátil se abre mientras tu app corre en la pantalla. Para videos de lanzamiento y vistas previas del App Store, hoy es el tipo más usado.
Mockup, wireframe y prototipo
Se confunden todo el tiempo. Un wireframe es el esqueleto de una pantalla: cajas, líneas, texto provisional y nada de color. Sirve para acordar qué va dónde. Un prototipo se puede tocar: pulsas un botón y se abre la siguiente pantalla. Es lo que se pone delante de los usuarios en las pruebas.
Un mockup muestra el diseño terminado, o casi, en un entorno realista. No se puede tocar; está para mirarlo.
Cómo se crea un mockup
Antes había dos caminos: abrir un PSD con objetos inteligentes en Photoshop o montar una escena en un programa 3D como Blender o Cinema 4D. El primero es rápido pero limitado. El segundo es potente, pero aprenderlo lleva semanas.
Ahora hay apps pensadas para esto. En Mockup Center es así:
- Arrastra tu captura o tu grabación de pantalla a la app.
- Elige un dispositivo (iPhone, Galaxy, iPad, MacBook, Apple Watch y más) o abre una plantilla animada.
- Ajusta el ángulo, la luz y el fondo, y exporta en PNG o en video.
La guía cómo crear un mockup explica cada paso.
Qué hace bueno a un mockup
Después de ver muchas páginas de tiendas y posts de lanzamiento, los buenos tienen siempre las mismas costumbres:
- La captura es nítida. Una pantalla borrosa abarata hasta la escena 3D más cuidada. Hazla a la resolución real del dispositivo.
- La barra de estado está limpia: 9:41, batería llena, sin notificaciones. Es un detalle, pero se nota.
- El fondo no compite con el producto.
- Cada imagen cuenta una sola cosa, con una función y un titular.
