3 Herramientas para Wireframes

3-herramientas-wireframes

El diseño de experiencia de usuario tiene diversas fases, facetas, perspectivas y abordajes. Sin embargo, cuando hablamos de transmitir y planificar una experiencia en la web, una de las herramientas que tiene el diseñador para plasmar, trabajar y transmitir sus ideas son los Wireframes y los diagramas de flujo. Los bocetos iniciales a lápiz dan lugar, más tarde, a documentos más o menos complejos, con más o menos indicaciones funcionales, que tienen dos objetivos principales:

  1. Entender y evaluar la navegación y las funcionalidades principales, de manera rápida y barata.
  2. Transmitir requerimientos y una arquitectura y estructuración de los contenidos al equipo de trabajo: los diseñadores visuales, maquetadores, programadores…

Para llevar a cabo estas tareas, existen diversas herramientas en el mercado que facilitan el trabajo al diseñador. ¿Qué herramientas? ¿Cuáles son las mejores? ¿Por qué optar por unas o por otras? Recientemente han surgido bastantes opciones de software como alternativas viables para la creación de Wireframes y flujos de navegación, como alternativa a lo que antes se hacía con Microsoft Visio. Haré una lista de los 3 mejores softwares con los que he trabajado y añadiré dos posibilidades para añadir navegabilidad a nuestros wireframes. Antes de empezar, sería interesante leer esta definición de qué es y qué no es un prototipo, hecha por UX Magazine.

1. Axure

Axure es el software para prototipar por excelencia. Permite crear desde wireframes de baja fidelidad hasta prototipos muy completos y con gran detalles de navegación e interacción. Es una herramienta muy potente, descargable –se usa en escritorio– y con un gran abanico de posibilidades: es posible descargar o crear bibliotecas de widgets, crear estados, interacciones, comportamientos y relaciones entre elementos y crear rápidamente documentos de especificaciones y prototipos navegables.

Es ideal como herramienta en entornos de trabajo especializados y cuando la información tiene que pasar a equipos de diseño y desarrollo. Sin embargo, para proyectos algo más pequeños y cuando el principal objetivo de los wireframes es enseñar al cliente una estructuración básica de elementos, puede resultar demasiado potente —y caro— para la tarea.

2. Balsamiq

Balsamiq es una aplicación bastante sencilla de usar, que aporta gran libertad al diseñador a la hora de crear y que permite unos resultados interesantes si el objetivo es crear wireframes de baja fidelidad y con apariencia de boceto. Muchas veces nos interesa esta apariencia de boceto para evidenciar que estamos ante un wireframe y no ante el diseño final (sobre todo cuando lidiamos con clientes que no están acostumbrados a los procesos de creación en entornos online).

Una de las grandes ventajas de Balsamiq es la de permitir al usuario elegir entre el software descargable y su versión para Google Drive, una auténtica perla para aquellos que se pasan el día de un lado a otro y que necesitan cambiar de equipo con frecuencia. Aunque necesite algunas mejoras técnicas, la posibilidad de tener los archivos de los wireframes automáticamente guardados en la nube y de poder disponer de ellos y editarlos en cualquier lado es todo un lujo para algunos, lo que se une a un precio bastante atractivo.

3. UX Pin

UX Pin es el más reciente de los tres y sólo está disponible online, lo que tiene algunas ventajas (como las descritas antes para Balsamiq, aunque sin el añadido de Google Drive) y desventajas. Aunque parezca increíble, es posible que surjan ocasiones en las que el diseñador llegue a trabajar en sus wireframes sin acceso a la red. UX Pin funciona por suscripción, lo que permite un pago más cómodo que la compra de un software, como pasa con Axure. Por otro lado, es una herramienta bastante potente, con una interfaz bastante amigable, que recuerda bastante a Axure, en algunos aspectos, y que permite hacer prototipos con distintos niveles de fidelidad.

Una de las grandes ventajas de UX Pin es la facilidad para trabajar en proyectos responsive. Además, a nivel visual existen diversas bibliotecas y, en general, siguen unas líneas visuales muy finas y agradables, lo que da un aspecto moderno a los wireframes.

 


 

Como complemento a las herramientas de wireframes, muchas veces es muy útil crear una navegación a partir de imágenes, ya sea de wireframes o de mockups de alta fidelidad creados con Photoshop. Para eso, propongo dos herramientas, una muy sencilla que funciona a través de dropbox y que es de una sencillez pasmosa, Marvel, y otra más compleja, InVision, que permite creaciones más complejas e incluye herramientas de gestión del proceso de diseño. Cualquiera de ellas es digna de ser probada y hará las delicias de muchos diseñadores.

 


Wireframe icons designed by Missy Kelley from the Noun Project.

Comentarios (0)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *