¿Puede la animación web salvar el diseño plano?
Como diseñadores web, debemos asegurarnos de mantener nuestras habilidades frescas y actualizadas. No es necesario que sigamos todas las tendencias que surgen (como largas sombras), pero debemos seguir aprendiendo y mejorando nuestras habilidades a medida que la web crece y madura.
Un nuevo y emocionante desarrollo que está comenzando a cobrar fuerza en la industria del diseño web es la animación. Cada vez más empresas buscan la animación para sus aplicaciones o sitios web como una forma de deleitar a sus usuarios, diferenciarse de la competencia y mejorar la usabilidad de sus productos.
Otra razón por la que la animación tiene una gran demanda es el reciente enfoque de la Web en el diseño plano. El diseño plano, aunque en general es algo muy positivo, tiene algunos problemas que llevan a las personas a buscar formas de mejorarlo.
El diseño plano tiene algunos problemas
Hoy en día, cada vez más empresas están adoptando la estética mínima de «diseño plano». Los sitios web están comenzando a verse muy similares sin mucho para diferenciar entre marcas. Esto abre la oportunidad para que los diseñadores exploren otros medios para hacer que su sitio web sea atractivo y emocionante para sus usuarios.
Aquí es donde entra la animación. La animación es como sal en tus papas fritas; sin él, son un poco insípidos y faltos de sabor. Al animar diferentes elementos de su diseño, puede agregar un poco de emoción y deleitar a sus usuarios con animaciones creativas y útiles.
Otro problema con el diseño plano es que los usuarios pueden perder el contexto de lo que sucederá cuando interactúen con un sitio web / aplicación. Cuando los botones dejan de parecerse a botones u otras cosas, como insignias, comienzan a parecerse, la gente se confunde sobre lo que sucederá cuando hagan clic en ellos.
Podemos resolver este problema diseñando diferentes animaciones que ocurren cuando se coloca el cursor sobre los elementos o se hace clic en ellos, Colin Garven’s botón de enviar por ejemplo:
Por último, un último problema que quiero abordar es informar al usuario cuando se produce un cambio. Hoy en día, muchas aplicaciones web modernas utilizan herramientas poderosas como AngularJs y Node.js para crear aplicaciones «sin páginas y de actualización en vivo». Piense en Gmail: para obtener un nuevo correo electrónico, nunca tiene que actualizar la página; simplemente aparece cuando alguien le envía un nuevo correo electrónico.
Esto puede ser un problema si los usuarios no reciben alguna notificación o una señal clara de que la página ha cambiado o cargado contenido nuevo. Si se guarda la página, necesitamos ver algo que nos permita saber que la aplicación está funcionando y ha guardado nuestro trabajo en segundo plano.
La animación es una excelente manera de informar a los usuarios cuando ocurren diferentes eventos.
Supongamos que tiene una lista de personas registradas para su próxima reunión o conferencia. Cuando se registran nuevas personas, las agrega a la lista en tiempo real con node.js para que nunca tengan que actualizar la página. Genial, eso será realmente útil para nuestros usuarios. Pero ahora, ¿cómo se supone que la gente sepa cuándo se registra una nueva persona?
Lo que necesitamos es un poco de animación para que las personas que vean sepan que una persona se ha registrado. ¿Qué tal si colocamos una pequeña alerta en la parte superior de la página con un mensaje que le informa que se acaban de registrar? ¿O qué tal si incluimos a la nueva persona en la lista y le damos un pequeño resaltado azul para que podamos decir que son nuevos?
Todas estas cosas son efectos sutiles que realmente pueden marcar la diferencia entre un producto aceptable y algo que realmente deleita a sus usuarios.
La Web está madurando
¿Recuerda los días de IE6 y Netscape? ¿Los días en que teníamos que preocuparnos si todos tenían JavaScript activado y creábamos nuestros sitios con tablas HTML?
Hemos recorrido un largo camino desde entonces con una excelente compatibilidad con HTML5, CSS3 y un diseño receptivo, y todos se han combinado para brindarnos opciones increíbles cuando se trata de animar la Web.
Animación CSS3
Hoy en día, todos los navegadores principales admiten la mayoría o todas las funciones estándar de CSS3 recomendadas por el W3C. Esto nos brinda, como diseñadores, un gran potencial para crear animaciones simples pero atractivas que dan vida a sitios web que de otro modo serían estáticos.
Transiciones: Las transiciones CSS le brindan la capacidad de realizar una transición simple entre dos estados diferentes. Supongamos que tiene un botón simple que desea cambiar de color y presionar ligeramente hacia abajo al desplazarse, una transición sería perfecta para este caso de uso.
Animaciones de fotogramas clave: Los fotogramas clave son una potente función de CSS3 que le permite crear secuencias de animación personalizadas. Le permiten controlar el tiempo y la relajación, la duración, cualquier retraso necesario, cuántas veces se repite la duración, en qué dirección se anima y más. Incluso puede declarar varias animaciones en un elemento html.
Gráficos SVG
Una de las nuevas e increíbles características de la «web para adultos» es la compatibilidad con SVG. Finalmente podemos comenzar a usar imágenes que se escalen bien para pantallas de diferentes tamaños y resoluciones. No solo eso, sino que los SVG son mucho más poderosos que las imágenes png porque puedes interactuar con ellos en CSS y JS. Esto nos da la posibilidad de crear animaciones impresionantes que antes solo eran posibles con gif animados o Flash.
Echa un vistazo a este gif animado que ha sido recreado en CSS y SVG:
Una cosa para la que la animación SVG puede ser realmente útil es crear gráficos animados y tablas que pueden escalar a cualquier tamaño. Verificar este simple ejemplo en JSFiddle:
¡Las posibilidades para SVG son casi infinitas!
Lienzo HTML5
Otra tecnología interesante que ha tenido soporte completo para navegadores durante un tiempo es HTML5 Canvas. El elemento lienzo se utiliza para dibujar gráficos en la web.
Es similar a SVG pero difiere en varios aspectos. En primer lugar, es un formato ráster en lugar de un vector. Esto significa que funciona mejor para dibujos y animaciones más complejos, pero no escala bien para pantallas de alta resolución.
Una gran desventaja del lienzo es que no tiene elementos DOM manipulables. Esto significa que cada vez que desee cambiar el dibujo o animarlo, debe volver a dibujar la imagen.
A pesar de estos inconvenientes, el lienzo sigue siendo una gran herramienta que se puede utilizar para animaciones y dibujos más complejos.
Bibliotecas de animación Javascript
Aunque las animaciones CSS3 se están volviendo cada vez más poderosas, todavía hay algunos casos para usar animaciones Javascript.
Cada vez aparecen más bibliotecas que nos brindan una animación increíble a una fracción del costo de los recursos que solíamos pagar por la animación de Javascript.
Snap.svg: snap.svg está diseñado para que trabajar con sus activos SVG sea tan fácil como jQuery lo hace con DOM. Cuenta con una biblioteca de animación súper rica con fácil manejo de eventos que te ayuda a dar vida a tus SVG.
Greensock GSAP: gsap.js es un conjunto de herramientas profesionales para animaciones HTML5 de alto rendimiento con secuencias de comandos que funcionan en los principales navegadores. Es 20 veces más rápido que jQuery e incluso más rápido que las animaciones CSS3 en algunos casos. ¡60fps súper mantecosos aquí vamos!
Tránsito: transit.js es una biblioteca jQuery que reemplaza el módulo de animación jQuery con transiciones y transformaciones CSS súper suaves. La gran parte es que usa la misma sintaxis que jQuery’s $ (‘…’). Animate.
Velocidad: velocity.js es similar a Transit en que usa la misma sintaxis que jQuery, por lo que todo lo que tiene que hacer es incluir la biblioteca y reemplazar el animate de jQuery con .velocidad().
scrollReveal: scrollReveal es una biblioteca js de código abierto que lo ayuda a crear y mantener la forma en que los elementos de la página se desvanecen, activados cuando ingresan a la ventana gráfica.
Bounce.js: bounce.js es una nueva herramienta para generar emocionantes animaciones de fotogramas clave con CSS3.
Hardware mejorado en dispositivos móviles
Una última razón por la que la animación realmente está despegando es que los dispositivos de hoy son cada vez más poderosos con cada nueva versión.
La iphone 5s, por ejemplo, tiene un chip a7 superpoderoso.
Según Extreme Tech: “La CPU no es solo una evolución gradual de su predecesora Swift, es una bestia completamente diferente que en realidad se parece más a una CPU Intel o AMD de“ gran núcleo ”que a una CPU convencional de“ núcleo pequeño ””.
Además, con iOS8, Apple lanzará Metal, que es un motor de extracción en 3D muy poderoso que le dará la capacidad de crear juegos similares a los de un escritorio que se ejecutan en dispositivos móviles.
Algunas compañías de teléfonos Android como LG incluso han construido dispositivos con hasta 3 GB de RAM, el LG G3 siendo solo uno. Tengo una computadora portátil de hace unos años que apenas tiene esa cantidad.
Todo esto para decir que no solo podemos crear animaciones que funcionan muy bien en computadoras de escritorio, sino que las mismas animaciones funcionarán muy bien en teléfonos, tabletas y otros dispositivos móviles.
Las animaciones son útiles para los usuarios
Las animaciones realmente pueden ayudar a que su producto, aplicación o sitio web sea más utilizable y aceptado por sus usuarios. Esto es porque:
- dan contexto a lo que está sucediendo;
- mantienen a la gente comprometida;
- ayudan a que su empresa se destaque;
- la gente los disfruta.
Piense en Kickstarter: un gran video que explique su campaña puede marcar la diferencia entre tener un gran éxito y apenas hacerse notar. Las mejores campañas utilizan videos poderosos con una historia bien elaborada para generar entusiasmo y generar impulso para su producto o campaña. La animación puede hacer lo mismo para su sitio web o aplicación. Puede significar la diferencia entre las personas comprometidas y entusiasmadas con su aplicación, y otro producto que aterriza en el cementerio de aplicaciones.
