Wireframe

Niveles de fidelidad

• Baja fidelidad: bocetos a mano o cajas grises. Sirven para explorar alternativas rápido.
• Media fidelidad: con textos reales o aproximados, proporciones y componentes reconocibles. Es el formato más habitual para validar una página.
• Alta fidelidad: muy cerca del diseño final. A partir de aquí suele hablarse ya de maqueta (mockup).

Wireframe, mockup y prototipo

• Wireframe: estructura y contenido.
• Mockup: aspecto visual definitivo, estático.
• Prototipo: versión interactiva, de cualquier fidelidad, en la que se puede hacer clic y recorrer un flujo. Es lo que se usa para probar con usuarios.

Qué decide un wireframe

• Qué secciones tiene la página y en qué orden.
• Qué mensaje lleva cada sección y cuánto texto cabe.
• Dónde van las CTA y la prueba social.
• Cómo se adapta a móvil.
• Qué elementos son interactivos y qué pasa al usarlos.

Buenas prácticas

• Trabajar con contenido real o lo más parecido posible. Los textos de relleno (lorem ipsum) esconden problemas: titulares que no caben, secciones sin nada que decir.
• Pensar en móvil desde el principio, no al final.
• Mantenerlo en gris para que la conversación se centre en estructura y contenido, no en colores.
• Anotar el comportamiento que no se ve: estados, validaciones, contenido dinámico.

Herramientas

Papel y rotulador, Figma, Balsamiq, Whimsical o cualquier herramienta de diagramas. La herramienta importa menos que hacerlo antes de diseñar.

Términos relacionados

• Usabilidad
• Design system
• Landing page
• Hero section