Hace ya un tiempo leí dos artículos en medium que crearon bastante polémica, sus títulos eran Stop Gratuitous UI Animation y Your UI isn't a Disney Movie, en ambos se criticaba el exceso de animaciones en algunas IU, realizando criticas al estado actual del Motion Design en el mundo del desarrollo web y de las aplicaciones. Estoy de acuerdo en gran parte de lo que dice la autora sin embargo hay una aspecto que se menciona que no me termina de encajar y es que algo que sea bonito no es un criterio para añadir una animación.
Está claro que si tenemos que decidir entre funcional y estético no hay ninguna duda de quien sería el ganador pero hay muchos casos en los que creo que no tienen porque estar enfrentados.
Un ejemplo que me viene a la cabeza es el efecto que aprendí en el curso de #Javascript30 impartido por Wes Bos. Este efecto consiste en una transición del fondo cuando se muestran las distintas opciones de un menú desplegable por hover. En Stripe podéis ver el efecto aplicado en su menú. Aquí os dejo un ejemplo de su implementación.
Esta transición en realidad no aporta nada de un modo funcional e incluso se podría pensar que entorpece la navegación por el hecho de desviar la atención o ralentizar la entrega de información al usuario. Sin embargo cuando lo vi por primera vez, me pareció algo divertido y bonito, no sabía que era lo que había pasado exactamente hasta que después lo analice, pero como usuario que estaba investigando una pasarela de pagos, sentí que no estaba en otra web más del montón y desde luego me quede con una buena sensación.
Está claro que esto puede ser muy subjetivo, "cuestión de gustos" pero algo que si me pasa últimamente es que empiezo a echar de menos transiciones o animaciones en webs o aplicaciones cuando nos las veo, siento que le falta un efecto a esto o un efecto a esto otro, hace poco vi un TED de Don Norman, profesor de ingeniería de usabilidad dentro de la psicología cognitiva en Stanford, que nos hablaba de esto y me quede con esta frase maravillosa.
Verdaderamente siento que las cosas placenteras funcionan mejor.
Entendiendo placentero como algo bonito o divertido que funcionalmente hablando no tendría porque estar ahí.
Por aquí te dejo el vídeo que profundiza en esa idea y que te recomiendo que veas porque no tiene desperdicio además de que es muy divertido. (Norman es un crack xD)
Ahora mismo estamos en pleno boom de las animaciones en mundo del desarrollo web, sólo basta con entrar a cualquier página para que puedas encontrarte con transiciones y animaciones everywhere. Tenemos casos muy conocidos como el lenguaje de diseño de Google, Material Design y en concreto Material Motion que se encarga de definir las reglas para las animaciones.
Otra web que me parece un gran ejemplo con unas animaciones muy elegantes es Stripe la empresa donde vi el menú que te mostraba antes. Echa un vistazo por su web o dribble para que veas de lo que estoy hablando. Además de un diseño awesomico, tienen animaciones y transiciones en todos los sitios en perfecta armonía con el branding, algo que me parece brutal es la demo del checkout hecha totalmente con HTML, CSS y JS.
Para terminar pienso que mola muchísimo tener la capacidad para aplicar animaciones en nuestros desarrollos o en el trabajo con la guía de un buen diseñador, así que desde aquí te animo a que guardes un poquito de tiempo, con permiso del abrumador ecosistema de javascript, para darle duro a las animaciones, por mi parte empece a finales del año pasado con el último libro que pude leerme y también haciendo cosillas en cursos online. Además inauguraré una sección de posts con el tag #motiondesign donde compartiré efectos y animaciones que voy aprendiendo y me parecen interesantes y no requieren un gran esfuerzo o conocimiento.
También me gustaría dejarte unos cuantos recursos y consejos para dar los primeros pasos.
- Primero, no tengas miedo a copiar todo lo que te guste, así es como verdaderamente se aprende copia y comparte para que otros puedan hacer lo mismo, y si citas la fuente no pasa absolutamente nada ;), páginas como CSS-Tricks, Codrops o CodyHouse dónde comparten sus experiments, navigations y templates son brutales para coger nivel y mucha práctica, ya después habrá tiempo para innovar.
- Segundo, hazte una cuenta en dribbble para seguir
copiandoinspirándote, es un ecosistema impresionante de recursos y de talento, si vas a copiar que sea a los mejores. - Tercero, create un perfil en CodePen y comparte todo lo que vas aprendiendo, puede ser que tu perfil al principio no sea como el de Rafael González al cual tuve el placer de conocer, ni tampoco sea como el de Eduardo Sada ponente del Frontfest pero es muy útil tener a mano lo que vas aprendiendo para poder aplicarlo y para seguir tu progreso.
Si se te ocurren más consejos o quieres compartir recursos estaría encantado que me dejarás un comentario.
Hasta el siguiente post y dale duro a esas animaciones! 🎥