Interfaces animadas con Quartz Composer, Hype, Sencha Touch

Interfaces animadas, ¿el fin de la era Photoshop?

Emma Llensa 31 mayo, 2013 Diseño gráfico 2 minutes

Lo último en interfaces son las interfaces animadas. Esto significa que si las tendencias siguen este camino, si las interfaces animadas acaban siendo un estandard, no podremos diseñar interfaces en Photoshop. Si bien Photoshop incluye en sus últimas versiones un menú para hacer animaciones, no es, seguramente, el mejor medio donde hacer prototipos y diseños de interfaz.

Julie Zhuo, responsable de diseño de producto en Facebook escribe una entrada en su blog sobre el diseño de Home, la nueva aventura ambiciosa de Facebook. Nos explica:

No puedes diseñar algo como Facebook Home usando Photoshop, […] ya que algo como el diseño de Home está más allá de las posibilidades de Photoshop como herramienta de diseño. ¿Cómo podemos hablar de interfaces de usuario y de paneles basado en física y de burbujas que pueden moverse por la pantalla si estamos delante de un programa estático?

En Facebook utilizan Quartz Composer, un programa que viene instalado en el paquete de pogramas de Xcode (el entorno de desarrollo integrado de Apple y que se podemos bajar gratuitamente des de la App Store de Mac). Quartz Composer es una herramienta de prototipado visual que nos permite realizar mockups o prototipos realmente fieles a cómo será el producto final. Explica Zhuo que Quartz Composer facilita muchísimo el trabajo a los programadores y que es una herramienta genial para explicar cómo será el diseño.

Ejemplo de Quartz Composer

Pasquale D’Silva, diseñador y animador de producto en Elepath, nos explica cómo está diseñando una app para que el usuario tenga una lista de cosas que quiere recordar agrupadas en diferentes categorías.

Diseño de interfaz - Animaciones

Su teoría es que si el usuario es capaz de ver dónde le estamos llevando, será capaz de entender dónde está sin necesidad de usar “breadcrumbs” en nuestro diseño. La idea es que las animaciones llevan al usuario por el “camino” de la app, por las diferentes pantallas, de una manera visual sin necesidad de explicaciones. Las animaciones pueden aportar un grado de información añadido a un interfaz que puede solucionar varios quebraderos de cabeza a los diseñadores. La dimensión del tiempo es una dimensión a tener en cuenta a la hora de diseñar interfaces.

Si no nos queremos complicar la vida con Quartz Composer porque nos parece una herramienta bastante compleja, podemos usar la herramienta Sencha Animator o Tumult Hype para hacer animaciones en html.