≡En resumen
- Un mockup muestra cómo se verá el diseño final, pero no se puede usar: es estático.
- El orden habitual es boceto, wireframe, mockup, prototipo y desarrollo.
- Hay mockups de interfaz (webs y apps) y mockups de producto (logotipos o envases sobre objetos reales).
- Sirve para validar el aspecto visual con el cliente antes de invertir en programación o producción.
- Hoy se hace sobre todo en Figma o Penpot, y los de producto con plantillas de Photoshop.
01 ¿Qué es un mockup?
La palabra viene del inglés mock-up, que el Online Etymology Dictionary documenta desde 1919 con el sentido de «modelo, simulación», a partir del verbo to mock up (montar una imitación). Se usaba para las maquetas a escala real de aviones o vehículos, y el diseño gráfico y digital la adoptó para cualquier simulación realista de un resultado final.
En el trabajo de una agencia, el término tiene dos usos: el mockup de interfaz (una pantalla de web o app) y el mockup de producto (un logotipo aplicado sobre una taza, una camiseta o un envase).
02 Mockup vs wireframe vs prototipo: diferencias
| Aspecto | Boceto | Wireframe | Mockup | Prototipo |
|---|---|---|---|---|
| Qué es | Dibujo rápido de la idea | Esquema de estructura y jerarquía | Imagen realista del diseño final | Simulación navegable del producto |
| Fidelidad | Muy baja | Baja o media (grises, cajas) | Alta | Media o alta |
| Interacción | No | No (o mínima) | No | Sí: clics, transiciones y flujos |
| Pregunta que responde | ¿Por dónde vamos? | ¿Qué va en cada sitio? | ¿Cómo se verá? | ¿Cómo funcionará? |
| Quién lo valida | Equipo interno | Equipo y cliente | Cliente y marca | Usuarios reales en tests |
| Coste de cambiarlo | Casi nulo | Bajo | Medio | Medio o alto |
Figma lo resume así: el wireframe se centra en la estructura y el flujo, el mockup en el diseño visual, y el prototipo añade la interactividad. Antes de todos ellos suele haber un boceto en papel o pizarra. No siempre se hacen todas las fases: en proyectos pequeños es habitual pasar del wireframe directamente a un prototipo de alta fidelidad, que hace a la vez de mockup.
03 Tipos de mockup
Mockup de web
Cada plantilla clave de la web (home, servicio, ficha de producto, contacto) en su versión de escritorio y móvil.
Mockup de app
Las pantallas principales de una aplicación siguiendo las guías de iOS y Android: navegación, tamaños táctiles y estados.
Mockup de dispositivo
La pantalla diseñada colocada dentro de un marco de móvil, tableta o portátil, para presentaciones y portfolios.
Mockup de producto y branding
Un logotipo o diseño aplicado sobre objetos reales: tarjetas, tazas, camisetas, fachadas o vehículos.
Mockup de packaging
El diseño de un envase o etiqueta simulado en 3D antes de imprimir, para revisar proporciones y legibilidad.
En marketing y comercio electrónico, el mockup de producto tiene un uso muy práctico: permite enseñar un diseño en contexto antes de fabricarlo. Una marca de ropa puede presentar su nueva colección de camisetas estampadas, o un estudio puede mostrar al cliente su logotipo en la fachada, el uniforme y la furgoneta, sin imprimir nada. También se usa para lanzar preventas o probar varias versiones de un envase en anuncios y medir cuál genera más interés. Eso sí, si vendes el producto con esas imágenes, deben representar con fidelidad lo que el cliente recibirá.
04 ¿Para qué sirve un mockup?
- ✓Aprobar el aspecto visual con el cliente antes de programar o fabricar.
- ✓Detectar problemas de jerarquía, contraste o legibilidad cuando todavía es barato corregirlos.
- ✓Dar al equipo de desarrollo una referencia exacta de colores, espaciados y tipografías.
- ✓Presentar una propuesta o un proyecto de portfolio de forma realista.
- ✓Validar una identidad de marca aplicada a soportes reales.
- ✓Preparar imágenes para una campaña o una tienda online antes de tener el producto fabricado.
Una tienda de cosmética aprueba primero el wireframe de su ficha de producto. Después, el mockup muestra la ficha con sus fotos reales, el precio en el color de la marca y los sellos de confianza. En la revisión, el cliente descubre que el botón de compra se pierde junto a las fotos: se corrige en diez minutos en Figma, en lugar de en una tarde de desarrollo.
05 Cómo hacer un mockup paso a paso
-
1
Parte del wireframe aprobado
La estructura y el contenido ya deben estar decididos. El mockup no es el momento de discutir qué secciones lleva la página.
-
2
Aplica la identidad visual
Colores, tipografías, iconos y estilo de imagen de la marca, idealmente desde una librería de componentes.
-
3
Usa contenido real
Textos e imágenes definitivos o muy parecidos. El texto de relleno esconde problemas de longitud y jerarquía.
-
4
Diseña para móvil y escritorio
Como mínimo, las pantallas clave en ambos tamaños, empezando por el móvil.
-
5
Revisa accesibilidad
Contraste suficiente, tamaños de letra legibles y áreas táctiles cómodas antes de enseñarlo.
-
6
Presenta y recoge comentarios
Comparte el archivo con comentarios en contexto y cierra una versión aprobada antes de pasar al prototipo o al desarrollo.
Si el diseño va a ser una app o un SaaS nuevo, valida antes la idea con usuarios reales: la investigación UX te dice qué pantallas merecen un mockup, y un producto mínimo viable te dice si alguien pagará por ellas.
06 Herramientas para crear mockups
| Herramienta | Para qué | A tener en cuenta |
|---|---|---|
| Figma | Mockups y prototipos de web y app, en equipo | Funciona en el navegador y tiene plan gratuito; es el estándar en la mayoría de equipos |
| Penpot | Alternativa a Figma de código abierto | Desarrollada por la empresa madrileña Kaleidos; se puede autoalojar |
| Sketch | Diseño de interfaces | Solo para macOS |
| Adobe XD | Diseño de interfaces | Adobe dejó de invertir en ella en 2023; no conviene empezar proyectos nuevos |
| Photoshop | Mockups de producto con objetos inteligentes | Ideal para plantillas de tazas, envases o dispositivos |
| Canva | Mockups de producto rápidos a partir de plantillas | Muy sencillo; menos control fino que Photoshop |
Para mockups de producto, lo habitual es partir de plantillas PSD con objetos inteligentes: sustituyes una capa por tu diseño y la plantilla lo adapta a la perspectiva del objeto. Tienes una recopilación de recursos y ventajas en este artículo externo: Ventajas de usar mockups para tus diseños.
07 Buenas prácticas y errores frecuentes
No saltarse el wireframe
Si se discute a la vez la estructura y el color, las revisiones se eternizan. Primero qué, después cómo se ve.
No enseñar lo que no se puede programar
Un mockup con efectos imposibles o fuentes sin licencia crea expectativas que el desarrollo no cumplirá.
Pensar en todos los estados
Errores de formulario, carritos vacíos, textos largos: si no están en el mockup, se improvisan en código.
Diseñar con componentes
Botones, tarjetas y formularios reutilizables hacen que el mockup se traduzca directamente a un sistema de diseño.
En nuestro servicio de diseño UX/UI trabajamos con este flujo, del wireframe al prototipo probado con usuarios, y lo llevamos después a un diseño web a medida fiel al mockup aprobado.
Preguntas frecuentes sobre Mockup
Significa maqueta o simulación: una imagen realista y estática de cómo se verá un diseño terminado, sin funcionalidad.
El wireframe define la estructura en baja fidelidad, con cajas y grises; el mockup muestra el diseño visual final con colores, tipografías e imágenes.
El mockup es estático; el prototipo es navegable y simula cómo funciona el producto, con clics y transiciones.
Para webs y apps, sobre todo con Figma o Penpot; para mockups de producto, con plantillas de Photoshop o con Canva.
Es una imagen realista de un diseño aplicado sobre un objeto, como un logotipo en una taza o una etiqueta en un envase, antes de fabricarlo.
Maqueta o maqueta visual. En diseño digital también se usa el anglicismo mockup o mock-up.
No es obligatorio, pero ahorra dinero: cambiar un diseño en Figma cuesta minutos y cambiarlo en código, horas.
Es una imagen realista que muestra un diseño aplicado a su uso final, como una campaña en una valla, un envase o una web en un móvil, para presentarlo o probarlo antes de producirlo.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