01Posicionamiento en Google
02Webs que convierten
03Marca
Caso · Origen Mobiliario
Cocinas Integrales Bucaramanga — de vender por redes a página 1 en GoogleSitio nuevo a medida y SEO local para una fábrica de cocinas integrales que antes solo vendía p…Ver el caso →
Las que usamos en la agencia, abiertas para ti. Sin registro.
Destacada Auditoría SEO ExprésPuntuación sobre 100, semáforos y las 3 cosas que arreglaría primero. En PDF. Auditar mi web →
Qué es Mockup
Actualizado el
El mockup es una representación visual estática y de alta fidelidad de cómo se verá un diseño terminado, con colores, tipografías, imágenes y textos aplicados. A diferencia del wireframe, que solo muestra la estructura, y del prototipo, que es navegable, el mockup sirve para revisar y aprobar el aspecto final antes de producirlo.
Un mockup es una imagen estática y detallada de cómo se verá una web, una app, un empaque o una pieza de marca ya terminada. Incluye colores, tipografías, fotos, íconos y textos reales o muy cercanos a los finales. No funciona: no puedes hacer clic en nada. Su trabajo es que tú y tu equipo vean el resultado y lo aprueben antes de gastar horas en programar o imprimir.
Mockup, wireframe y prototipo. Son tres etapas distintas que se confunden con frecuencia. El wireframe es el esqueleto en blanco y negro: define qué va en cada lugar de la página sin preocuparse por el estilo. El mockup le pone la piel: aplica la identidad visual sobre esa estructura. El prototipo le da movimiento: es una versión navegable donde puedes hacer clic, abrir menús y recorrer el flujo, aunque todavía no esté programada.
Qué se revisa en un mockup. La jerarquía (qué se ve primero), el contraste y la legibilidad del texto, la coherencia con el manual de marca, el espacio en blanco y cómo se adapta el diseño a escritorio y a celular. Conviene pedir al menos la versión de escritorio y la móvil de las páginas clave, como el inicio y una página de servicio.
Mockups de marca. También se usa el término para mostrar un logo aplicado sobre una fachada, una camiseta, una tarjeta o una bolsa. Sirve para imaginar el isotipo o el logotipo en contexto, pero no reemplaza probarlo en tamaños reales ni en una sola tinta.
Cómo dar feedback. Revisa con el objetivo de la página en mente y no solo con el gusto personal: ¿se entiende qué ofreces?, ¿se ve el botón principal? Reúne los comentarios en una sola ronda. Cambiar de opinión después de que empezó la programación es lo que más encarece un proyecto.
Ejemplo
Una tienda de bicicletas de Medellín va a estrenar web. Después de aprobar el wireframe, el diseñador entrega el mockup de la página de inicio y de una ficha de producto, en versión de escritorio y móvil, con la paleta de la marca, fotos reales y precios de ejemplo.
El dueño detecta que el botón «Comprar» se confunde con el fondo de la foto y pide un cambio de color antes de programar. Corregirlo en el mockup toma un rato; corregirlo después en el código tomaría bastante más. Es un caso hipotético que muestra para qué sirve esta etapa.
Preguntas frecuentes sobre Mockup
¿Cuál es la diferencia entre mockup y wireframe?+
El wireframe es un esquema sencillo, en blanco y negro, que muestra dónde va cada elemento. El mockup aplica sobre esa estructura la identidad visual: colores, tipografías, imágenes y textos. El wireframe se usa para decidir la organización; el mockup, para aprobar cómo se verá el resultado.
¿Un mockup es lo mismo que un prototipo?+
No. El mockup es una imagen estática: se ve como el producto final, pero no responde a clics. El prototipo es interactivo y permite simular la navegación entre pantallas. Un prototipo puede construirse a partir de mockups conectados entre sí, pero cumple otra función.
¿Para qué sirve un mockup antes de programar una web?+
Permite validar el aspecto visual, detectar problemas de lectura o de jerarquía y alinear al equipo antes de escribir código. Corregir un diseño en imagen es mucho más barato y rápido que modificar una página ya programada, por eso conviene aprobarlo con cuidado.
¿Qué herramientas se usan para hacer mockups?+
Los diseñadores suelen usar programas de diseño de interfaces como Figma, Sketch o Adobe XD, y para piezas de marca como empaques o papelería, plantillas de Photoshop o Illustrator. La herramienta importa menos que la claridad del resultado y que se entregue en las versiones móvil y escritorio.
Términos relacionados
Para ir más allá
¿Quieres saber cómo está tu web en esto?
En una llamada de 20 minutos revisamos tus datos reales y te decimos qué conviene mover primero, sin compromiso.