Creación de wireframes

Los wireframes son herramientas muy importantes en el proceso de creación centrada en el usuario. Con las herramientas adecuadas se pueden crear fácil y rápidamente.

Ya he escrito respecto del proceso de arquitectura de un proyecto digital sobre la producción de mapas mentales y flujos de usuario; el siguiente paso en el proceso de diseño centrado en el usuario corresponde a los wireframes, que nos ayudan a definir cuáles serán los elementos en la interfaz y en los sistemas de navegación, así como la forma en que trabajarán juntos.

Wireframe en papel
Wireframe en papel

Los wireframes no son parte del proceso de diseño visual, por lo que no incluiremos en este proceso la definición de colores, gráficos o la tipografía a utilizar en el diseño final.

Wireframe low-fi con Balsamiq
Wireframe low-fi con Balsamiq

Se pueden construir dos tipos de wireframes: los de baja calidad y los de alta calidad. Los wireframes low-fi son esquemas donde sólo vamos a colocar cuadros abstractos con una etiqueta simple que explique su rol en la maqueta. Los wireframes low-fi pueden crearse usando sólo lápiz y papel, en un pizarrón o con una herramienta que no aporte mucho detalle como Balsamiq Mockups.

Los wireframes high-fi son aproximaciones más complejas y detalladas donde todas las opciones de navegación, como las opciones para aceptar términos o condiciones, o para recuperar una contraseña sí están presentes. Los wireframes high-fi pueden servir incluso para desarrollar un prototipo interactivo.

Una buena herramienta para desarrollar wireframes detallados es Axure RT, aunque aplicaciones como Adobe Illustrator también son muy recurridas por su flexibilidad.

Wireframes high-fi en Axure
Wireframe high-fi en Axure

La ventaja de herramientas como Axure o Balsamiq es que fueron creadas desde el principio para crear wireframes de manera muy sencilla, basando su interfaz en un modelo de interacción de arrastrar-y-soltar (drag and drop).

Axure incluye además herramientas de personalización e interacción poderosas donde un  wireframe simple puede llegar a verse y a funcionar casi como el producto final con poco esfuerzo, porque los archivos del wireframe se exportan como HTML, lo que permite realizar trucos muy interesantes mediante CSS y JavaScript sin necesidad de tener escribir código desde cero.

En futuros artículos escribiré más a fondo sobre Axure como herramienta de prototipado, desde sus funciones más básicas hasta algunos trucos para conseguir prototipos interactivos avanzados.

UX Specialist en Foo Studio. Creador de geekoteca.com. Fan de LEGO