Un wireframe es el esqueleto de un diseño. Cajas para imágenes. Líneas para texto. Etiquetas para botones. Sin colores. Sin tipografías. Sin elementos visuales pulidos. Solo la estructura, reducida a su esencia.

Los wireframes se crean al principio del proceso de diseño, después de los bocetos pero antes de las maquetas de alta fidelidad. Su función es responder preguntas sobre la maquetación: dónde se ubica la navegación, cuántas columnas, cuál es la jerarquía. Que sean poco atractivos es intencional. Si un wireframe parece demasiado pulido, los interesados ​​empiezan a debatir sobre el tono de azul en lugar de si la maquetación funciona.

Lo que muestra un wireframe

• Ubicación de los elementos principales: encabezado, navegación, contenido, pie de página
• Tamaño relativo y prioridad de los componentes
• Flujo entre pantallas o páginas
• Elementos interactivos como botones y formularios

Herramientas como Balsamiq y Figma han agilizado la creación de wireframes. Algunos diseñadores aún usan papel y rotuladores. El medio importa menos que la idea. Un wireframe sirve para iniciar una conversación. Dice: aquí está la estructura, ¿qué opinas? Los cambios son sencillos en esta etapa. Una vez finalizado el diseño visual, mover una barra lateral implica rehacer todo lo demás. En su lugar, muévela dentro del wireframe.