Creación de wireframes

En los procesos de creación de una página web la primera fase debería ser siempre la creación del website wireframe, incluso antes del diseño gráfico de la página web . Básicamente, un wireframe es una guía visual, que se suele utilizar en el diseño de interfaces, que sugiere la estructura de un sitio web y las relaciones entre sus páginas. Es un ejemplo de la disposición de los elementos fundamentales en la interfaz/página web.

Aunque estas practicas no están extendidas lo que deberían, existen múltiples herramientas que permiten crear wireframes de una manera rápida e intuitiva (tanto versiones Cloud Computing & Saas. como programas para diferentes plataformas):

1. Mockingbird (Online/Saas)

Es una herramienta online de creación de wireframes (Wireframing-Tool). Al estar programada sobre el Framework «Cappuccino» la interacción es como en un programa de escritorio. Los wireframes se crean de una manera sencilla mediante Drag & Drop de elementos comunes en el diseño de páginas web. El resultado puede descargarse o enviarse por email.

2. Firefox Pencil (Mac/Windows)

Esta herramienta está basada en el Geckoengine del navegador Firefox, y se instala como un complemento (plugin). Por lo tanto es una buena solución para esquemas rapidos e independientes de la plataforma. Los wireframes se pueden exportar en formato png. En su contra, el uso es, a veces, un poco más lento debido a que no dispone de atajos de teclado. Pero su escaso tamaño (< 450 KB) y ser una herramienta gratuita la hacen una muy buena elección.

3. Iplotz (Online/Saas)

Es una herramienta online que permite crear wireframes clickables. Además incluye funcionalidades básicas de gestión de proyectos, como por ejemplo asignar tareas, por lo que es posible colaborar con otros usuarios en la creación de los wireframes. Aunque sea un servicio Saas, existe una versión descargable programada en AIR. Finalmente, hay múltiples planes que se adaptan a diversos usuarios, desde una versión gratuita (1 proyecto limitado a 5 pantallas) a versiones corporativas (múltiples usuarios y proyectos ilimitados)

4. Balsamiq (Mac/Windows)

Balsamiq es una herramienta programada en Flex y la creación de wireframes es muy intuitiva y permite crearlos de una manera rápida. Las plantillas, con un estilo pintado a mano, facilitan que al presentar los prototipos no se malinterpreten con versiones finales. En la web de balsamiq se puede probar la herramienta de manera gratuita y exportar los wireframes a png (con marca de agua). Y en el caso de utilizar la herramienta habitualmente existe una versión de pago, además de una versión onlines/saas en el futuro. Por ultimo al basarse en archivos xml, es posible integrar la herramienta con otros programas como por ejemplo gestores de proyectos.

5. Omnigraffle Pro (Mac)

Esta herramienta permite crear rápidamente wireframes, diagramas de proceso y sitemaps. Las características más interesantes de Omnigraffle es que permite crear capas como en Photoshop y usar plantillas predefinidas, que pueden descargarse de internet – por ejemplo de Graffletopia. Estas plantillas permite crear fácilmente wireframes de aplicaciones de Facebook y Iphone, Elementos Ajax, Formatos publicitarios o elementos de Social Media Webs. También es posible crear prototipos clickables al poder definir zonas interactivas que al exportarse a pdf clickables dan cierta interacción (aunque no pueden sustituir a prototipos en html)

6. Axure (Windows)

En comparación con otras herramientas Axure permite crear prototipos interactivos en html/javascript. La creación de prototipos interactivos es muy util tanto para presentaciones como para pruebas de usuarios y poder hacerse una idea de la futura web. Otra funcionalidad interesante es la posibilidad de crear comentarios en los documentos que luego pueden exportarse a formato Word, para crear la documentación conceptual de un proyecto. Como en otras herramientas es posible cargar plantillas para agilizar la creación de los wireframes.

7. Adobe FlashCatalyst (Mac/Windows)

Este programa desarrollado por Adobe aun se encuentra en su fase de desarrollo. Aunque solo este disponible una versión beta, la herramienta es muy solida. Al ser un producto Adobe permite cargar archivos de otras herramientas Adobe como por ejemplo Photoshop o Illustrator. Lo más destacable de FlashCatalyst es que permite añadir interacción a los elementos de diseño hasta el punto de crear animaciones avanzadas como por ejemplo scroll, fundidos, etc. Por ello FlashCatalyst es, seguramente, la herramienta ideal para la creación de prototipos con animaciones complejas, ya que es algo limitada para wireframes estáticos.

Otras referencias

En resumen, actualmente existen múltiples herramientas para crear wireframes estáticos y prototipos clickables. Puedes encontrar una amplia tabla resumen en en este articulo de Dan Harrelson.