<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=244227003061217&amp;ev=PageView&amp;noscript=1">

¿En qué consisten los wireframes?

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í
inbound marketing guia gratis

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.

wireframe

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

como crear campaña de inbound marketing integral

También te pueden interesar...

Social Selling Index: qué es y por qué es importante para tu marca
Cómo hacer una historia en Instagram que genere interacción con tus seguidores
WhatsApp Marketing: ¿cómo desarrollar hoy mismo una campaña poderosa?

¿Y tú qué opinas? ¡Déjanos aquí tus comentarios!

Suscríbete al Blog
Suscríbete por email y recibe además un pack de bienvenida con nuestros 5 mejores artículos