Wireframes

Hace algunos días mantuvimos una conversación sobre los wireframes en la lista de correo de Cadius. Aunque en muchas ocasiones he utilizado métodos similares no lo conocía como técnica concreta y ni mucho menos por ese nombre. He indagado un poco sobre el asunto y esto es lo que puedo decir por ahora.

Técnicamente los wireframes son las mayas de líneas que se utiliza en el modelado 3d para reducir dificultad en la transformación del boceto. Aplicado este concepto a la arquitectura de la información deducimos que el wireframe es el esqueleto de páginas, con sus relaciones, dependencias y condiciones, de un sitio web. De este modo podemos planificar, y conocer para su posterior diseño y desarrollo, todas las páginas y procesos de nuestro sitio web con detalle.

El resultado es el inventario de contenido y el diagrama de contenidos.

Las ventajas las describe muy claramente Factor Humano en su artículo Wiframes.

En primer lugar, el definir claramente las características de contenido de las páginas que componen un sitio es de una importancia sustantiva. Esto permitirá que el desarrollo de todas las etapas posteriores se realice inequívocamente, con todos los miembros hablando de lo mismo.

En segundo lugar permite establecer hitos con el cliente que generan definiciones precisas. Al momento de validar los wireframes de un sitio con el cliente, se centra la atención en el diseño de contenidos, no en el diseño visual. Un wireframe puede contener ciertos elementos de carácter visual como una sugerencia de diagramación general, la jerarquización de los elementos, pero en rigor se trata de organizar la información a nivel de página, por lo tanto no se discute de diseño. De hecho, es muy posible que posteriormente, al traducir el wireframe a diseño, el diseñador gráfico determine que es necesario alterar ciertos elementos para optimizar aspectos comunicacionales, siempre que esto enriquezca al contenido y no sea exclusivamente por manierismos estéticos.

Para establecer las relaciones informacionales y documentales entre los distintos elementos de un sitio web es necesaria la utilización de un vocabulario visual estándar –Un vocabulario visual es un conjunto de símbolos usado para describir algo (usualmente un sistema, estructura o proceso)–. Hay que partir de la base de que los wireframes o diagramas documentos que van a revisar muchas parte de construcción de un producto: inversores, responsables de proyectos, productores de contenido, diseñadores, desarrolladores y arquitectos de información. Jesse James Garrett ha desarrollado un vocabulario visual para describir arquitectura de información y diseño de interacción.

En la lista se dejaron una serie de lecturas y recursos en inglés que apunto aquí para que todo el que quiera y yo mismo profundicemos poco a poco en el tema:

• http://deyalexander.com/resources/wireframes.html
• http://iainstitute.org/tools/
• http://www.subtraction.com/
• http://www.mezzoblue.com/archives/2005/05/13/columns_grid/
• http://tinyurl.com/d9vqd
• http://cardsword.sourceforge.net/index.php?option=com_frontpage&Itemid=1
• http://www.newcastle.edu.au/services/cms/downloads/
• http://www.iawiki.net/cgi-bin/wiki.pl?back=DeliverablesAndArtifacts

Actualización 18/12/05: Nuevos recursos y plantillas en Templates & Stencils for Visio & Omnigraffle de Garret Dimon.

También tenemos la posibilidad de buscar en http://del.icio.us/tag/wireframe.

Las lecturas en español las preparó hace ya algunos meses Torresburriel en el artículo La importancia de los wireframes.