Cuando empecé en este noble oficio, hace más de 20 años (¡cuánto tiempo!) solía lanzarme a programar el sitio web completo luego de hablar con el cliente, muy segura de que había interpretado todo correctamente. Y más de una vez me encontré con un «ah, me lo imaginé distinto» o el tan temido «no me gusta». Esto implicaba tener que tirar días de trabajo por la borda, llorar y empezar de nuevo. Me preguntaba, ¿cómo hacen otros diseñadores para no errarla tan fiero?
Un par de años después, ya trabajando para una agencia como programadora, entendí dónde estaba el secreto: los diseñadores preparaban el diseño previo para mostrarle al cliente, en donde se hacían los cambios y ajustes, antes de que la versión final llegara al equipo de desarrollo. Este proceso agilizaba todo el flujo de trabajo, y el cliente siempre quedaba contento con el resultado.
Ese trabajo de diseño previo tenía un nombre específico: mockup.
.
¿Qué es un mockup?
Un mockup es una representación visual estática, de alta fidelidad y a escala real, de cómo se verá un diseño (ya sea un sitio web, app, o producto) antes de que se programe o se fabrique. Tiene los colores reales, las tipografías definidas, imágenes, botones, íconos… en fin, todo lo que el usuario final va a ver, pero todavía no está funcional. Es la maqueta digital del «así va a quedar».
La clave está en la palabra «fidelidad». Un mockup es más que un boceto o una idea: es prácticamente el diseño terminado, listo para que el cliente lo apruebe (o le haga cambios) antes de empezar a desarrollar una línea de código.
.
Wireframe, mockup y prototipo: ¿no son lo mismo?
No, nada que ver. Van en este orden dentro del proceso de diseño:
- Wireframe: es el esqueleto. Cajas grises, sin color ni tipografía, solo la distribución de los elementos. Responde al «¿dónde va cada cosa?».
- Mockup: es la piel. Ya tiene la estética final —colores, fotos, textos, botones—, pero sigue siendo una imagen estática. Responde al «¿cómo se va a ver?».
- Prototipo: es el simulacro. Podés clickear, navegar entre pantallas, ver transiciones. Responde al «¿cómo se va a sentir usarlo?».
Si trabajaste conmigo en algún wireframe, ya tenés medio camino recorrido: el mockup es el paso siguiente, cuando esa estructura gris se viste de gala.
.
¿Para qué sirve un mockup en un proyecto real?
Más allá de la definición de manual, en el día a día el mockup sirve para tres cosas concretas:
- Vender la idea antes de construirla. Un cliente indeciso aprueba mucho más rápido algo que ya puede ver, que algo que se lo tiene que imaginar.
- Detectar problemas. Cambiar un color o mover un botón en un mockup lleva unos minutos. Hacerlo sobre una web ya maquetada, dependiendo cómo la hayas armado, te puede llevar horas.
- Alinear expectativas. Evita el clásico «yo pensé que iba a ser distinto» después de la entrega.
En diseño web, el mockup es como el plano antes de empezar a construir la casa: si el cliente aprueba, le damos para adelante.
.
Preguntas frecuentes
¿Un mockup es lo mismo que el diseño final?
No exactamente. El mockup muestra visualmente cómo va a quedar el diseño, con la estética definitiva, pero todavía no está programado ni es funcional. El diseño final es el resultado ya desarrollado y en producción.
¿Necesito saber programar para hacer un mockup?
Nop. Los mockups se crean con herramientas de diseño gráfico como Figma, Photoshop o generadores online, sin necesidad de escribir código.
¿El mockup y el wireframe son lo mismo?
Ya dije más arriba que no. El wireframe es la estructura básica sin estilo (colores, tipografías ni imágenes), mientras que el mockup ya tiene la apariencia visual final. El wireframe va primero, y el mockup va después.
¿Entonces, para qué sirve un mockup si después voy a mostrar el prototipo?
Sirve para aprobar la estética antes de invertir tiempo en programar la interacción. El mockup te muestra cómo se va a ver estéticamente. El prototipo te muestra cómo va a funcionar.
.
Mockups gratuitos para arrancar ya
Si no querés armar el mockup desde cero, o estás corto/a de tiempos, estos son algunos de los mejores sitios para conseguir uno gratis y editarlo con tu diseño:
- Figma Community – Website Mockups: decenas de plantillas gratuitas de laptop, mobile y landing pages, listas para arrastrar tu diseño y editar en el momento.
- Figma Community – Free Device Mockups: más de 4.700 mockups de dispositivos (laptop, celular, PC) totalmente editables dentro de Figma.
- Dribbble – Website Mockup: inspiración y algunos freebies descargables directos de la comunidad de diseñadores.
- Dribbble – Free Website Mockup: el filtro específico para piezas marcadas como gratuitas.
- Behance – Free Website Mockup / PSD Mock Up: un mockup PSD gratis en perspectiva, ideal para presentar una landing en 3 pantallas.
- Behance – Beautiful Perspective Website Mockup: búsqueda curada de mockups de sitios web con descarga libre, con miles de descargas y buena calidad.
- Mockuuups Studio: generador online gratuito con más de 5.000 escenas (laptop, celular, tablet); subís tu captura y en segundos tenés el mockup listo.
Wireframe: qué es y para qué sirve
El mockup no es un capricho estético ni un paso que se pueda saltear «para ganar tiempo». Es el seguro de tu proyecto: la instancia donde resolvés cómo va a quedar el sitio web antes de que empiece el trabajo pesado. Nunca lo subestimes, aunque el cliente esté impaciente por ver «algo funcionando». El mockup es el paso que te evita rehacer (o tirar 😩 como le pasó a la Alejandra del pasado) un sitio web cuando ya casi estaba terminado.
.
