Actualizado el 11 de noviembre de 2026 por Nicolas Finet, CEO de Sortlist. Hemos reescrito esta guía: qué es un mockup web, en qué se diferencia del wireframe y del prototipo, cómo hacerlo en seis pasos, qué herramientas considerar y cómo validarlo con usuarios.
Cada fase de diseño resuelve un problema distinto: la estructura se corrige en el wireframe y el aspecto en el mockup.
Lo esencial
- El wireframe define estructura.
- El mockup define aspecto visual (color, tipografía, imágenes).
- El prototipo permite probar la interacción.
Wireframe, mockup y prototipo
| Fase | Qué define | Qué se corrige |
|---|---|---|
| Wireframe | Estructura y contenido | Orden y jerarquía |
| Mockup | Aspecto: color, tipografía e imágenes | Estilo visual |
| Prototipo | Interacción | Flujos y usabilidad |
Si la estructura falla, lo corregirás en wireframe. Si el color no convence, lo arreglas en mockup.
Raiola Networks, ¿Qué es un mockup?
Seis pasos para hacer un mockup
- Define objetivos y usuarios.
- Crea el wireframe con la estructura de páginas y contenidos.
- Define estilo: color, tipografías e imágenes.
- Diseña las pantallas clave (inicio, categoría, contenido, contacto) en escritorio y móvil.
- Revisa con el equipo y el cliente.
- Prueba con usuarios y ajusta antes de desarrollar.
Consejos
- Usa contenido real, no texto de relleno.
- Comprueba contraste y legibilidad.
- Define componentes reutilizables.
- Entrega al desarrollo con medidas y estilos documentados.
Más en buen diseño web, buenas prácticas, UX/UI y desarrollo web.
Preguntas frecuentes sobre el mockup web
¿Qué herramienta uso?
Figma y alternativas de diseño de interfaces; elige según tu equipo.
¿Es obligatorio el wireframe?
No, pero ahorra cambios caros después.
¿Cuánto tarda?
Días o semanas según el número de pantallas.
¿Qué diferencia hay con el prototipo?
El prototipo es interactivo; el mockup es estático.
¿Necesitas ayuda? Publica tu proyecto en Sortlist y compara agencias de España.
Fuentes: Raiola Networks, ¿Qué es un mockup?
