Diseño de movimiento para la web, iOS y Android con Haiku

Un objetivo de diseño común de los productos digitales modernos es sorprender y deleitar a los usuarios, y el diseño de movimiento puede ser una herramienta poderosa en su arsenal para hacerlo. Las animaciones de carga entretenidas, los comentarios gratificantes y el uso del movimiento para dirigir la vista entre las transiciones son excelentes maneras de elevar su experiencia de usuario.
 
Paul Stamatiou resumió bien nuestros pensamientos sobre dónde deberían encajar los diseñadores en esta ecuación hace más de tres años:

Lamentablemente, la mayoría de las herramientas de diseño y flujos de trabajo modernos no están configurados para permitir que los diseñadores diseñen esos 58 marcos.

Los flujos de trabajo populares de hoy en día giran en torno a la creación de prototipos desechables que se utilizan para comunicarse con los desarrolladores que luego recrean minuciosamente las animaciones con lo mejor de sus ojos y capacidad en código.
 
No solo es una pérdida de tiempo y recursos, sino que el proceso es tan agotador que incluso los diseñadores y desarrolladores experimentados terminan optando por implementaciones "suficientemente buenas". Y si quieren repetir sus diseños después de probar un concepto, volverán a comenzar desde el principio.

El haiku es diferente

Haiku es una herramienta de diseño moderna que permite a los diseñadores y desarrolladores crear componentes de interfaz de usuario imaginativos. Código opcional. Con su línea de tiempo visual, es fácil diseñar interfaces alimentadas por movimiento.

Conoce a Haiku

Todo lo creado en Haiku está listo para la producción, y una vez integrado con su base de código puede continuar iterando en sus diseños. No se necesita mano.

Pensar en el tiempo y el espacio.

Antes de arremangarnos en Haiku, es útil pensar en cómo queremos traducir nuestros diseños en movimiento, pensando como un animador, en el tiempo y el espacio.

Si eres nuevo en el movimiento, una forma simple de hacerlo es con el guión gráfico.

Los Storyboards fueron popularizados por Walt Disney Productions en la década de 1930 como una forma para que los animadores y directores comunicaran una historia como una secuencia. En el diseño de interacción, los guiones gráficos pueden ayudarnos a determinar:

  • Qué elementos necesitaremos
  • Qué propiedades manipularemos
  • Con qué fotogramas clave comenzaremos (más sobre eso más adelante)

Por ejemplo, vamos al guión gráfico como una pelota que rebota, que usaremos para comenzar en Haiku:

A partir de este guión gráfico simple, podemos determinar:

  • Necesitamos 2 elementos; la pelota y la sombra
  • Queremos modificar la posición de la pelota, la escala de la pelota y la opacidad de la sombra.
  • Necesitamos al menos 3 fotogramas clave para que nuestra animación se repita sin problemas

Al crear guiones gráficos, trate de no obsesionarse con los pequeños detalles: mucha de la magia en movimiento ocurre al animar e iterar visualmente sus diseños. Solo descubre lo suficiente para comenzar.

Comenzando con Haiku

Trabajando con croquis

En Haiku, hay 2 formas de trabajar con Sketch: puede importar un archivo de Sketch existente o crear nuevos diseños desde cero.

Si desea comenzar con un nuevo diseño, la mejor manera de hacerlo es comenzar a diseñar en el archivo de boilerplate Sketch incluido en cada proyecto Haiku. Simplemente haga doble clic para editar:

El archivo de boilerplate Sketch contiene más instrucciones; las cubriremos más adelante.

También puede importar archivos Sketch y SVG existentes:

Aquí hay uno que hice antes.

Haiku busca mesas de trabajo y cortes y los importa de forma inteligente como elementos separados en su biblioteca. Después de dibujar su bola y sombra, la forma más fácil de convertir sus formas en rodajas es marcarlas como "Hacer exportables" en Sketch:

Después de presionar guardar, tus secciones de Sketch aparecerán en tu biblioteca de Haiku:

Luego puede arrastrar elementos de la biblioteca al escenario:

Cada vez que se edita una propiedad, Haiku crea automáticamente un fotograma clave donde se coloca el cursor de reproducción. Piense en los fotogramas clave de la misma manera que lo haría en nuestro guión gráfico original.

Las propiedades se pueden editar directamente en la línea de tiempo o manipulando elementos visualmente en el escenario:

Introducir propiedades precisas garantiza un bucle 100% continuo de nuestra pelota que rebota.

Ahora que nuestros fotogramas clave están configurados, facilitemos sin problemas entre ellos utilizando la biblioteca de interpolación integrada haciendo clic derecho en la línea de tiempo. Estoy usando Ease In → Cubic y Ease Out → Cubic pero recomendaría experimentar con diferentes interpolaciones para encontrar la correcta para su animación:

¡Ahora estamos llegando a alguna parte!

Usando las técnicas básicas que acabamos de emplear, es fácil agregar más detalles. Agregar fotogramas clave a la mitad de la línea de tiempo para revelar la sombra cuando la pelota está cerca:

Y aplastando la pelota verticalmente para emular la física:

La publicación genera una URL compartida única que puede usar para compartir con otros:

La página de compartir le permite obtener una vista previa de su haiku en la web con instrucciones de inserción:

Ver la página para compartir este haiku

Todo lo creado en Haiku es puro JS / CSS listo para encajar en cualquier aplicación web, con renderizadores nativos para iOS y Android con tecnología de Lottie.

¡Eso es un envoltorio!

Si has llegado hasta aquí, probablemente deberías registrarte en la versión beta privada si aún no lo has hecho. Si tiene alguna pregunta, no dude en comunicarse en los comentarios a continuación.

También puede mantenerse al día con lo último sobre:

  • Gorjeo
  • Facebook
  • Instagram
  • Flojo