Wireframes vs Mockups vs Prototipos: cuál usar en cada momento

Wireframe, mockup y prototipo no son etapas obligatorias en fila: son herramientas con propósitos distintos. Elegir mal el nivel de fidelidad es una de las causas más frecuentes de retrabajo.

Wireframe

Representación estructural en baja fidelidad: bloques, jerarquía y contenido, sin color ni tipografía definitiva. Su ventaja es que se discute la estructura sin que nadie opine sobre el azul del botón. Ideal para explorar rápido y descartar barato.

Mockup

Representación visual estática de alta fidelidad: color, tipografía, imágenes y componentes reales. Sirve para validar la dirección visual, revisar contraste y presentar a stakeholders. No es interactivo.

Prototipo

Simulación interactiva del producto. Puede ser de baja fidelidad (clicable sobre wireframes) o alta (con animaciones, estados y datos reales). Es lo único que permite hacer tests de usabilidad significativos, porque el usuario puede fallar.

Cuándo usar cada uno

• Explorando muchas soluciones: bocetos en papel y wireframes.
• Alineando estructura con producto y desarrollo: wireframes anotados.
• Validando comportamiento con usuarios: prototipo interactivo.
• Aprobando dirección visual: mockup.
• Handoff a desarrollo: mockup + prototipo + especificación de estados.

Errores frecuentes

• Ir directo a alta fidelidad y enamorarse de la primera idea.
• Testear un mockup estático y creer que eso es un test de usabilidad.
• Prototipar el happy path y olvidar errores, vacíos y cargas.
• Usar Lorem Ipsum: el contenido real cambia el diseño.