Diseño UI/UX

Ilustración y animación: Potenciando la experiencia de usuario

Desde el comienzo de los tiempos, el ser humano siempre ha buscado nuevas alternativas y formas de comunicación. La existencia de la expresión visual se ha transformado en un concepto de comunicación plasmado en emociones, sentimientos, historias, secuencias, formas y momentos, a través de la narración visual. Hoy en día, se ha transformado en una parte esencial del diseño para la experiencia de usuario.

La expresión gráfica ha evolucionado exponencialmente desde las pinturas rupestres mesolíticas y neolíticas. Actualmente la podemos ver implementada en productos digitales de todo tipo.

Guiar la alfabetización en la digitalización visual 

El uso de la ilustración y la animación está muy presente en aplicaciones, páginas web, videojuegos, softwares, entre otras plataformas digitales. Sirve para hacer énfasis en elementos de contenido y entregar personalidad, fuerza e identidad a nuestros productos.

Tanto la ilustración como la animación son un punto muy importante si hablamos de diseño de interfaz. Esto se debe a que son elementos que funcionan como una gran fuente informativa, sin la necesidad de contenido textual o editorial. Si juntamos ambos elementos podemos afirmar que estamos favoreciendo significativamente la comprensión del contenido entregado al usuario. 

¿Para qué nos son útiles?

Son una alternativa lúdica y entretenida de presentar la información. En esta línea, también ayudan a mantener al usuario atento, concentrado y con ganas de seguir viendo más y más el contenido de tu plataforma. 

Nos sirven para: 

• Crear interacciones y microinteracciones 
• Infografías 
• Composiciones de horizontes 
• Walkthroughs 
• Loaders
• Botones 
• Al hacer zoom a una imagen
• Efecto hover 
• Visualización de data
• Gamification
• Branding de una marca
• Banners
• Skeleton screens
• Campañas de mailing
• Redes sociales, entre muchos otros formatos.

Jason McCall en Dribbble (cuando mezclamos Ilustración y fotografía ocurren cosas sorprendentes)

Ejemplo de ilustración en plataformas digitales 

Las animaciones en la experiencia de usuario

La palabra “animación” viene del latín animatio y significa “aumento de la actividad y la energía”. Por eso, a diferencia de la ilustración, la animación digital es una técnica que se concentra en el “movimiento” de personajes u objetos a los que se les entrega vida. Su estilo, en plataformas digitales, varía según el objetivo de cada marca, negocio o plataforma.

Ejemplo de animación en páginas web 

Ejemplo de animación en un step de formulario 

Todo diseñador de interfaces viene con este chip ya instalado, tenemos el don de gestionar el contenido de tal manera que se pueda visualizar en diferentes formatos. Si esto lo llevamos al explorador, vamos a ‘inspeccionar’ y luego al ícono para visualización responsive nos podemos dar cuenta que inconscientemente ya estamos generando ese movimiento propio de la animación. 

Solamente hace falta el hacernos cargo de la transición y de cómo disponemos, plasmamos y entregamos una composición en movimiento. Si bien crear plataformas con ilustraciones o animaciones es hoy una tendencia indiscutida, el objetivo debe ser siempre que sirva para guiar y apoyar la comprensión del contenido y la experiencia de usuario.

Algunos programas que te pueden ayudar a crear animaciones son:

• Adobe After effects
• Animatic
• Blender
• Natron

Ejemplo de animación en Landing page por Filip Justić en Dribble

Al final, todo dependerá del contenido que quieras entregarle a tus usuarios. Recuerda siempre que se debe complementar con texto para transmitir correctamente el mensaje, ya que comprender una elemento gráfico siempre será subjetivo y dependerá del momento y la persona que lo vea.

Fuentes

Animando la ilustración e ilustrando el mundo en movimiento a través de visual literacy – OCS Editorial