Qué es un mockup web y cómo se utiliza en un proyecto

Hace años presentamos a un cliente el diseño de su nueva página de inicio. La propuesta incluía colores, fotografías, tipografías, botones y todos los bloques colocados prácticamente como aparecerían en la web terminada.

La primera pregunta fue directa: “Entonces, ¿ya está hecha?”.

No exactamente. Lo que tenía delante era un mockup web: una representación visual bastante cercana al resultado final, pero todavía sin formularios funcionando, enlaces reales, adaptación completa a móvil ni programación detrás.

Un buen mockup ayuda a tomar decisiones antes de construir la página. El problema aparece cuando se confunde una imagen bonita con una web terminada.

Qué es un mockup

Un mockup es una maqueta visual utilizada para representar el aspecto de un producto antes de fabricarlo o desarrollarlo por completo.

Puede aplicarse a un envase, un logotipo, una aplicación, una camiseta, una pantalla o una página web.

En diseño web, el mockup muestra con bastante detalle cómo podría verse una página:

• colores corporativos;
• tipografías;
• fotografías e ilustraciones;
• estilo de los botones;
• distribución de bloques;
• espacios y tamaños;
• cabecera y navegación;
• formularios;
• tarjetas, iconos y otros componentes.

Puede parecer una captura de la web terminada, pero normalmente sigue siendo un diseño estático.

Para qué sirve un mockup web

Su principal función es permitir que cliente y diseñador revisen la apariencia de la página antes de invertir tiempo en maquetación y desarrollo.

Resulta más sencillo cambiar una fotografía, un color o la composición de un bloque en la herramienta de diseño que rehacer después una página ya montada y adaptada a distintos dispositivos.

Un mockup puede ayudar a:

• presentar una propuesta visual;
• comprobar si la identidad de marca está bien aplicada;
• revisar la jerarquía de títulos, textos y botones;
• comparar varias líneas de diseño;
• detectar bloques demasiado densos;
• validar el estilo antes de programar;
• explicar el proyecto a personas que no trabajan con código.

También reduce conversaciones abstractas. Es más fácil opinar sobre una pantalla concreta que discutir durante una hora si la web debería ser “más moderna”, “más potente” o “más dinámica”, tres indicaciones que pueden significar cualquier cosa.

Diferencia entre wireframe, mockup y prototipo

Estos términos aparecen juntos porque representan fases relacionadas, pero no resuelven el mismo problema.

Elemento	Qué representa	Qué permite revisar
Wireframe	La estructura básica de la página.	Orden, jerarquía, bloques y recorrido.
Mockup	La apariencia visual.	Colores, tipografías, imágenes y estilo.
Prototipo	Una simulación de la interacción.	Navegación, botones, menús y pasos.
Web terminada	El proyecto real publicado.	Funcionamiento, responsive, formularios, velocidad e integraciones.

El wireframe web suele aparecer antes. Se centra en decidir qué contenido habrá, dónde se colocará y qué importancia tendrá.

Después, el mockup aplica la identidad visual. El prototipo puede añadir enlaces simulados y transiciones para probar el recorrido.

En proyectos sencillos no siempre se crean tres documentos separados. A veces una misma herramienta permite avanzar desde una estructura básica hasta un diseño visual y una pequeña simulación.

Qué no demuestra un mockup

Este es el punto que más confusiones evita.

Un mockup puede quedar impecable y no decirnos todavía:

• si el formulario enviará correctamente;
• si la web cargará rápido;
• cómo se comportará el menú;
• qué ocurrirá en un móvil pequeño;
• si los textos cabrán cuando sean reales;
• si la página será accesible con teclado;
• cómo funcionarán filtros o buscadores;
• si el contenido podrá editarse;
• qué ocurrirá cuando aparezca un error;
• si la estructura es adecuada para SEO.

También puede ocultar decisiones pendientes. Un bloque con una fotografía bonita y dos líneas provisionales puede romperse cuando llega el texto definitivo con cuatro párrafos, una tabla y un formulario.

