Designing Meaningful Animation

Val Head - Beyond Tellerand

L'animation a-t-elle sa place dans le webdesign?

Il ne faut pas en abuser mais si elle est utilisée à bon escient, elle peut amener de l’émotion. Oui, de l’émotion, la même que celle ressentie devant un dessin animé Disney par exemple. Mais d’ailleurs en parlant de Disney …

Les principes d'animation

1.Timing/Spacing

Qu’avez vous ressenti en regardant cette courte vidéo ? L’animation permet, dans cette vidéo et ailleurs, d’amener une personnalité à des formes.

Mais en l’état, dans notre CSS, ces animations restent linéaires ce qui n’est pas du tout naturel. Aucun objet ne démarre puis ne s’arrête de manière nette, une voiture ne s’arrêtera jamais à l’endroit ou elle a freiné.

Pour permettre d’apporter une accélération ou une décélération dans le code, les designers utilisent les courbes de bézier.

Ce sont des courbes qui nous permettent de jouer librement sur les vitesses. À nous de décider la réaction voulu: départ rapide arrivé lente, départ lent arrivé rapide… Une multitude de combinaison qui fournira un début de personnalité et de naturel dans l’animation.

graphique timing spacing

Le timing représente le tempo de l’animation. Par exemple, il permet de rythmer la distance parcourue par une balle. Et afin de compléter cette animation pour la rendre plus naturel, on utilisera le spacing.

Le spacing apporte la vitesse à laquelle va se passer l’animation. Lorsqu’une balle descend, elle prend de la vitesse, rebondit, puis ralentit lorsqu’elle remonte jusqu'à s’arrêter. Elle reprend ensuite de la vitesse jusqu'à sa prochaine remonté. (Boigns = timing)

2.Follow Through (follow frouu...folo trou?)

Source: Vimeo / Titre: Follow throw / Animation d'un bloc qui encaisse de l'énergie et la relache lorsqu'il arrive au bout de sa course.

Prenons le Road Runner par exemple. Après son accélération rapide il a emmagasiné de l’énergie et lorsqu’il s’arrête il se mettra à osciller pour la libérer “douiiiing”. Cette oscillation est appelé follow through.

C’est le fait qu’un corps soit soumis à l’inertie de son mouvement. Il faut un certain temps avant que le corps ne s’arrête totalement.

Un autre exemple : un gros chien avec des grosses babines qui bouge la tête. Ses babines vont avoir du retard et vont gigoter de haut en bas “blblblbl”.

Ces deux exemples s’opposent, l’un rapide et très rigides l’autre plus lent et flasque. C’est le follow through qui donne cette impression et qui fournit la notion de poids, puissance et l’idée de gravité. Et encore une fois, ce sont les courbes de bézier qui nous aident à faire passer une animation pour amicale, triste, … “les courbes sont partout !”

3.Secondary action

Notre animation n’est pas encore parfaite, car vous le voyez tout se suite et bouge en un bloc, cette rigidité donne l’impression que tous les éléments sont statique et que l’animation englobe tout le groupe.

Pour mieux impacter il faudrait dissocier ce blocs, si les choses bougent de manière indépendantes, l’ensemble aura plus de dynamisme.

Un effet de parallax sur le texte avec un petit retard donnera une notion d’espace, de dimension, de profondeur et va rendre l’animation plus agréable.

Match your style

C’est cette corrélation entre votre site et vos animations qui va faire que votre site est réussi. Même pour un simple cube, la manière dont il apparait et disparait de l’écran joue sur l’émotion transmise. Votre marque doit inspirer la confiance, la rigueur ? Faites apparaître ce cube de manière fixe, rapide et sans fioritures.

Votre produit est plus foufou ? Faites rebondir votre cube ! Les adjectifs de votre contenu doivent devenir ceux qui qualifient votre animation.

  • fade in
  • fade out
  • bounce in
  • bounce out

Au final

Notre boîte est maintenant terminé. Nous avons identifié l’idée et l’émotion que nous voulions faire passer. Les principes de Disney ont permis d’apporter du naturel, de l'émotion et de faire corréler notre message à l'émotion donnée à l’utilisateur.

L’animation a bien sa place dans le Web, elle apporte du sens, une information supplémentaire au contenu. Mais comme toute bonne chose il ne faut pas en abuser.