Home ¬Ľ Dise√Īo ¬Ľ Motion design: la √ļltima tendencia en el dise√Īo de apps y p√°ginas web
Motion design: la √ļltima tendencia en el dise√Īo de apps y p√°ginas web

Motion design: la √ļltima tendencia en el dise√Īo de apps y p√°ginas web

El motion design en el dise√Īo de p√°ginas web y aplicaciones ha pasado de ser un extra agradable a algo imprescindible para enganchar al usuario.

Si estás pensando en cómo crear una página web atractiva, o estás buscando un experto en desarrollo de aplicaciones para crear tu app, este artículo es para ti.

Descubre esta tendencia que mejorar√° la interfaz de usuario (UI) de tu proyecto y lo llevar√° al siguiente nivel.

Qué es el motion design

Literalmente, motion design es dise√Īo en movimiento. Sin embargo, no consiste en simplemente animar un elemento de la p√°gina cuando el dise√Īo est√° acabado.

El motion design debe estar integrado en la fase de concepción del UI/UX. Esto es porque no es simplemente cargar de animaciones una página, sino que el movimiento tiene que significar algo, tener un propósito.

El motion design es la tendencia hacia la que se dirige el dise√Īo de la interfaz de usuario. Ahora, la apariencia de los objetos ya no es lo m√°s importante: la forma en que se mueven los elementos lo es tanto o m√°s.

 

¬°Echale un vistazo a este video sobre las tendencias en dise√Īo gr√°fico para el 2020!

Aunque si no habías escuchado antes el término, puede que te estés preguntando si la animación es lo mismo que el motion design, pero son conceptos distintos.

Podríamos decir que la animación es el gran paraguas que agrupa cualquier tipo de imagen en movimiento: desde técnicas como el stop motion a la animación con dibujos animados o con plastilina. Su intención suele ser la de contar una historia.

Sin embargo, con motion design nos referimos a animaciones más simples y refinadas, que quieren comunicar ideas al usuario. 

 

Quiz√°s te interese: Los 10 errores de dise√Īo web m√°s comunes que puedes evitar

 

Puntos clave del motion design en el desarrollo web

Si todavía necesitas más motivos para acabar de convencerte, te contamos los principales beneficios que aportará el motion design a la UI de tu proyecto web o app móvil.

Facilita la navegación

Las microinteracciones del motion design hacen posible una navegaci√≥n m√°s sencilla y atractiva para el usuario, que si se utilizan otros elementos como men√ļs demasiado extensos.

Define tu estructura e interacciones

Estas microinteracciones pueden servir para definir cómo será la navegación en tu página web o app. Con el motion design puedes aprovechar para invitar a hacer cierta acción al usuario, como agregar un artículo a la cesta de la compra, o revelar gestos ocultos en la UI de una app móvil.

 

Contenido relacionado | Estructura web: descubre cómo hacer un mapa para tu sitio

 

Enmascara tiempos de carga lentos

El motion design puede ayudarte a que el usuario no note cuándo una página tarda más de lo que es habitual en cargar. Esto no quiere decir que puedas descuidar la optimización de tu página, recuerda que los buscadores penalizan el bajo rendimiento.

Pero si el usuario debe esperar unos segundos de más, un minijuego con el ratón o una animación divertida pueden hacerle olvidar la espera.

Da feedback a los usuarios de sus acciones

En ocasiones, el motion design esconde peque√Īos ‚Äúeaster eggs‚ÄĚ en la aplicaci√≥n m√≥vil o en el dise√Īo de p√°ginas web. Piensa en el confeti y globos sonrientes que aparecen al escribir la palabra enhorabuena en Facebook.

Puedes provocar una sonrisa premiando al usuario que realice la acción que buscas: registrarse, suscribirse a la newsletter o agregar un producto a la cesta, son acciones que pueden potenciarse con el motion design.

 

Artículo recomendado | Growth Driven Design: la metodología que te interesa para tu web

 