Qué debería revisar el cliente antes de aprobarlo

No hace falta tener conocimientos técnicos para revisar un mockup. Hay que comprobar si representa bien el negocio y ayuda al visitante a entender la página.

El mensaje principal

La primera pantalla debería dejar claro qué ofrece la empresa y para quién.

Una fotografía espectacular no compensa un titular genérico que podría pertenecer a cualquier negocio.

El orden del contenido

Conviene revisar qué aparece primero y qué información queda demasiado abajo.

Los servicios prioritarios, las ventajas reales y las formas de contacto no deberían perderse entre bloques decorativos.

Los textos

Siempre que sea posible, el mockup debería utilizar textos reales o representativos.

El famoso lorem ipsum permite rellenar huecos, pero no sirve para comprobar si el titular explica bien el servicio ni si el contenido cabe de forma natural.

Las llamadas a la acción

Cada botón debe tener un objetivo y un destino.

“Más información” puede resultar válido en algunos casos, pero textos como “Ver el servicio”, “Solicitar presupuesto” o “Consultar disponibilidad” explican mejor qué ocurrirá.

La coherencia con la marca

Los colores y tipografías deben encajar con la identidad de la empresa, no únicamente con las tendencias del momento.

Una web puede estar de moda durante seis meses y parecer ajena al negocio desde el primer día.

La versión móvil

No basta con aprobar una composición de escritorio y confiar en que después todo se encogerá correctamente.

Hay que pensar qué bloques cambian de orden, cómo se recortan las imágenes, qué tamaño tienen los botones y cuánto espacio ocupa la cabecera.

¿Debe diseñarse primero el mockup o escribirse el contenido?

Lo ideal es que contenido y diseño avancen juntos.

Diseñar una página completa sin saber qué necesita explicar obliga a inventar huecos. Escribir todos los textos sin conocer la estructura puede producir bloques difíciles de presentar.

Un proceso razonable sería:

1. definir el objetivo de la página;
2. ordenar los contenidos principales;
3. crear el wireframe;
4. preparar textos suficientemente reales;
5. desarrollar el mockup;
6. revisar diseño y contenido juntos;
7. maquetar y programar;
8. adaptar a móvil y probar.

No hace falta que cada coma sea definitiva antes del diseño. Sí necesitamos conocer la longitud, el tono y la importancia de los contenidos.

Cómo se convierte un mockup en una página web

Una vez aprobado el diseño, comienza la construcción real.

El equipo debe transformar la composición visual en elementos que funcionen:

• HTML con una estructura comprensible;
• estilos adaptables mediante CSS;
• menús y botones reales;
• formularios;
• comportamientos interactivos;
• gestión de contenidos;
• versiones para distintos tamaños;
• optimización de imágenes;
• configuración SEO básica;
• pruebas antes de publicar.

En WordPress, además, hay que decidir qué podrá editar el cliente, cómo se crearán nuevas páginas y qué partes deben quedar protegidas para no desmontar el diseño por accidente.

Un buen trabajo de diseño web no consiste en copiar visualmente una imagen. Consiste en trasladar esa propuesta a una web usable, mantenible y preparada para contenido real.

Herramientas para crear mockups web

Existen muchas herramientas. La elección depende del tamaño del proyecto, la forma de trabajar del equipo y el nivel de detalle necesario.

Entre las más utilizadas se encuentran:

• Figma;
• Adobe XD en proyectos antiguos;
• Sketch;
• Penpot;
• Photoshop;
• Illustrator;
• Canva para composiciones sencillas.

La herramienta no convierte por sí sola una propuesta en buen diseño.

Puede facilitar componentes, cuadrículas y revisiones, pero sigue haciendo falta criterio para ordenar contenidos, plantear jerarquías y pensar en el usuario.

¿Puede la inteligencia artificial crear un mockup?

La inteligencia artificial puede generar ideas visuales, composiciones y propuestas iniciales con bastante rapidez.

