Definición Concisa
Guía visual esquemática a modo de plano arquitectónico que ilustra la estructura básica, jerarquía de contenidos y disposición de elementos de una página web antes de aplicar diseño visual.
Explicación y Contexto Conceptual
Se divide en baja fidelidad (bocetos rápidos a mano o en blanco y negro para acordar la navegación y la ubicación de botones) y alta fidelidad (con medidas precisas e interactividad). Permite a redactores, diseñadores y directores alinear el flujo de conversión antes de invertir tiempo y dinero en código o producción gráfica.
Cálculo / Regla
Proceso de Diseño = Arquitectura de Información -> Wireframe (Estructura) -> Mockup (Visual) -> Prototipo (Interactivo)
Ejemplo en la Práctica
Antes de programar la página de inicio de k5, se diseñó un wireframe en Figma delimitando dónde iría la barra de búsqueda, el alfabeto A-Z y las tarjetas de categorías.
Formato de Cita
"Wireframe (Esquema o Boceto de Interfaz)": Guía visual esquemática a modo de plano arquitectónico que ilustra la estructura básica, jerarquía de contenidos y disposición de elementos de una página web antes de aplicar diseño visual. Fuente: Glosario del Marketing y la Publicidad, Blue Design Worldwide (https://bluecolombia.co/glosario-marketing/termino/wireframe-prototipado-ux)