Le Motion Design

Pourquoi c'est important

Le cerveau traite le mouvement 60 000x plus vite que le texte. Le motion design capte l'attention, explique le complexe en quelques secondes et booste l'engagement de 120% sur les réseaux sociaux (Wyzowl, 2023).

Le framework

1. 01

   Easing (Ease in/out)

   Rien ne demarre ni ne s'arrete d'un coup dans la nature. Utilisez des courbes d'acceleration pour des mouvements naturels. Linear = robot. Ease = humain.

2. 02

   Anticipation

   Un bouton qui recule legerement avant de pulser. Un menu qui se "charge" 100ms avant d'apparaitre. Le spectateur sait que quelque chose va se passer.

3. 03

   Staging

   Une seule idée à la fois. Chaque frame guide l'oeil vers l'élément principal. Si tout bouge en meme temps, rien ne communique.

4. 04

   Timing

   La vitesse donne le sens. 200ms = vif, reactif. 500ms = élégant, serein. Au-dela de 800ms = trop lent, votre utilisateur a déjà zappe.

5. 05

   Les outils du motion designer

   After Effects reste la référence (Adobe). Lottie permet d'exporter des animations legeres pour le web. Pour le prototypage, Principle ou ProtoPie. Pour le CSS : transitions, keyframes, et l'API Web Animations.

Pour aller plus loin