Documentar todas las animaciones y transiciones de tus diseños puede dejar de ser un dolor de cabeza si tienes en cuenta los siguientes consejos.
En el mundo del diseño digital, el Motion Design ha pasado en los últimos años de ser una simple tendencia a convertirse en una herramienta fundamental para crear experiencias de usuario únicas. A través del movimiento y las animaciones, los diseñadores podemos dar vida a nuestros diseños, guiar a los usuarios por la interfaz, ofrecer feedback sobre las interacciones y, en definitiva, transmitir la personalidad de una marca.
¿Qué es el Motion Design?
Antes de empezar es importante que nos quede claro que el motion design se refiere al uso del movimiento o animaciones de los diferentes elementos de nuestro diseño e integra principios de animación con técnicas de diseño gráfico y audiovisual para crear una experiencia interactiva y atractiva.
¿Por qué es importante documentar el Motion Design en un Design System?
La respuesta es simple: para que nuestros diseños generen experiencias de usuario fluidas, consistentes y únicas.
Aun siendo una parte fundamental en nuestros diseños en muchas ocasiones debido a la falta de tiempo y recursos esta parte se deja de lado. Sin embargo, para que realmente cumpla su propósito, es esencial documentarlo de manera adecuada dentro de nuestro Design System (si tienes dudas sobre si necesitas un Design System, te dejo aquí el artículo “¿Tu organización necesita un Design System?”, de mi compañera Diana).
La magia de que el Motion Design esté bien documentado es que conseguimos:
- Crear experiencias que sean coherentes y escalables
- Mejoramos la comunicación con el equipo de desarrollo
- Nos ahorramos tiempo y recursos a largo plazos
- Mejoramos la colaboración entre diseñadores y evitamos duplicidad de esfuerzo
- Generamos una base sólida para la evolución de nuestro Motion Design
¿Por dónde empezamos a documentar nuestro Motion Design?
Primer paso: asentar los cimientos
Fuente: Material Design
Lo primero que tenemos que hacer para documentar el movimiento es establecer una base sólida. Esto implica definir principios que guiarán el uso del movimiento en nuestros diseños, considerando aspectos como la personalidad de la marca, la jerarquía de la información, la experiencia del usuario y la accesibilidad.
Algunos ejemplos de principios que podríamos utilizar en nuestro diseño podrían ser:
- Claridad. Facilitar la comprensión de las acciones y cambios de estado.
- Suavidad. Evitar movimientos bruscos que puedan resultar incómodos para el usuario
- Vitalidad. Añadir animaciones que respondan a interacciones menores que nos ayuden a dar la sensación de que el diseño está “vivo”.
Segundo paso: tokenización del movimiento
Para aquellos que tengan dudas, los tokens son variables que representan valores específicos para propiedades específicas como pueden ser la duración, la aceleración, la curva de animación y el timing. Estos tokens nos permiten la creación de un lenguaje de movimiento consistente y escalable, facilitando la implementación de animaciones en diferentes componentes y plataformas.
Vamos a ver algunos ejemplos más en detalle de diferentes de como tokenizar nuestro Motion Design:
Define diferentes duraciones
Es importante que establezcamos categorías de duración que reflejen el propósito y la sensación que queremos transmitir en las animaciones, también deberíamos establecer valores numéricos para cada una de las categorías. Un ejemplo de la tokenización de la duración podría ser:
- duration-short (200ms). Para animaciones rápidas y sutiles, como cambios de estado o microinteracciones.
- duration-medium (400ms). Para animaciones más pronunciadas, como transiciones de página o aperturas de menús.
- duration-long (800ms). Para animaciones que requieren mayor atención del usuario, como narraciones o presentaciones de datos.
- duration-extra-long (1200ms). Para animaciones que ocupan una parte significativa de la experiencia del usuario, como introducciones o salidas de la aplicación.
Establece tipologías de easing
Fuente: Material Design
El easing determina la velocidad de un objeto a lo largo de su trayectoria. Es decir, permite modificar cómo un objeto se mueve desde el inicio hasta el final de una animación. Establecer categorías que representen los diferentes tipos de easing nos ayudará a mantener una coherencia en todo nuestro diseño. Para cada categoría es importante establecer los valores que representan la intensidad del efecto.
Algunos ejemplos de tokens de easing son:
- easing-linear (linear cubic-bezier(0.47, 0, 1, 1). Para un movimiento uniforme y constante, sin aceleración ni desaceleración.
- easing-ease-in (linear cubic-bezier(0.47, 0, 1, 1). Para un movimiento que comienza lentamente y se acelera gradualmente hasta llegar al final.
- easing-ease-out (cubic-bezier(0, 0, 0.2, 1). Para un movimiento que comienza rápido y se desacelera gradualmente hasta llegar al final.
Movimientos core
En algunas ocasiones podemos incorporar movimientos core en nuestro Design System. Definir y utilizar estos movimientos de manera coherente no solo mejora la estética de la interfaz, sino que también facilita la comprensión y la navegación por parte del usuario. Estos tokens de movimiento nos sirven como punto de partida para la construcción de animaciones más complejas asegurando la coherencia en nuestro diseño.
Algunos ejemplos de como definir los movimientos core podrían ser:
- Slide. Podemos utilizarlo para mostrar u ocultar elementos de la pantalla. Para transicionar entre diferentes estados de una interfaz o para animar elementos que entran o salen del viewport
Fuente: Base Design System (Uber)
- Escale. Para resaltar o enfocar elementos importantes. Para mostrar u ocultar contenido emergente
Fuente: Base Design System (Uber)
- Rotate. Para indicar un cambio de estado. Para agregar dinamismo a iconos o elementos gráficos.
Fuente: Base Design System (Uber)
3. Tercer paso: Ejemplifica las animaciones.
Para que la documentación sea realmente útil, es importante que añadamos ejemplos visuales de las animaciones, y si podemos añadir algo de código. Estos ejemplos deberían mostrar cómo aplicar los principios, tokens y movimientos core definidos y ayudarán al resto de diseñadores y desarrolladores a comprender mejor cómo implementar las animaciones.
Y para acabar, sé que documentar todo el Motion Design es algo que de entrada puede parecer algo tedioso, pero espero que con estos consejos se te haga más fácil el proceso. Y, si crees que necesitas un Design System que se adapte a las necesidades específicas de tu negocio, en Interactius podemos ayudarte. Somos expertos en diseñar productos únicos y sistemas de diseño para poder crecer de forma consistente. Ponte en contacto con nosotros y te ayudaremos.
