Impacto del Motion Design en el diseño de interfaces + Caso práctico
Significado, importancia e implementación de Motion Design
El Motion Design es la animación de un objeto (imagen, ilustración o recurso gráfico) dentro de cualquier entorno digital, como un sitio web o la interfaz de un dispositivo móvil, que sirve para transmitir un mensaje, idea o pensamiento. Y para que conozcas más sobre su importancia, en este artículo te explico más sobre lo que es y cómo llevarlo a la práctica.
¿Qué es Motion Design?
En el diseño de interfaz, se suele pensar que Motion Design solo es una animación que sirve para que una interfaz gráfica se vea bonita, pero la realidad es que su función va más allá de esto.
El Motion Design es la animación de elementos gráficos que sirven para comunicar un mensaje y así, lograr que el usuario conecte e interactúe con una interfaz de manera orgánica y tenga una mejor experiencia.
¿Para qué sirve el Motion Design dentro de una interfaz?
El Motion Design como lo expliqué en el párrafo anterior, es un recurso útil para transmitir un mensaje de manera gráfica, con movimientos o gestos. Lo que a la vez sirve para mejorar la usabilidad de un sistema.
Lo anterior es posible porque se basa en estos 4 pilares esenciales:
- Expectativa: es la manera en la que el usuario percibe un objeto y el comportamiento que espera tenga.
- Continuidad: se refiere a la continuidad y consistencia de las micro interacciones dentro de una interfaz, que en conjunto crean una experiencia digital.
- Narrativa: es la progresión lineal de eventos que forman parte de un marco temporal y en donde el usuario navega libremente.
- Relación: trata de la representación jerárquica, temporal y espacial de los objetos relacionados entre sí.
12 principios de UX en movimiento
Ahora bien, antes de seguir con el ejercicio, te quiero presentar los 12 principios del UX en movimiento para que conozcas las diferentes maneras en las que se puede crear usabilidad con movimiento.
- Easing / Suavizado: el comportamiento del objeto se alinea a lo que el usuario espera (contrario: animación lineal).
- Compensación y retraso: la relación entre los objetos a iniciar escena. Jerarquía.
- Parenting: la relación entre objetos y la jerarquía dentro del espacio que ocupan.
- Transformación: el cambio de forma que anticipa el cambio de narrativa.
- Cambio de valor: establece el cambio dinámico de un objeto a otro manteniendo la forma de manera progresiva.
- Enmascarado: acción de mostrar, esconder y revelar objetos dentro de una composición.
- Superposición: cambio de jerarquías de los objetos en el espacio tridimensional, por ejemplo: un objeto pasa frente a otro para ocupar su lugar.
- Clonado: suavizado que se produce al multiplicar los objetos mostrados en pantalla, cuando un objeto se separa de otro.
- Oscurecimiento: permite mostrar relevancia a objetos de interés al realizar alguna acción, por ejemplo un pop-up.
- Parallax: muestra la dimensionalidad del espacio y los objetos al realizar un scroll en pantalla.
- Dimensionalidad: crea un efecto de dimensionalidad en los objetos al mostrar transformaciones en 3 dimensiones.
- Dolly & Zoom: habla de la relevancia de los objetos puestos en escena, por ejemplo: cuando se coloca una imagen y se realiza zoom al hacer clic.
Ahora que sabes qué es, para que sirve y la importancia del Motion Design en el diseño de interfaces, es momento de seguir adelante con la demostración de cómo crear movimiento para mejorar la usabilidad de una interfaz digital.
¡Veamos!😉
Caso práctico: diseñando elementos con Motion Design
Para el ejercicio vas a utilizar las herramientas de Adobe After Effects para crear un loader que le indique al usuario el estado del sistema (en este caso será de carga de información). Esto porque un loader ayuda a mantener la atención del usuario al mismo tiempo que le indica que se está realizando un proceso de carga.
¡Comencemos!👇
1.Abre After Effects y crea un nuevo proyecto.
2. Navega en la barra superior de herramientas para ubicar la opción de “Composición / Composition”, haz clic en esa opción para revelar el listado de herramientas disponibles y selecciona una nueva composición.
3. Crea una nueva composición con las siguientes características:
Al terminar habrás creado una nueva composición con un tamaño de 500px * 500px, con un framerate de 25 fps y una duración de 3 segundos.
4. Crea una nueva forma (en este caso una elipse), ubícala en cualquier punto de la pantalla dentro de la composición y con CTRL + Shift haz una elipse de tamaño proporcional.
5. Ahora centra la elipse. Ve al panel lateral de herramientas, expande el listado “Alinear / Align” en el selector y elige alinear al centro verticalmente y horizontalmente.
6. Cambia el tamaño de la composición seleccionando la herramienta de escala (tecla S) y colócala en un 20%, dependiendo del tamaño de lo que hayas creado.
7. Selecciona tu figura en la línea de tiempo y duplícala con CTRL + D (esto duplicará la forma y sus propiedades). Después arrástrala hacia arriba hasta tener algo así:
8. Ahora presiona la tecla (T) para cambiar la opacidad de tu objeto creado. Para esto haz un fotograma clave al inicio de la línea del tiempo presionando el icono de cronómetro, avanza 10 fotogramas y coloca otro clave cambiando la opacidad a 0%. De esta manera tu objeto se desvanecerá cuando transcurran 10 fotogramas.
9. Haz parenting para emparentar la forma duplicada a la forma original (la que está centrada). Esto servirá para que, en caso de que decidas cambiar la posición de la forma original, la forma duplicada mantenga el mismo trayecto, pero desde la posición en la que se encuentra.
10. Ahora presiona el ícono de “ojo” en la capa original para ocultarla.
11. Crea una nueva composición con la misma configuración que ya tienes. Arrastra tu composición 1 a esta nueva composición y céntrala.
12. Una vez que hayas centrado tu composición, vas a duplicarla (CTRL+D) y la rotarás a 20 grados con la herramienta rotación (R).
13. Ahora debes mover tu composición 2 frames presionando CTRL + dirección derecha en el teclado; mueve la línea azul los 2 cuadros, mueve tu composición duplicada en la línea del tiempo donde se ubica el indicador azul y suéltala.
14. Ahora solo debes repetir el paso 12 y 13 hasta que tu rotación de una vuelta (360º). Al finalizar así se verá tu resultado final:
De hecho, para mostrarte un ejemplo relacionado al ejercicio que acabas de realizar, preparé un prototipo de Figma con el resultado final aplicado a una interfaz gráfica. Para este caso utilicé una práctica de diseño de la tienda de recursos artísticos Jerry’s Artarama en donde el carrito de compras tarda en cargar y se muestra la animación del loader:
Crea una interfaz amigable para las personas
Ahora que conoces los principios, la importancia y el por qué del Motion Design en el diseño de interfaces, te invito a materializar tus ideas para ayudar a los usuarios a que interactúen de manera más ágil con tu producto, ya sea mediante gestos en pantalla o con animaciones.
Recuerda que el Motion Design no solamente consiste en animar un objeto para que sea vistoso, su intención es mejorar la usabilidad y tiene enfoque en las personas. Por esto es fundamental que seas responsable con su uso y evites sobrecargar tus productos, a veces solo basta una micro interacción para mejorar la experiencia.
¿Quieres leer más temas relacionados? 👉Visita el blog de Nowports Tech👈
