Wireframes

Desde que he publicado los wireframes para el rediseño de EFH varios lectores me han preguntado con qué herramienta los elaboro. También anticipé que hablaría sobre ello más adelante. Bueno, ahora es el momento.

Definiciones Iniciales

Partamos hablando del objetivo de los wireframes y cómo enfoco el proceso de desarrollo. En general esta herramienta es parte del proceso de arquitectura de infomación y permite definir el detalle del contenido de las páginas más relevantes. Para conocer un poco más de esto veamos algunos antecedentes.

Normalmente los deliverables o productos que nos entregan el panorama global de los contenidos de un sitio son el inventario de contenido y el diagrama de contenidos. Este último nos permite, mediante recursos como el vocabulario visual de Garret, definir el detalle de contenidos a nivel global del sitio, identificar secciones, tipos de páginas, etc. Luego de tener el panorama completo del sitio debemos pasar a identificar y modelar el detalle de contenidos a nivel de página. Para ello se seleccionan las páginas tipo más relevantes y se desarrollan wireframes.

Normalmente se crean wireframes para la portada, las portadas interiores o portadillas, páginas interiores de contenido y otros casos especiales. En muchos de estos casos se repetirán elementos comunes como el encabezado, la navegación, el pie de página, etc., lo que hará que hacia el interior los wireframes sean más rápidos y simples de desarrollar.

La Importancia de los Wireframes

El desarrollar wireframes tiene varias ventajas dentro del proceso de diseño y desarrollo de un proyecto web, tanto para el equipo de desarrollo como para la relación con el cliente.

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 wirefreme puede contener ciertos elementos de caracter visual como una sugerencia de diagramación general, la jeraquizació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.

Por esto, normalmente trabajaremos los wireframes como diagramas simples, minimalistas, en grises y evitando cualquier enriquecimiento o contaminación visual que se pueda considerar un compromiso de diseño.

Perspectivas

Si bien el wireframe es una herramienta de arquitectura de información, es posible agregarle dimensiones adicionales que enriquezcan su valor como herramienta de diseño conceptual y análisis.

Personalmente en muchos proyectos me corrsponde realizar wireframes y luego hacerme cargo también del desarrollo del HTML y CSS. Por lo mismo esto me da una perspectiva diferente al momento de realizar wireframes: procuro junto con los objetivos originales de un wireframe, agregar información que me permita componer más fácilmente la estructura de HTML. Por ejemplo, es común identificar un bloque de elementos como pertenecientes a un mismo concepto: el logo e identidad de un sitio y la navegación principal corresponderán a la cabeza de las páginas y tiene sentido identificarlos de este modo. Por lo tanto, los encierro en un recuadro y eventualmente los puedo identificar como #encabezado. Exactamente, veo que brillan los ojos de ciertos fanáticos de CSS al notar que esto se traducirá posteriormente a:

Este enriquecimiento del wireframe lo hace una herramienta más valiosa y útil de desarrollar porque tendrá una participación mayor y aportará más al desarrollo del proyecto.

Herramientas

Hay muchas herramientas con las que se puede desarrollar un wireframe y la elección de una dependerá básicamente del enfoque y uso que hagamos del wireframe como producto dentro del desarrollo de los proyectos, así como del área de competencia de quien elabore el diagrama. Para diagramas simples es posible utilizar herramientas gráficas como Fireworks, Illustrator y otros similares. Sin embargo esto está más orientado a diseñadores y no todos lograrán ocupar eficientemente estas aplicaciones. Herramientas de presentaciones como PowerPoint también son útiles y las he visto con bastante frecuencia en la creación de wireframes, siendo además mucho más disponibles y utilizadas por un rango mayor de usuarios. No sería justo dejar de mencionar a Visio, que es una elección natural para cualquier clase de diagramas. Si está disponible, sin duda es un aporte enorme al desarrollo de wireframes, diagramas de contenido, interacción, etc.

Y bien, me preguntan con qué desarrollo mis wireframes. Al principio intenté con Fireworks por una desviación gráfica propia, pero en la medida que ún diagrama se complejiza resulta más dificil controlarlo, aparte del hecho que la aplicación consume cantidades monstruosas de memoria.

Pero desde hace cerca de dos años comencé a adoptar OpenOffice como plataforma para mis documentos, plantillas, presentaciones, etc. Y descubrí que uno de los componentes del paquete es Draw, una herramienta simple de gráficos vectoriales. No pretende competir con Freehand o Illustrator, pero para efectos de gráficos simples es ideal. Más grata fue mi sorpresa al descubrir que tiene conectores que permiten unir elementos y que se redibujan en la medida que los movemos, permitiéndonos editar fácilmente los diagramas.

Así, en este momento tengo algunas plantillas desarrolladas que me permiten comenzar a desarrollar diagramas rápidamente. Incluso envié hace un tiempo atrás una plantilla con el diagrama visual de Garret para diagramas de contenido en formato OpenOffice al propio Jesse James Garret, quie lo publicó en su sitio junto con las plantillas para los demás programas.

Conclusiones

Es evidente que el uso de wireframes es una muy buena idea para el desarrollo de proyectos web, más aún si los enriquecemos con otras dimensiones, como por ejemplo con indicios para la construcción del HTML y CSS. Es también una valiosa herramienta para determinar claramente los contenidos a nivel de página, junto con marcar hitos con el cliente respecto al desarrollo del proyecto.

En otro sentido, la herramienta con la que produzcamos los wireframes es secundaria, en tanto el producto es el valioso. Pero si me preguntan a mí, OpenOffice Draw es ideal.