Que fait Motion Design Craft ?
Un bon motion design est invisible : il dirige l'attention et se fait oublier.
Durées (à 30 ips)
| Mouvement | Images | Secondes |
|---|---|---|
| Micro-feedback (appui bouton, surbrillance) | 4 à 8 | 0,15 à 0,25 |
| Entrée ou sortie d'un élément | 10 à 18 | 0,35 à 0,6 |
| Transition de scène | 12 à 20 | 0,4 à 0,7 |
| Grand déplacement à l'écran | 20 à 30 | 0,7 à 1,0 |
| Décalage entre éléments d'une liste | 3 à 6 | 0,1 à 0,2 |
Les sorties sont plus rapides que les entrées (environ 70 % du temps d'entrée). Au-delà d'une seconde, le mouvement semble lent, sauf s'il s'agit d'un dévoilement délibéré.
Easing
Choisissez l'easing en fonction de ce que fait l'objet :
- Entrée dans le cadre : ease-out (départ rapide, atterrissage en douceur).
- Sortie du cadre : ease-in (départ lent, accélération vers la sortie).
- Déplacement entre deux positions à l'écran : ease-in-out.
- Mouvement continu (boucles, barres de progression) : linéaire.
N'utilisez jamais de linéaire pur pour un mouvement d'interface ; cela donne un aspect robotique.
Ressorts
Utilisez des ressorts à amortissement critique ou légèrement sous-amortis pour un effet naturel. Dans Remotion, damping: 200 est fluide sans rebond ; un damping plus bas (10 à 20) ajoute un dépassement, approprié uniquement pour un contenu ludique. Limitez le dépassement à environ 10 %.
Temps de lecture du texte
secondes_a_l_ecran = max(1.5, mots * 0.35 + 0.5)
Un titre de 6 mots nécessite environ 2,6 secondes. Si la voix off lit le texte, affichez-le légèrement avant que la voix ne le prononce.
Rythme
- Choisissez un battement (par exemple 0,5 s ou une mesure de la musique) et alignez les coupures et les entrées sur ses multiples. Un mouvement désaligné semble bâclé, même si le spectateur ne peut pas expliquer pourquoi.
- Variez la durée des scènes ; des durées identiques donnent un aspect mécanique.
- Coupez sur l'action : commencez le plan suivant pendant que le mouvement du plan précédent est encore en cours.
Hiérarchie
- Un seul élément focal à la fois. Assombrissez ou floutez ce qui n'est pas le sujet.
- Texte du corps : au moins 36 px en 1080p ; titres : 72 px ou plus. Les spectateurs sur mobile ont besoin de tailles plus grandes.
- Rapport de contraste d'au moins 4,5:1 pour le texte sur fond ; ajoutez un voile ou un contour sur la vidéo.
- Marges : conservez le contenu dans les 90 % centraux (zone de sécurité), 80 % pour la vidéo verticale.
Transitions avec une raison
Utilisez une transition uniquement lorsqu'elle apporte du sens : un fondu enchaîné pour un changement de temps, un push pour l'étape suivante, un cross-fade pour un changement de sujet doux. Sinon, utilisez une coupe franche. Ne mélangez pas plus de deux styles de transitions dans une même vidéo.
Ce qui donne à une vidéo un aspect généré
Évitez ces défauts sauf s'ils sont choisis intentionnellement :
- Tout apparaît en fondu depuis une opacité 0 avec la même durée.
- Texte centré sur un dégradé sombre avec des formes flottantes.
- Un dégradé violet-bleu pour chaque marque.
- Chaque élément qui rebondit avec un ressort.
- Durée de scène identique et même transition entre toutes les scènes.
- Emojis génériques utilisés comme icônes.
- Texte qui apparaît d'un coup, bien avant d'être prononcé.
Correctifs : utilisez la palette de la marque et des ressources réelles, variez le mouvement selon le rôle, décalez de manière significative, et laissez certaines scènes simplement se couper.
Checklist de révision
- Pouvez-vous mettre en pause n'importe quelle image et voir un sujet clair ?
- Quelque chose bouge-t-il sans raison ?
- Le texte est-il lisible en taille téléphone ?
- Les 2 dernières secondes restent-elles suffisamment immobiles pour lire l'appel à l'action ?