Dentro de la arquitectura web —es decir, la distribución de los elementos que conforman una web—, existen tres aspectos que no hay que perder de vista: el árbol web, el funcional del site y, por último, los wireframes. Ahora bien, ¿en qué consiste este último concepto?

De forma muy resumida, podríamos decir que un wireframe es una representación visual muy sencilla del esqueleto o estructura de una página web, con la que se sientan las bases del diseño y se establece su punto de partida. Por regla general, se dibuja en blanco y negro, con trazos simples y pocos detalles, ya que se compone sólo de cajas y texto. Se centra en la funcionalidad, la experiencia de usuario y en dar prioridad a los contenidos del proyecto. En un wireframe, al contrario de lo que ocurre con el funcional, se representa la estructura del front-end, es decir, la parte visible de las páginas web.

A su vez, en los wireframes se definen de forma esquemática los siguientes elementos:

• los bloques de contenido y su posición
• la navegación
• los diferentes elementos que forman parte de la interfaz 
• cómo se relacionan estos últimos entre sí

En cuanto a los componentes representados, hay que destacar los que se enumeran a continuación:

• elementos de navegación: menús, accesos directos e hipervínculos 
• elementos de información (contenidos de texto e imágenes)
• elementos de interacción (herramientas o funcionalidades para el usuario)
• elementos de apoyo (ítems de ayuda y orientación, como mapas de navegación y FAQ); 
• elementos promocionales (banners publicitarios y otros destacados internos del propio producto) 

A diferencia de los bocetos, los wireframes se caracterizan por no incorporar ningún detalle tipográfico o de color, así como ningún otro aspecto gráfico o estético. De este modo, se consigue que la atención de las personas implicadas en la creación de la web se centre en las funcionalidades, comprobar cuál es la experiencia del usuario y dar prioridad a los contenidos del proyecto. Gracias a los wireframes, tanto el cliente como el equipo de diseño pueden hacerse una idea rápida de qué elementos y contenidos se mostrarán en el web, con la ventaja de no tener que dedicar su atención a otras cuestiones que ya se analizarán más adelante, como los colores, los logotipos, las texturas o la tipografía.

Ejemplo de wireframe para la página de inicio de una empresa de auditoría.

Durante la conceptualización del sitio web, se establecen una serie de plantillas máster que serán las que se dibujarán en los wireframes. En la mayoría de los casos, gran parte de las páginas internas de un sitio repiten una misma estructura, por este motivo no se necesita un prototipo de todas ellas, sino solamente de aquellas que son únicas y representativas. A su vez, en esta fase aún es posible introducir los cambios indicados por el cliente sin que esto suponga una gran carga de trabajo, ya que es una etapa previa al diseño y, por lo tanto, un buen momento para validar los pasos realizados.

En definitiva, los wireframes son herramientas muy útiles para evaluar funcionalidades y contenidos. De hecho, no hay que olvidar que ayudan a separar claramente los elementos que realmente aportan valor al proyecto web de los detalles puramente estéticos o de diseño. Y por supuesto, son una excelente guía para que los diseñadores puedan sacar jugo de su creatividad sin perder de vista la usabilidad del sitio.

Por Xavier Valdés