Oh ! Animation pour une home page

Motion design
Revue de Projet
DURABLE
Logo Les Croissants Créatifs
Voici une épingle pour ce billet de blog : vous pouvez la sauvegarder dans un de vos tableaux Pinterest pour retrouver cet article plus tard.
Oh ! Animation pour une home page
Voici d'autres billets qui pourraient vous intéresser :

Contactez-moi

Si vous souhaitez me parler de vos projets, contactez-moi directement pour échanger et évaluer comment nous pouvons travailler ensemble.

contactez-moi

Abonnez-vous

Mensuelle, ma newsletter vous donne un aperçu des coulisses de mon atelier, ainsi qu'un résumé des projets en cours et des articles que j'ai écrits pour vous.

abonnez-vous

Suivez-moi sur LinkedIn

C'est le réseau social où je suis présente. J'y poste régulièrement des nouvelles de mon travail en cours mais aussi des conseils pour mes clients.

suivez-moi sur LinkedIn
Home page du Daily Atelier
client :
Home page du Daily Atelier
L'animation de la home de ce site
problématique

Pour la home page de ce site, je souhaitais mettre en avant une animation motion design qui remplisse un certain nombre de critères :

  • représente mon style : si possible un hybride entre mon style d'animation et mon style de dessin
  • me présente personnellement : mon visage, et une posture avenante et chaleureuse
  • rappelle que le motion design peut surprendre et émerveiller
  • soit interactif d'une façon subtile, en accord avec le site et invite à regarder mon portfolio en-dessous

processus créatif

J'ai d'abord imaginé le concept :

  • mon visage qui regarde d'abord le texte, s'en étonne, puis fait face au lecteur et enfin regarde vers le bas de la page
  • une animation intéractive : le visage ne regarde en bas que si on commence à scroller vers le bas, et remonte la tête pour regarder le lecteur en souriant si on remonte
  • une animation très fluide : beaucoup de souplesse
  • une animation légère : un format qui permet d'économiser beaucoup de poids
  • des couleurs en lien avec mon thème mais qui ressortent quand même

Dessins préparatoires : visage de profil et de face

J'ai ensuite tourné une courte de vidéo de référence pour pouvoir étudier mes propres traits. J'ai fait beaucoup de dessins, y compris en traditionnel image par image, pour mieux comprendre ces traits.

Extraits de l'écran en "pelure d'oignon" d'un logiciel d'animation image par image.

Dans les dessins ci-dessus, vous voyez dans un logiciel d'animation image par image traditionnelle (TVPaint), la vision dite "en pelure d'oignon" : on voit en transparence les images précédentes dans une couleur, les images suivantes dans une autre, ce qui permet d'affiner chaque dessin en fonction de ceux qui l'entourent. Si un mouvement est rapide, les dessins sont espacés ; si un mouvement est lent, les dessins sont rapprochés.

Animation terminée avec After Effect

Pour la réalisation j'ai opté pour une animation vectorielle, avec After Effect. Chaque trait est une forme vectorielle que j'anime ensuite image par image. Je m'aide toujours de la vidéo de référence, mais je la simplifie et l'arrange à ma sauce (et aussi, je raccourcis ma coupe de cheveux !). Je cherche à reproduire la souplesse et la fluidité de l'original, mais aussi sa présence humaine. Avez-vous remarqué que le personnage cligne plusieurs fois des yeux pendant l'animation ?

L'intégration dans le site se fait via Lottie et BodyMovin. Ainsi, l'animation elle-même, interactive, est assez légère, surtout comparé au poids qu'elle aurait en vidéo ou en gif de qualité équivalente.

réalisation

Vous trouverez la réalisation finale dans sa meilleure définition et la plus légère en home de ce site. Ci-dessous, vous trouverez aussi un gif animé, plus lourd et de moins bonne définition.

Cette image marque les esprits d'emblée à l'arrivée sur mon site, mission accomplie !

Oh ! Animation pour une home page
témoignage
Voici une épingle pour ce projet : vous pouvez la sauvegarder dans Pinterest pour retrouver cet article plus tard.
Oh ! Animation pour une home page
Voici d'autres billets qui pourraient vous intéresser :
Portrait de couple
Carte de vœux animée
Portrait professionnel signature

Contactez-moi

Si vous souhaitez me parler de vos projets, contactez-moi directement pour échanger et évaluer comment nous pouvons travailler ensemble.

contactez-moi

Abonnez-vous

Mensuelle, ma newsletter vous donne un aperçu des coulisses de mon atelier, ainsi qu'un résumé des projets en cours et des articles que j'ai écrits pour vous.

abonnez-vous

Suivez-moi sur LinkedIn

C'est le réseau social où je suis présente. J'y poste régulièrement des nouvelles de mon travail en cours mais aussi des conseils pour mes clients.

suivez-moi sur LinkedIn
Voici une épingle pour ce podcast : vous pouvez la sauvegarder sur Pinterest pour le retrouver plus tard.
Oh ! Animation pour une home page
Sur le même theme :
Les croissants créatifs, qu'est-ce que c'est ?

Les Croissants Créatifs est un rendez-vous pour les créatifs : en podcast, et parfois en live du côté de Rennes. On y parle sources de la créativité, façons de vivre avec, de s’améliorer, d’en vivre, d’évoluer avec la société ou de contribuer à la faire évoluer. Le podcast est produit et animé par Myriam Gabrielle Prot-Poilvet, qui est  dessinatrice et motion designer sous le nom The Daily Atelier. Vous pouvez suivre Les Croissants Créatifs sur la page LinkedIn dédiée : https://www.linkedin.com/company/croissants-créatifs 

Les Croissants Créatifs, c’est aussi un solide réseau de soutiens et de relais à Rennes, où le podcast et sa communauté de créatifs sont nés. Ils soutiennent l’aventure :

  • l’eclozr, et en particulier Gwladys Rabé, responsable marketing chez Unitee et l’eclozr. Gwladys a organisé à l'eclozr à Rennes les deux premiers rendez-vous en live des Croissants Créatifs (qui correspondent aux deux premiers épisodes du podcast). Elle m'apporte aussi son expertise sur la communication et la programmation.
  • la CCI Bretagne, et en particulier Loubna Bentamy, en charge des projets européens innovation et design à la Chambre de Commerce et de l’Industrie. Loubna apporte son jus de cerveau et son réseau sur la communication et la programmation des Croissants Créatifs.


Logos des 3 partenaires des Croissants Créatifs