Utiliser les 12 principes d'animation de Disney dans votre prochain projet de conception Web

Au moment exact où je tape ceci, mon bureau a 17 quelque chose ou autre Disney sur les murs et les étagères. Dix-sept. Même moi je suis surpris. Même si j'aime tout ce qui est Disney, la magie créée par les 12 principes de l'animation m'échappe même lorsque je regarde l'un de leurs films.

Et c'est le point. Les 12 principes de l'animation sont subtils. Ils font des impressions sur les téléspectateurs sans que les téléspectateurs s'en rendent compte. Ils nous font rire, pleurer, sympathiser et rêver, parfois au sein d'une même scène. Et ils créent des personnages et des objets qui ressemblent et bougent de manière si réaliste que vous voulez les toucher et les toucher. (As-tu déjà vu Coco ? Je me repose.)

Ces 12 principes d'animation constituent désormais la base de tous les travaux de mouvement, Disney et autres. Ils sont également pertinents pour des domaines en dehors de l'animation, tels que la conception de sites Web.

Une brève histoire des 12 principes de l'animation

Les 12 principes de l'animation ont été introduits par Ollie Johnston et Frank Thomas, deux des Nine Old Men de Disney, le noyau d'animateurs qui les ont rejoints dans les années 1920 et 1930. Johnston et Thomas ont écrit L'illusion de la vie : Disney Animation en 1981, et c'est resté la « bible » de l'animation. Le livre examine de près les approches des meilleurs animateurs de Disney pour en extraire les 12 principes. Alors que ces principes étaient à l'origine destinés à l'animation dessinée à la main, ils ont survécu aux changements technologiques et sont maintenant utilisés par les animateurs informatiques (comme Pixar) et les concepteurs de sites Web.

Les 12 principes de l'animation et comment ils éclairent la conception Web

Il y a une raison pour laquelle ces principes ont résisté à l'épreuve du temps. Parfois, les bases sont toujours les meilleures.

1. Courge et étirement

Source : Chris Gannon via Giphy

"Squash and Stretch" est le plus important des principes d'animation. Il donne aux animations flexibilité, gravité, poids et masse. Lorsqu'un objet est en mouvement, il ne conserve pas la même forme.

Le volume doit rester constant, cependant. L'étirement nécessite de rendre l'objet plus fin et plus long ; l'écrasement le rend plus court et plus large. Si vous le réduisez simplement ou le raccourcissez, il ne conservera pas le même volume.

Dans la conception Web, « Squash and Stretch » est utilisé lorsque les objets doivent être accrocheurs. S'il y a un objet qui doit avoir l'air d'avoir une masse physique, ce principe peut faire l'affaire.

2. Anticipation

Source : CentoLodigiani via Giphy

L'anticipation prépare le spectateur à ce qui va se passer et peut rendre l'action qui en résulte plus réaliste. Vous ne voudriez pas vous asseoir sans d'abord plier les genoux, ou attraper quelque chose sans sortir votre bras, n'est-ce pas ? L'anticipation soumet le personnage ou l'objet à un ou deux mouvements réalistes pour indiquer au spectateur ce qui va se passer.

Dans la conception de sites Web, l'anticipation est utilisée dans les transitions. Par exemple, si un visiteur remplit une zone d'information et omet les informations requises, la zone peut rebondir un peu pour attirer son attention et communiquer : « Hé, quelque chose ne va pas. » Une autre façon d'utiliser l'anticipation est de réduire légèrement les objets, puis de les faire grossir en survol.

3. Mise en scène

La mise en scène guide le regard du spectateur afin qu'il regarde là où vous le souhaitez (« lignes directrices » en photographie). Minimisez le reste de la scène pour que le spectateur se concentre sur ce que vous voulez qu'il fasse. Un autre élément de la mise en scène est que chaque action d'un personnage a une intention derrière elle. Si vous isoliez chaque image de l'animation, vous seriez en mesure de dire l'intention derrière la pose.

La mise en scène est l'un des principes les plus faciles à appliquer à la conception Web et aux visuels utilisés sur les sites Web. C'est ce qui se passe lorsqu'une fenêtre contextuelle apparaît sur une page Web : le mouvement de la fenêtre contextuelle vous permet de vous concentrer dessus et le reste de la page est flou, estompé ou couvert. Au sens figuré, vous éclairez la partie la plus importante de la « scène » et gardez tout le reste en arrière-plan. La lumière et l'ombre peuvent également être utilisées pour cela, ou les concepteurs de sites Web peuvent appliquer ce principe simplement en se débarrassant des détails inutiles.

4. Droit devant et pose pour poser

