Cuando se diseña un sitio o aplicación web, lo habitual es diseñar directamente sin realizar previamente un análisis donde se detecten las necesidades y mejoras que se deben de incluir. Muchas veces, se trabaja de esta manera por falta de tiempo, por la inexistencia de un departamento o perfiles capacitados o bien porque no se reconoce la labor importantísima que realiza un diseñador de UX/UI.

No obstante, sea la razón que sea, debemos de intentar poner en práctica la fase previa al diseño final, aunque tan sólo sea elaborar unos bocetos donde recoger la navegación, estructura y contenido del sitio o aplicación web.

Como os he contado en otro artículo, los bocetos se pueden hacer en papel, pero si dispones de algo de tiempo sería genial que lo trasladases al medio digital, ya que se podrá compartir fácilmente, tanto con el resto del equipo, como con el propio cliente.

Este paso, de boceto en papel al medio digital, permite realizar wireframes, tan importantes para detectar requisitos que aportan una gran mejoran, con el fin de generar una buena experiencia de uso.

He probado varias herramientas, como Justinmind o Sketch, pero me quedo con Axure. Estos software no son gratuitos, algunos tienen una versión gratis, que permite ampliar la licencia, y otros requieren la compra, como es el caso de Axure.

¿Porqué Axure?

Dependiendo de las necesidades del proyecto, puedes utilizar las otras herramientas que te he indicado antes, pero si tienes Axure, podrás diseñar y compartir los prototipos, gracias a el servidor en el que publicar los proyectos de manera privada, y además, permite realizar directamente la documentación del proyecto a nivel de página, incluyendo las especificaciones interactivas.

Los prototipos pueden ser estáticos, pero para aprovechar al máximo la herramienta, Axure está preparada para crear interacciones y diseñar prototipos navegables. Pero debes de tener en cuenta, que el código HTML que genera cuando se publica en su servidor, no es código «limpio» ni sigue «buenas prácticas», por lo que no es reutilizable para el desarrollo del proyecto.

Axure RP 8

Referencias

Si quieres saber más sobre Axure, accede a estas web:

• Blog oficial de Axure (en inglés)
• 25 consejos para ser cinturón negro de Axure (en inglés)

Para hacer prototipos responsive en Axure, debes tener muy claro los tamaños de tus dispositivos y realizar el diseño para cada uno de ellos. Aquí os dejo unas web que os pueden guiar:

• Crear prototipos de sitios web responsive (en español)
• Prototipado móvil avanzado en Axure RP Pro: consejos y ejemplos (en inglés)
• Widget descargable y vídeo sobre Axure Responsive (en inglés)
  • Widget descargable

Sitios sobre Axure:

• Aprende Axure en español
• Prototipos Axure: artículos y vídeos (en inglés)

Nota: en este artículo se añadirán recursos relacionados e interesantes.