La place du motion dans le workflow de la création digitale.
Le web a énormément évolué, c’est un fait, tout le monde le sait et je ne vais pas revenir dessus. Et l’évolution technologique a eu un impact sur nos métiers et le processus de création d’un projet web ou d’une application.
Je vais, dans cet article, m’intéresser à une étape précise du workflow, à savoir la communication entre DA/ UX / UI / Webdesigners(euses) et intégrateurs(rices) / Développeurs(euses). Et là encore c’est un vaste sujet !
Prenons un cas précis :
Je travaille depuis quelques temps avec un ami développeur, et tout s’est toujours bien passé en termes de communication. Nous avons trouvé une méthodologie qui nous permet de travailler de manière productive et claire.
Mais récemment , j’ai voulu ajouter des transitions et des animations dans nos webdesigns, et là, la compréhension sur ce que j’avais en tête et sur ce que je lui demandais de réaliser est devenue un peu plus compliqué.
Vivant chacun à plus de 350 km l’un de l’autre, nous arrivons à trouver le temps de nous voir de manière assez fréquente pour faire le point sur les projets en cours, mais même en face à face ce n’est pas toujours facile d’expliquer ce que nous avons vraiment en tête :
“Donc en gros, quand tu arrives sur la première page, tu as un loader qui au début est transparent, et qui se remplit petit à petit avec une animation qui ressemble à une vague, le tout pour former un cercle dans lequel le pourcentage de chargement sera affiché. Comme le pourcentage sera de la même couleur que le fond, il n’apparaîtra complet que lorsque le chargement sera complet.
- Mec, je comprends rien du tout”
Il m’a donc fallu chercher des solutions pour pallier à cette difficulté de compréhension.
1 / Trouver une ressource ou un site qui ait l’effet que vous cherchez à expliquer.
C’est bien sûr la première idée qui m’est venue ! Un exemple vaut forcément mieux que mille mots ! Mais… faut-il encore le trouver !!! Et dans le cas où je trouverais cet exemple plusieurs problèmes se posent.
- Soit j’en trouve un identique et dans quel cas je ne peux pas le copier. Il pourra toutefois me servir de base pour mieux illustrer ma proposition graphique.
- Soit j’en trouve un similaire mais certains détails, qui différents de mon attention première, resteront compliqués à expliquer aux autres acteurs du workflow, clients, étudiants…
- Il est possible aussi qu’il n’existe pas d’exemple se rapprochant de mon idée…
D’ailleurs c’est là qu’est arrivé le premier doute !
Et si j’avais tort ? Et si ce que je souhaite faire n’est absolument pas pratique ? Et si je me trompais ? Car notre métier, c’est aussi savoir se remettre en question.
D’accord, j’ai imaginé une interface que je trouve claire, mais l’est-elle donc vraiment ? Afin d’avoir des feedbacks quant à ma réalisation, il me suffit généralement de faire un export du PSD ou encore de mon wireframe pour avoir l’avis de mes autres petits camarades du workflow et/ou faire tester des prototypes à un client. Mais là pour une animation… c’est beaucoup moins pratique. S’il n‘y a rien de similaire qui existe est-ce parce que je n’ai pas assez bien retourné la toile ? Ou peut-être que mon idée est vraiment pas terrible ? Ou parce qu’au contraire c’est quelque chose de novateur ?
De plus, présenter un exemple de site utilisant un effet se rapprochant de ce que je veux faire, risque de perdre les collègues/clients à qui je demande un retour car l’exemple s’inscrit dans un contexte (de produit, graphique, etc) particulier. Il se peut qu’il soit difficile de prendre le recul nécessaire.
2 / L’animation UI en GIF avec Photoshop.
Si vous faites une veille régulière il est impossible que vous soyez passé à côté de nombreux liens utilisant des GIF afin de présenter des animations de design. Il y a d’ailleurs, sur la toile, quelques liens proposant des tutos pour la réalisation de ses GIF :
Je trouve cette approche vraiment pratique ! De plus Photoshop reste, pour l’instant, l’outil le plus repandu pour l’interface graphique, même si SKETCH tend à lui prendre une bonne part du marché et que ce dernier dispose de plugins performants pour la réalisation d’animation (animated me par exemple).
Le petit HIC de cette solution, c’est que nous sommes assez limités quant à la possibilité d’animation… Pour des exemples assez basiques c’est un très bon outil. Mais c’est que nous voulons pousser l’animation dans ses retranchement nous sommes vite arrêtés.
Il me fallait une autre solution qui me permettrait d’être plus libre à la fois sur ce projet, mais aussi sur tous les autres à suivre.
3 / Utiliser After Effect.
Pour résoudre mon problème de communication avec mon développeur, et ayant déjà pas mal de base sur After Effect, j’ai décidé de me lancer dans la réalisation de mon animation afin d’en faire par la suite un GIF ou/et une vidéo et de pouvoir le transmettre à mon camarade.
L’avantage est qu’il n’y a pas de limite technique avec After Effect ! (cela peut-être aussi un danger, car nous pouvons facilement ne laisser nous laisser emporter et produire, graphiquement, des transitions et animations beaucoup trop poussées ou peu pertinentes quant à leur utilisation sur un support web soit à cause de leurs complexités de réalisation ou de la lourdeur du/des scripts qu’il faudrait utiliser pour la réaliser.
Le point négatif de cette solution c’est qu’il faut connaître un peu le logiciel. Mais honnêtement pour avoir les bases en main c’est assez rapide.
Pour faire suite à l’exemple cité au dessus, j’ai produit mon effet sur after effect et j’ai exporté en vidéo et l’ai montré à mon développeur qui a beaucoup plus facilement pu comprendre ce que j’avais en tête, le résultat est le suivant :
Le problème majeur d’after effect c’est qu’il ne fait pas d’export en GIF…
Il me faut faire un export vidéo que j’importe dans photoshop pour en faire un gif. Mais ce qui nous permets de plus facilement se comprendre avec les différents acteurs du work flow et aussi de repousser les limites de notre imagination.
Il y a deux ans, je travaillé sur la refonte du portfolio du collectif dans lequel je travaillais, et je souhaitais reproduire l’effet suivant :
Nous n’avons jamais eu le temps de terminer le portfolio néanmoins j’ai eu le plaisir de voir cet effet (et encore plus poussé), dans ma timeline twitter avec un lien vers le très connu CODROPS.
CONCLUSION
Les avancées technologiques sont un levier pour la créativité ! Elles nous permettent de créer des nouvelles expériences toujours plus immersives.
Quand j’ai découvert le monde du design c’était en jouant au premier Wolfenstein sur le MS-dos de mon père…
A l’époque je n’aurais pas imaginé travailler dans ce monde du design, et aujourd’hui, maintenant que j’ai la chance de pouvoir évoluer dans ce monde des possibles, je suis excité à l’idée qu’il nous reste encore énormément à voir, apprendre, découvrir et designer.