"Straight ahead" et "pose to pose" sont deux manières différentes de créer des animations. Avec « directement », les images sont créées dans l'ordre du début à la fin. Cela donne à l'animation un mouvement dynamique et fluide. Avec « pose à pose », les première et dernière images sont créées, puis les poses intermédiaires nécessaires sont ajoutées.

Source : Vincenzo Lodigiani, artiste en mouvement

Aujourd'hui, l'animation par ordinateur utilise « pose à pose » car l'ordinateur peut remplir automatiquement les images manquantes. Découvrez les animations sur Tchekhov - vous pouvez dire qu'elles ne sont pas fluides de manière réaliste (et elles ne sont pas censées l'être). Si vous souhaitez créer une animation « directe » sur votre site Web, vous pouvez utiliser la fonction de synchronisation des étapes ( ), qui vous permet de définir plusieurs images et de les afficher dans une séquence.

5. Action de suivi et de chevauchement

Le principe « action de suivi et de chevauchement » dit que lorsqu'un personnage ou un objet est en mouvement puis s'arrête, des parties du sujet se déplacent et s'arrêtent à des vitesses différentes. Cela imite les lois réelles de la physique.

• Chevauchement d'action : différentes parties du sujet se déplacent à des vitesses différentes.
• Follow Through : les parties de l'objet qui ne sont pas connectées de manière lâche continuent de bouger pendant quelques secondes après que l'objet principal a cessé de bouger. Ces pièces se déplaceront au-delà du point d'arrêt, puis se retireront vers l'objet.

Dans l'exemple ci-dessous, les bras et les jambes de Raiponce bougent à un rythme différent de celui de sa tête – c'est une action qui se chevauche. Lorsqu'elle arrête de virevolter, ses cheveux continuent de se balancer pendant une seconde – c'est le suivi.

« Faire glisser » est une technique connexe où l'inverse se produit : des parties de l'objet se déplacent, puis le reste se rattrape. Toutes ces techniques montrent un mouvement réaliste ou peuvent exagérer le mouvement pour un effet comique.

« Moving hold » est également lié à cela. Les personnages qui restent ont encore un léger mouvement pour que l'animation ne stagne pas.

Dans la conception mobile et Web, le « suivi » et « l'action qui se chevauchent » indiquent au spectateur qu'une action s'arrête volontairement . Sinon, vous pourriez penser qu'il a tout simplement cessé de fonctionner. Par exemple, regardez comment l'application Wunderlist sur mon iPhone montre que je déplace un élément de liste. L'article prend une couleur différente et s'agrandit au fur et à mesure que je le déplace, puis revient à la couleur et à la taille d'origine une fois que j'ai terminé. C'est ainsi que je sais que l'action est terminée.

Vous pouvez également voir ce principe en action sur votre iPhone. Lorsque vous passez d'une vue à l'autre ou que vous déplacez des icônes sur l'écran d'accueil, les éléments se déplacent à des vitesses légèrement différentes. C'est ainsi que votre iPhone communique : « Les choses changent. »

6. Ralentir et ralentir

Le principe «ralentir et ralentir» stipule qu'un objet commence à se déplacer lentement, prend de l'élan et accélère, puis ralentit à nouveau lorsqu'il s'arrête. Fondamentalement, les mouvements doivent accélérer et ralentir pour être naturels. Pour obtenir cet effet, il y a des images supplémentaires au début et à la fin d'une action pour souligner l'augmentation et la diminution progressive du mouvement.

Source : L'illusion de la vie sur Tumblr

Pour la conception de sites Web, CSS a deux fonctions de synchronisation liées à ce principe : easy-in et easy-out. Vous pouvez en voir un exemple sur le site Web Your Plan, Your Planet (cliquez d'abord sur « Commençons »).

7. Arc

Comme beaucoup des 12 autres principes d'animation, "arc" est basé sur la physique. Les objets suivent généralement un certain type d'arc lorsqu'ils se déplacent en raison de la gravité. S'ils devaient rester droits, le mouvement serait mécanique, pas réaliste.

Cela s'applique également à tous les types de mouvement, pas seulement aux arcs bas à haut à bas :

En web design, le principe de « l'arc » peut être utilisé en créant des animations en arc, bien sûr, mais aussi en faisant pivoter un élément, comme lors des temps de chargement.

8. Action secondaire

Une action secondaire met l'accent sur l'action principale sans la distraire. Cela donne également plus de dimension aux personnages et aux objets et insuffle de la vie à une scène. Le principe de mise en scène joue un rôle car l'action principale doit encore être au centre de l'attention.

Une action secondaire n'a pas à tomber en dehors de l'objet principal. Il peut s'agir d'un personnage qui siffle en marchant ou qui exprime ses émotions en haussant les sourcils.

Dans la conception mobile et Web, le principe de « l'action secondaire » se manifeste lorsque des éléments s'écartent pour faire de la place à un nouvel élément, comme lorsque vous réorganisez des applications sur votre iPhone. Cela peut aller de pair avec une « action de suivi et de chevauchement », qui met l'accent sur ces actions.

9. Calendrier

Le timing est assez simple, et il est lié à "ralentir et ralentir". Le principe dit que les éléments doivent constamment se déplacer de manière naturelle, comme ils le feraient dans le monde réel. Pour l'accent, ils peuvent être volontairement accélérés ou ralentis. Le nombre d'images utilisées établira le timing - plus d'images créent une action plus lente, moins d'images créent une action plus rapide.

Dans cet exemple, les premières actions de Daffy Duck ont ​​un timing naturel, puis la dernière action, lorsqu'il s'approche du spectateur, est volontairement rapide pour l'accentuation.

Le timing aide également le spectateur à comprendre le poids des objets les uns par rapport aux autres. Dans cet exemple, le personnage soulève les poids lentement et les laisse tomber rapidement, montrant qu'ils sont lourds pour lui :

Source : @scottthigpen sur Giphy

Dans la conception Web, le timing est utilisé pour que les éléments restent un peu plus longtemps ou disparaissent rapidement, en particulier lors de la réponse à l'interaction de l'utilisateur. Par exemple, si un utilisateur souhaite fermer un menu, vous pouvez définir la durée de manière à ce qu'elle dure 300 ms. S'ils touchent un élément de la barre de navigation, vous souhaiterez que l'action se produise rapidement (100 ms).

10. Exagération

Même si bon nombre des 12 principes de l'animation sont axés sur la réalité, la beauté de l'animation est qu'elle n'est pas réelle. Le principe de « l'exagération » dit que trop de réalisme peut nuire à ce que l'animation fait de mieux : le divertissement. L'exagération est utilisée pour rendre les personnages et les objets plus intéressants. Cela prend la réalité et la monte d'un cran, juste assez pour que la scène soit toujours crédible. L'exagération exige de la retenue afin que la scène ne devienne pas abstraite ou surréaliste.

Dans la conception Web, les objets sont agrandis ou réduits pour attirer ou détourner l'attention. Lorsqu'un utilisateur est actif sur une certaine partie du site Web, comme un formulaire, il peut grandir tandis que d'autres éléments rétrécissent. Ceci est similaire au principe de « mise en scène », en particulier lorsque vous pensez aux formulaires contextuels.

11. Dessin solide

Source : L'illusion de la vie sur Tumblr

Même si l'animation est techniquement en 2D, elle doit être présentée de manière réaliste en 3D. Le principe du « dessin solide » pourrait également être appelé « perspective » car il s'agit d'avoir la capacité de dessiner et de comprendre des bases telles que :

• Anatomie
• Équilibre
• Cohérence
• Lumière et ombre
• Le volume
• Poids

Pour les concepteurs de sites Web, ajouter de la profondeur à un élément montre aux utilisateurs qu'ils peuvent interagir avec lui. Vous pouvez le voir en action sur notre site Web. Regardez comment le bouton « Rejoindre pour télécharger » devient rose lorsque je fais défiler vers le bas :

12. Appel

Peut-être le plus délicat des 12 principes d'animation à maîtriser, « appel » dit que vos personnages, vos objets et leur monde doivent plaire au public. Ils doivent être attrayants et charmants d'une manière ou d'une autre, physiquement ou autrement. Il n'y a pas de recette pour bien faire les choses, mais le développement solide des personnages et la narration sont des ingrédients clés.

Dans l'animation, chaque personnage ne sera pas attrayant – le méchant est la pierre angulaire des films Disney. Cependant, la façon dont ils sont présentés doit toujours avoir du charisme et intéresser le public.

Dans la conception de sites Web, « appel » signifie que le site Web dans son ensemble est attrayant, agréable et facile à utiliser.

Emballer

Les 12 principes de Disney peuvent vous aider avec des animations simples, comme si vous créez un jeu interactif sur votre site Web, mais ils peuvent également aider à la conception de toutes sortes de pages Web. La plupart des consommateurs sont comme moi en ce qui concerne les films Disney : je sais que j'aime quelque chose et mon cerveau traite les signaux, mais je ne peux pas mettre le doigt sur la raison pour laquelle j'ai ces réactions. Le travail du web designer est d'anticiper ce qu'un visiteur va penser et faire, puis de le guider subtilement pour qu'il prenne les bonnes actions.

Vous cherchez encore plus de moyens de vous connecter avec votre public ? Lisez notre article de blog sur l'utilisation de l'émotion couleur.