La animación ya no es solo para dibujos animados. Desde imágenes en movimiento a 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 simples movimientos o un simple gif hasta varios minutos de acción, las animaciones se han convertido en herramientas de diseño web prácticas y útiles.
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 recorre la pantalla o cómo el icono de una aplicación rebota como una bola mientras se carga en el escritorio de tu 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 detallaba los 12 principios de la animación. ¿La ilusión de la vida: animación de Disney? por 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 recta y postura para posar
- Acción de seguimiento y superposición
- 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 a 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 empezando a ver cada día más. La clave de la animación como tendencia de diseño es la moderación. Las animaciones pequeñas y simples son atractivas e interesantes; el usuario puede que ni siquiera piense en ser una animación. Las animaciones a gran escala pueden ser una imagen visual interesante que lo lleve al diseño. Pero si empiezas a mezclar demasiados efectos móviles diferentes, puede causar un caos completo.
Lo que hace a la animación de moda es el realismo. En el panorama de diseño actual con tantos diseños de estilo plano y minimalista, los usuarios necesitan más pistas para decirles qué hacer. 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 visualmente demasiado simples para proporcionar suficiente orientación a los usuarios. En este caso, la animación crea un medio feliz entre la sencillez y la facilidad de uso.
El otro factor que contribuye a esta tendencia es el acceso a herramientas en los extremos posterior y de usuario del diseño. Ya no necesitas Flash para animaciones más complicadas. (Y si aún está compilando en Flash, es hora de detenerse). Se puede lograr de muchas otras maneras. Las animaciones de hoy no bloquean 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 queden atascados a mitad del ciclo del evento.
Animaciones grandes vs. 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 estos).
Las animaciones grandes son las que tienen una escala para ellos. A menudo, en forma de 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 atentamente en el sitio de Studio Meta, cada una de las imágenes grandes se amplía al leer la copia.
Las pequeñas animaciones son las pequeñas partes y piezas que descubre a medida que comienza a interactuar con un sitio web. Estos divots pueden ser en forma de estados flotantes, diminutos trozos de ornamentación o guías o herramientas de usabilidad. Las animaciones pequeñas son un acento que contribuye a la estética general, pero es poco probable que sean el foco del diseño. En el sitio de Henry Brown, la animación simple es que si miras de cerca, los ojos en la ilustración realmente parpadean.
Cuándo usar la animación
El problema con cada tendencia, incluida esta, es saber cuándo usarla. La animación puede ser un gran truco para su kit de herramientas de diseño, pero no para todos los proyectos. La animación debe ser fluida y sin problemas, no debe ser ni nerviosa ni mecánica. Necesita servir 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 entender qué botones hacer clic o dónde ir en el mapa de un sitio web. Muchos diseñadores que utilizan efectos de desplazamiento complejos emparejan 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 se desplazan hacia abajo.)
La usabilidad viene en algunas formas:
- Función de comunicación o cómo utilizar un sitio web.
- Mostrar cambios, como rellenar un formulario correctamente o resaltar que se puede hacer clic en un elemento
- Cree flujos o dirija a los usuarios a una llamada a la acción.
La segunda razón para usar la animación es una 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 al usuario comprometido con su sitio durante un período de tiempo más prolongado.
Al crear una animación puramente visual, considere lo que se supone que debe hacer. Piensa en la conexión que quieres que tenga un usuario.¿Se supone que es divertido o sorprendente? ¿Es un poco de contenido único que está diseñado para compartir? Incluso un visual puro debe tener un objetivo.
Recursos
¿Listo para empezar a animar? Aquí hay algunos recursos para lecturas adicionales y herramientas para ayudarlo a comenzar.
- El video de 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 del principiante a la animación CSS? te muestra cómo convertir un cuadrado en un círculo usando las propiedades CSS.
- Elastic animated SVG elements es un tutorial sobre cómo integrar y animar un componente SVG.
- La presentación de Art of UI Animations de Mark Geyer utiliza la animación para explicar los conceptos.
- ¿Las 15 mejores herramientas HTML5 para crear animaciones avanzadas con? es un gran paso para el siguiente nivel y una lista de herramientas si ya comprende los conceptos básicos.
- El Kit de supervivencia del animador enseña los principios básicos que se aplican a todas las formas de animación.
Conclusión
Cuando se trata de animación, la regla de oro 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 al hacer que un sitio sea más fácil de usar.
La animación es una técnica divertida que se vuelve mucho más estándar para una variedad de aplicaciones. Si estás buscando inspiración, asegúrate de volver a leer este artículo y hacer clic en los enlaces a los ejemplos visuales, visitar los sitios y jugar con las funciones animadas en él. ¡Que te diviertas!