Un wireframe es un boceto simplificado que muestra la estructura sin diseño visual. Sin colores, sin fotografías, sin tipografía elaborada. Solo cajas, líneas y texto de ejemplo. El objetivo es definir la ubicación de los elementos antes de decidir su apariencia. Los wireframes responden preguntas sobre jerarquía, navegación y flujo de contenido. Son económicos de crear y fáciles de modificar.

Los diseñadores dibujan wireframes a mano, en herramientas como Figma o Sketch, o con aplicaciones específicas. Los wireframes de baja fidelidad utilizan cajas sencillas y etiquetas garabateadas. Los wireframes de alta fidelidad incorporan contenido real y un espaciado más preciso, pero siguen evitando el color y las imágenes. Los equipos utilizan wireframes para alinear a las partes interesadas desde el principio. Un cliente que se resiste a mover un botón en un wireframe evita a todos el engorro de tener que reconstruir la pantalla final más adelante.

Lo que muestran los wireframes

• Ubicación de las secciones principales de la página.
• Estructura de navegación y elementos del menú.
• Jerarquía y agrupación de contenidos.
• Elementos interactivos como botones y formularios.

Los wireframes no son planos. Son herramientas de conversación. El objetivo es llegar a un acuerdo sobre la estructura antes de dedicar tiempo a la superficie.