Nivel 3

Herramientas para wireframes y simulacros de aplicaciones

Como ya vimos en la demanda, el formato de entrega es un video que funcione como trailer de la aplicación. Esto quiere decir que tranquilamente pueden utilizar las herramientas de edición de video con las que ya estén familiarizados.

Para quienes quieran incursionar en el mundo de las herramientas específicas para planear las pantallas y el contenido, les dejo un pequeño listado de opciones:

Adobe Experience Design CC (o XD)

Si ya están pagando el pack de Adobe, es una buena opción porque la podrían descargar gratis. Compatible con PS, permite importar pantallas con la estética ya diseñada por ustedes, a esta plataforma pensada para el diseño de experiencia.

Entre las principales características de Adobe XD destaca la posibilidad de utilizar sus herramientas intuitivas que permiten dibujar, reutilizar y mezclar elementos para crear wireframes, el diseño visual, los prototipos interactivos y los recursos necesarios para la producción final.

También es posible alternar el diseño en el que se está trabajando con la previsualización, pudiendo añadir –sin salir de éste– interacciones y animaciones para comprobar con exactitud cómo los usuarios experimentarían el producto. Incluso es posible compartir el proyecto a otros miembros del equipo.

InVision

También permite la creación de una maqueta móvil a partir de la importación de imágenes estáticas, y se puede manejar una amplia gama de complejidad, tanto desde los wireframes como en el producto final. Pero también es posible crear la maqueta directamente desde la plataforma.

Se puede aplicar la animación y simular gestos utilizando la funcionalidad nativa de las herramientas para hacer que el prototipo se sienta más realista y la experiencia sea muy cercana a la natural (alta fidelidad).

También proporciona herramientas que facilitan la comunicación en trabajos en equipo, y permite guardar el historial del proceso para poder probar varias soluciones a una misma problemática.

Está quizá es un poco compleja como para aprenderla durante este práctico, pero eso dependerá de cada uno.

Marvel

La primera diferencia con las anteriores, es que se trata de una herramienta online y no un programa. Esto nos lleva a evaluar que sin internet, no se podría avanzar con el proyecto.

No se utiliza para generar las pantallas desde ahí, sino que directamente se importan los diseños ya trabajados con otros programas.

Tiene la ventaja de ser muy intuitiva y eso la hace fácil de usar y de adaptarse.

Requiere acceso a una cuenta de Dropbox, y aunque establecen que solo es para los archivos cargados en Marvel, quizá lo más aconsejable sea crear una cuenta nueva.

SketchApp

Es de uso exclusivo para Mac. Al igual que Marvel es muy intuitiva en su uso, sobretodo considerando que ya estamos acostumbrados a los programas de diseño en general.

Es muy completa también en herramientas gráficas para el armado de pantallas directamente con el programa.

_

En nuestro caso, por demanda, se entrega un video. Con lo cual, quienes decidan utilizar este tipo de herramientas, tengan en cuenta que no reemplazan el trailer. Van a necesitar calcular un tiempo extra de trabajo, ya que una vez que tengan armada la aplicación y el boceto del funcionamiento, igualmente deberán hacer la animación con los efectos reales.

Consideren esto como una oportunidad de aprendizaje extra, tanto en el uso de herramientas como para las dinámicas de grupo. Probablemente sea de mucha utilidad para el trabajo del segundo cuatrimestre.

Share This Post

3 Comments

  1. Muy bueno Mili, gracias !

  2. Agrego una opción interesante que compite con Marvel: Figma (https://www.figma.com/)
    Es una app online, centrada en el trabajo en grupo. Tiene una opción gratuita (limitada), y tiene versiones para Windows, Mac y Linux (que en realidad son la versión web encapsulada en una ventana del sistema operativo, pero queda más linda).

    • En mi experiencia, nada supera la combinación de Sketch + Marvel.
      Marvel ofrece un plugin muy cómodo (https://marvelapp.com/sketch/) que se integra a Sketch para publicar las diferentes interfaces del prototipo directamente desde el programa, evitando exportar archivos para subirlos a la plataforma.

Leave a Reply