Resulta útil para buscar referencias o probar direcciones, pero no conoce por sí sola:

• las prioridades del negocio;
• los servicios que deben destacar;
• la arquitectura real de la web;
• las limitaciones técnicas;
• los contenidos definitivos;
• los objetivos SEO;
• qué podrá gestionar el cliente;
• qué necesita el usuario para decidir.

Una imagen generada puede quedar muy llamativa y ser imposible de convertir en una web razonable sin rehacer gran parte de la propuesta.

Errores habituales al trabajar con mockups

• aprobar solo porque el diseño parece bonito;
• utilizar textos falsos hasta el final;
• no preparar una versión móvil;
• olvidar estados de error y confirmación;
• mostrar botones sin definir su destino;
• dar el mismo peso visual a todos los bloques;
• presentar una única pantalla para un proyecto completo;
• utilizar imágenes sin confirmar derechos o disponibilidad;
• no pensar cómo se editará la web;
• confundir la maqueta con el proyecto terminado.

Otro error bastante frecuente es perfeccionar durante días pequeños detalles visuales mientras siguen sin resolverse preguntas básicas: qué servicios aparecerán, dónde estará el formulario o qué página recibirá al usuario al pulsar un botón.

¿Hace falta un mockup en todos los proyectos?

No siempre con el mismo nivel de detalle.

Puede resultar especialmente útil en:

• webs corporativas amplias;
• rediseños;
• tiendas online;
• aplicaciones;
• proyectos con varias personas tomando decisiones;
• páginas con una identidad visual muy trabajada;
• desarrollos con componentes personalizados.

En una landing sencilla puede bastar una propuesta visual clara sobre la que hacer pequeños ajustes.

Crear treinta mockups detallados para una web de cuatro páginas puede costar más que resolver ciertos cambios directamente durante la maquetación.

El nivel de documentación debe guardar relación con el tamaño, el presupuesto y el riesgo del proyecto.

Un mockup ayuda a decidir antes de construir

El mockup web permite ver la dirección visual de una página antes de convertirla en un proyecto real.

Sirve para hablar de colores, tipografías, imágenes, jerarquía y estilo con algo concreto delante.

Pero debe apoyarse en una estructura pensada y en contenidos suficientemente reales. De lo contrario, podemos terminar aprobando una fachada atractiva para una página que todavía no sabe qué tiene que contar.

La mejor maqueta no es la que más impresiona en una presentación. Es la que ayuda a construir una web clara, coherente y útil para el negocio.

Preguntas frecuentes sobre mockups web

¿Qué es un mockup web?

Es una representación visual de cómo se verá una página antes de desarrollarla. Suele incluir colores, tipografías, imágenes, botones y otros elementos gráficos.

¿Un mockup es una página web terminada?

No. Puede parecer una captura de la web final, pero normalmente no incluye programación, formularios reales, adaptación completa ni funcionamiento interno.

¿Qué diferencia hay entre un wireframe y un mockup?

El wireframe representa la estructura y el orden de los contenidos. El mockup añade la apariencia visual, como colores, imágenes y tipografías.

¿Qué diferencia hay entre un mockup y un prototipo?

El mockup suele ser estático. El prototipo puede simular navegación, botones y recorridos aunque todavía no sea la web definitiva.

¿Qué debe revisar un cliente en un mockup?

Debe revisar el mensaje principal, el orden de los contenidos, la identidad visual, los textos, las llamadas a la acción y la adaptación prevista para móvil.

¿Se puede crear un mockup con Figma?

Sí. Figma es una de las herramientas utilizadas para diseñar interfaces, compartir propuestas y preparar mockups y prototipos.

¿Es necesario hacer un mockup para todas las páginas?

No siempre. Pueden diseñarse primero las páginas y componentes principales y reutilizar después el sistema visual en otras secciones.

¿Cuándo se aprueba un mockup?

Cuando la línea visual, la jerarquía, los contenidos principales y los componentes están suficientemente claros para comenzar la maquetación y el desarrollo.