Inicio / Blog / Prototipo, wireframe y mockup
Producto
Prototipo, wireframe y mockup: qué es cada cosa y cuál necesitas
Qué es un wireframe, qué es un mockup y qué es un prototipo, en una tabla y con ejemplos; cuál necesitas según lo que vas a hacer con él y cuánto cuesta.
Las tres palabras en una tabla
Wireframe, mockup y prototipo se usan como si fueran sinónimos y no lo son. Son tres etapas del mismo camino, con tres niveles de detalle y tres usos distintos. La tabla resume lo que viene después.
| Wireframe | Mockup | Prototipo | |
|---|---|---|---|
| Qué es | Esquema de la pantalla, en gris | Diseño visual acabado, estático | Pantallas reales unidas por la navegación |
| Se puede tocar | No | No | Sí |
| Para qué sirve | Decidir qué hay en cada pantalla | Decidir cómo se ve | Enseñar cómo funciona |
| Quién lo entiende sin explicación | Diseñadores y equipo | Casi todo el mundo | Todo el mundo |
| Cuánto cuesta (orientativo, España 2026) | 0 a 500 € | 500 a 2.000 € | 90 a 790 € con nosotros; 1.500 a 5.000 € en agencia |
Qué es un wireframe
Un wireframe es el esquema de una pantalla: cajas, líneas y texto de relleno que dicen «aquí va el menú, aquí la lista, aquí el botón». Sin colores, sin tipografías, sin imágenes. Se dibuja a mano o con una herramienta de diseño, y su única función es decidir qué hay en cada pantalla y en qué orden, antes de perder tiempo en cómo se ve.
Un wireframe es útil para hablar con un diseñador o con un programador. Es inútil para convencer a alguien que decide, porque hay que explicarlo: «imagínate que esto es una foto y que al pulsar aquí…». En cuanto una idea necesita un «imagínate», ha perdido la mitad de su fuerza.
Los wireframes se dividen en baja y alta fidelidad según el detalle. Y hay wireframes «clicables», que se pueden navegar: son, en la práctica, un prototipo de baja fidelidad.
Qué es un mockup
Un mockup es el diseño visual acabado de una pantalla: colores, tipografías, imágenes y textos reales, tal como se vería la app. Pero es estático: una imagen. No se pulsa nada.
El mockup sirve para decidir la identidad visual y para enseñar cómo quedará. Es lo que hace un diseñador antes de que un programador construya la pantalla. Se pueden montar sobre un marco de móvil para presentarlos, y en ese uso «mockup» significa también «imagen del producto dentro de un dispositivo», que es lo que buscan muchos de los que escriben «mockup» en Google.
Su límite es el mismo que el del wireframe: hay que explicar qué pasa al pulsar. Y su ventaja sobre el wireframe es que ya no hay que imaginar el aspecto.
Qué es un prototipo (y por qué es el único que se puede tocar)
Un prototipo es un conjunto de pantallas reales unidas por la navegación: pulsas un botón y pasas a la siguiente pantalla, abres un menú, filtras una lista, completas un flujo. Se abre en el móvil desde un enlace y se usa como si la app existiera. No hay código por dentro y no guarda datos, pero quien lo tiene en la mano no necesita que nadie le explique nada.
Por eso es el único de los tres que sirve para convencer. Una demo que se toca elimina el «imagínate». Quien decide pasa de preguntarse «¿existe?» a preguntar «¿y esto qué hace?», que es la conversación que quieres tener.
Hay prototipos de dos niveles de reacción. En uno se navega por el flujo con datos fijos: es nuestro Boceto. En otro los datos reaccionan a lo que haces: buscas, filtras, cambias de categoría y la pantalla responde con datos ficticios pero coherentes. Es nuestra Demo, y es lo que hace que alguien se crea que está usando el producto. El Pitch es la Demo con los datos reales del cliente, bajo acuerdo de confidencialidad, y con un guion para presentarla.
Prueba rápida para saber si lo que tienes es un prototipo: pásale el móvil a alguien sin decirle nada. Si en 30 segundos está usándolo, es un prototipo. Si te mira y pregunta «¿y ahora qué hago?», es un mockup.
Cuál necesitas según lo que vas a hacer con él
La pregunta no es cuál es mejor. Es qué vas a hacer con él la semana que viene.
Vas a decidir con tu equipo qué hace la app. Wireframes. Rápidos de cambiar, sin distracciones visuales. Los descartas sin pena.
Vas a elegir cómo se ve o a encargar el diseño visual. Mockups de las tres o cuatro pantallas principales.
Vas a enseñárselo a alguien que decide: tu jefe, un comité, un inversor, un cliente, tus primeros usuarios. Prototipo, sin duda. Es el único que funciona sin que estés tú al lado explicando.
Vas a pedir presupuesto de desarrollo. Prototipo. Con las pantallas y el recorrido decididos, los presupuestos salen comparables y cerrados. Sin él, cada agencia entiende una app distinta y cobra la incertidumbre.
Vas a probar si la idea le interesa a alguien antes de gastar en construirla. Prototipo, enseñado a diez personas. La reacción a algo que se toca es la única que vale.
En la práctica, casi todo el mundo que busca «wireframe» o «mockup» quiere lo tercero o lo quinto: enseñar la idea a alguien. Y para eso necesita un prototipo.
Cuánto cuesta cada uno
Orientativo para España en 2026.
Wireframes: gratis si los haces tú con una herramienta de diseño con plan gratuito, o entre 200 y 500 € si los encargas a un diseñador freelance para un flujo de 8 a 10 pantallas.
Mockups: entre 500 y 2.000 € por el diseño visual de las pantallas principales con un diseñador. Sube si hay que crear la identidad visual desde cero.
Prototipos: en una agencia de diseño, entre 1.500 y 5.000 € según pantallas e interacción, con dos a cuatro semanas de plazo. Con nosotros, precio cerrado y 5 días laborables: Boceto 90 € (navegación por el flujo), Demo 390 € (datos que reaccionan) y Pitch 790 € (con tus datos reales, confidencialidad y guion). Sin límite de pantallas: lo que cambia es la complejidad. Y todos incluyen el documento de estrategia: el porqué de cada función, KPIs, riesgos y recomendaciones.
Hay una última diferencia de coste que no aparece en ninguna tabla. Si después del prototipo decides construir la app con nosotros, todo lo pagado se descuenta al 100 % del desarrollo. El wireframe y el mockup se quedan en el camino; el prototipo es la primera pieza de la app.
Boceto 90 €, Demo 390 € o Pitch 790 €, con documento de estrategia y en 5 días laborables. IVA incluido.
Elige tu paquete →Preguntas frecuentes
¿Un wireframe sirve para presentar una idea?
Para hablar con un diseñador o con tu equipo, sí. Para convencer a alguien que decide (un jefe, un inversor, un cliente), no: un wireframe hay que explicarlo, y lo que convence es lo que se entiende sin explicación. Para eso está el prototipo.
¿Necesito Figma o saber diseñar?
Para hacerlo tú, sí, y lleva semanas de aprendizaje. Para tenerlo, no: nos cuentas la idea en un formulario de 8 minutos y nosotros dibujamos las pantallas y el recorrido. Si tienes diseños, los usamos.
¿Cuánto tarda un prototipo?
Un máximo de 5 días laborables desde el pago, en cualquiera de los tres paquetes. Si lo necesitas antes, la entrega en menos de 24 horas cuesta el doble.
¿El prototipo funciona de verdad?
Se navega y se usa como una app real, y en Demo y Pitch los datos reaccionan a lo que haces (filtros, búsquedas, categorías). Pero no guarda datos ni se conecta a tus sistemas. Para eso están Launch, Build y Scale, con el prototipo descontado al 100 %.
¿Qué diferencia hay entre prototipo de baja fidelidad y de alta fidelidad?
El de baja fidelidad es un wireframe que se puede navegar: cajas grises unidas por clics. El de alta fidelidad tiene el aspecto final. Todos nuestros prototipos son de alta fidelidad: lo que ves es lo que tendría la app.
Prototipo clicable y documento de estrategia en un máximo de 5 días laborables. Desde 90 €, IVA incluido.
Empieza tu prototipo →