Destaca tu app o web entre la inmensidad

Puede parecer que el motion design sea algo menor, carente de importancia. Pero lo cierto es que puede marcar la diferencia de calidad de un proyecto web o aplicación móvil.

Estas microinteracciones hacen posible destacarse entre la inmensidad de internet y las tiendas de aplicaciones.

Aumenta la duración de la sesión

¬ŅA qui√©n no le gusta pasarlo bien? Si un usuario disfruta con el contenido de tu app o p√°gina web y, adem√°s, haces que la experiencia de usuario sea fluida y atractiva, permanecer√° m√°s tiempo navegando o usando tu aplicaci√≥n. Y de esta manera, aumentar√° el engagement y la retenci√≥n de usuarios. Win-win.

 

Quieres crear una app o web a medida. ¡Cuéntanos sobre tu proyecto y te ayudamos hacerlo realidad!

 

Ejemplos de motion design para conquistar

Ya has le√≠do que hay m√ļltiples opciones para sorprender a tus usuarios con el uso del motion design. Ahora llega el turno de verlo con tus propios ojos. Te proponemos algunos ejemplos del uso del motion design para que te inspires y consigas conquistar a tus seguidores.

Twitch: sorpresa oculta

El redise√Īo de Twitch, la plataforma de streaming de videojuegos, es la excusa para realizar un microsite en el que se explican las novedades. El motion design es el absoluto protagonista de la navegaci√≥n, con los elementos que se van desplazando seg√ļn se avanza en la lectura.

Pero la sorpresa llega al pasar por encima de un peque√Īo piano. Al pulsar las teclas, suena un sonido y aparece una lluvia de gifs en la pantalla.

 

Botón multiusos

En el desarrollo de aplicaciones móviles es muy importante que la navegación sea cómoda. Por eso se intenta que el usuario pueda realizar las acciones principales con una sola mano.

En este ejemplo, con una peque√Īa animaci√≥n un bot√≥n pasa a tener m√ļltiples funciones si se mantiene pulsado.

 

ejemplo de boton multiuso en apps
Botón multiuso en función de chat. Fuente: Uplabs

 

Un registro diferente

El proceso de registro en una web o aplicaci√≥n suele ser una de las partes m√°s tediosas de la navegaci√≥n. ¬ŅPor qu√© no hacerlo m√°s agradable gracias al dise√Īo?

Con el motion design puedes conseguirlo agregando transiciones que mejoren la experiencia de usuario. Mira este ejemplo:

 

ejemplo proceso de registro para una app
Ejemplo interacción de registro. Fuente: Dribbble

 

Movimiento para resaltar los destacados

En esta aplicación, los vídeos destacados tienen todo el protagonismo. Al reproducir el vídeo, una transición amplía la miniatura a pantalla completa, sin tener que cargar una nueva pantalla. Así se consigue una navegación más fluida.

Apuesta por el motion design para el desarrollo web o app

El motion design aporta la sensación de interacción con objetos físicos a través de la pantalla de cualquier dispositivo y hacen que la presentación sea más atractiva para los usuarios.

¬ŅBuscas un equipo experto en motion design? En Yeeply podemos ayudarte a encontrar a los profesionales m√°s cualificados. Cu√©ntanos tu proyecto y, ¬°que empiece el movimiento!

Proyecto Dise√Īo

Escrito por

Yeeply
Yeeply

Yeeply es una plataforma premium especializada en el desarrollo de apps móviles y sitios webs a medida. Desde 2012 nuestros clientes nos confían el desarrollo de sus proyectos, y nos apoyamos a nivel técnico en los mejores profesionales certificados: desarrolladores de aplicaciones móviles o web freelance, empresas de software top, y agencias mobile más punteras. ¡Crear una app o crear una web nunca ha sido tan rápido, confidencial y seguro como con Yeeply! Publica tu proyecto de software en Yeeply y deja que nuestro equipo te ayude durante todo el proceso.