Una introducción a la animación en diseño web
La animación ya no es solo para dibujos animados. Desde imágenes en movimiento de pantalla completa hasta pequeños efectos de desplazamiento, aparecen toques de animación en todas partes. La animación es moderna, divertida y fácil de usar.
Y los obstáculos para usar la animación han comenzado a caer. Con la mayoría de los usuarios en conexiones de alta velocidad y la facilidad de crear cualquier cosa, desde movimientos simples o un gif tonto hasta varios minutos de acción, las animaciones se han convertido en herramientas prácticas y útiles de diseño web.
Explore los elementos de Envato
Conceptos básicos de animación
La animación ocurre cuando algo creado en forma fija o bidimensional se "da vida" y parece moverse de una manera que sigue las leyes de la física. Es la forma en que un personaje de dibujos animados cruza la pantalla o cómo el ícono de una aplicación rebota como una pelota mientras se carga en el escritorio de su Mac.
Una de las palabras que es casi sinónimo de animación es Disney. A principios de la década de 1980, dos de los principales animadores de las compañías escribieron un libro que detalla los 12 principios de la animación. La "Ilusión de la vida: animación de Disney" de Frank Thomas y Ollie Johnston todavía proporciona el marco para la animación actual.
- Compresión y extensión
- Anticipación
- Puesta en escena
- Acción directa y pose a pose
- Seguimiento y acción superpuesta
- Slow In y Slow Out
- Arco
- Acción secundaria
- Sincronización
- Exageración
- Dibujo sólido
- Apelación
Las animaciones web a menudo se guardan como GIF, CSS, SVG, WebGL o video. Pueden ser desde un simple subrayado que aparece cuando pasas el cursor sobre una palabra hasta un video de pantalla completa o una imagen de fondo. Al igual que con cualquier otra técnica de diseño, las animaciones pueden ser sutiles o pueden ser difíciles de evitar.
Tendencia emergente de 2017
La animación en diseño web es algo que estamos comenzando a hacer todos los días. La clave de la animación como tendencia de diseño es la moderación. Pequeñas animaciones simples son interesantes e interesantes; Es posible que el usuario ni siquiera piense que es una animación. Las animaciones a gran escala pueden ser un elemento visual interesante que lo atraiga hacia el diseño. Pero si comienza a mezclar demasiados efectos de movimiento diferentes, puede causar un caos completo.
Lo que hace que la animación sea moderna es el realismo. En el panorama del diseño actual con tantos diseños de estilo plano y minimalista, los usuarios necesitan más pistas para decirles qué hacer. Los bits simples de animación pueden guiar al usuario sin cambiar la estética. Ayuda a agregar instrucciones y orden para diseñar esquemas que pueden ser demasiado simples visualmente para proporcionar suficiente dirección a los usuarios. En este caso, la animación crea un medio feliz entre la simplicidad simplificada y la usabilidad.
El otro factor que contribuye a esta tendencia es el acceso a las herramientas en los extremos del usuario y del diseño. Ya no necesitas Flash para animaciones más complicadas. (Y si todavía está construyendo en Flash, es hora de detenerse). Se puede lograr de varias otras maneras. Las animaciones de hoy no obstruyen los sitios web o los servidores web, lo que hace que los efectos se carguen rápidamente para los usuarios y con las animaciones de acceso a Internet de alta velocidad no se saltan ni se atascan a mitad del ciclo de eventos.
Animaciones grandes versus pequeñas
Cuando se trata de animar para la web, se divide en dos categorías igualmente fáciles de entender: grandes y pequeñas. (Probablemente puedas adivinar cómo se ven).
Las animaciones grandes son las que tienen una escala para ellas. A menudo en forma de un video con un tiempo de ejecución, las animaciones a gran escala llenan una parte significativa de la pantalla y son características de una película corta. Estas animaciones sirven como un punto focal en el diseño general. Los usuarios a menudo no tienen que realizar ninguna acción para ver la animación en movimiento. Si observa de cerca en el sitio de Studio Meta, cada una de las imágenes grandes se amplía a medida que lee la copia.
Pequeñas animaciones son pequeños fragmentos que descubres cuando comienzas a interactuar con un sitio web. Estos divots pueden tener la forma de estados flotantes, pequeños fragmentos de ornamentación o guías o herramientas de usabilidad. Las animaciones pequeñas son un acento que contribuyen a la estética general, pero es poco probable que sean el foco del diseño. En el sitio para Henry Brown, la animación simple es que si miras detenidamente, los ojos de la ilustración parpadean.
Cuando usar animación
El problema con cada tendencia, incluida esta, es saber cuándo usarla. La animación puede ser un pequeño gran truco para su kit de herramientas de diseño, pero no lo es para todos los proyectos. La animación debe ser suave y fluida, no nerviosa ni mecánica. Debe cumplir un propósito para el usuario y no interferir con el contenido.
La razón principal para usar la animación es aumentar la usabilidad. Las animaciones simples pueden ser excelentes herramientas de guía para ayudar a las personas a comprender en qué botones hacer clic o dónde ir a continuación en el mapa de un sitio web. Muchos diseñadores que utilizan efectos de desplazamiento complejos combinan una animación simple con una herramienta de usuario para desplazarse o hacer clic. (Esto incluye todo, desde un simple icono de rebote o palabras que aparecen y dicen "desplazarse hacia abajo").
La usabilidad viene en algunas formas:
- Función de comunicación o cómo usar un sitio web
- Mostrar cambios, como completar un formulario correctamente o resaltar que se puede hacer clic en un elemento
- Cree flujo o dirija a los usuarios a un llamado a la acción
La segunda razón para usar la animación es estética. La animación puede ser una gran "decoración". A veces, el objetivo de un elemento animado es puramente visual y ese es un uso aceptable. Esta animación decorativa puede ayudar a contar una historia o crear una conexión emocional entre la interfaz y el usuario. El propósito de una animación puede ser despertar el interés visual y mantener a un usuario comprometido con su sitio durante un período de tiempo más largo.
Al crear una animación puramente visual, tenga en cuenta lo que se supone que debe hacer. Piense en la conexión que desea que tenga un usuario. ¿Se supone que es divertido o sorprendente? ¿Es un contenido único diseñado para compartir? Incluso un visual puro debería tener un objetivo.
Recursos
¿Listo para comenzar a animar? Aquí hay algunos recursos para lecturas adicionales y herramientas para ayudarlo a comenzar.
- El video Illusion of Life muestra cada uno de los 12 principios de una manera fácil de entender.
- "Animación web en el trabajo" de A List Apart es un gran recurso sobre lo que hace que la animación funcione.
- La "Introducción para principiantes a la animación CSS" le muestra cómo convertir un cuadrado en un círculo utilizando las propiedades CSS.
- Los elementos SVG animados elásticos son un tutorial sobre cómo integrar y animar un componente SVG.
- La presentación de Art of UI Animations de Mark Geyer usa animación para explicar los conceptos.
- "15 herramientas HTML5 principales para crear animación avanzada con" es un excelente paso de siguiente nivel y una lista de herramientas si ya comprende los conceptos básicos.
- El kit de supervivencia del animador enseña principios básicos que se aplican a todas las formas de animación.
Conclusión
Cuando se trata de animación, la regla general es esta: una buena animación mejorará la experiencia del usuario. Esto puede ser en forma de una conexión emocional, como una experiencia divertida y positiva, o haciendo que un sitio sea más fácil de usar.
La animación es una técnica divertida que se ha vuelto mucho más estándar para una variedad de aplicaciones. Si está buscando inspiración, asegúrese de volver a leer este artículo y haga clic en los enlaces a los ejemplos visuales, visite los sitios y juegue con las características animadas que contiene. ¡Que te diviertas!
