RIVE
✏️ Conception

RIVE : Animation intéractive

📌 RIVE est un outil d’ #animation qui vous permet de concevoir, d’animer vos créations à la manière d’ #AfterEffect, avec donc une #timeline et des #keyframes. Cependant  l’intérêt de cet outil réside dans le fait que l’on puisse directement interagir sur les animation en temps réel.
La version 2, encore en beta, est également disponible et permet la #coopération en ligne avec votre team :
https://beta.rive.app/
#tools #MicroInteraction #animation #cmondary

drama
✏️ Conception

DRAMA : outil de prototypage

📌 DRAMA se présente comme un #outil tout en un. Prototypage, #animation et #Design.
J’adore ce type d’initiative, car je pense que l’on cherche tous l’outil ultime qui fera tout, mais il n’existe pas encore. Cela me fait également penser à NOVA STUDIO qui est également un bon concurrent.
#Tools #prototyping #cmondary

SVGartista
✏️ Conception

SVG ARTISTA : Animation svg

📌 SVG ARTISTA est un service en ligne permettant d’animer n’importe quel #SVG.
Quelques paramètres sont disponibles, mais globalement l’animation se fera sur le filet, ainsi que sur le remplissage.
Très simple d’utilisation, je vous invite à essayer 😉
#Tools #animation #cmondary

static1
🗞 Article

GUIDE : From Sketch / Figma to After Affect

📌 ARTICLE très complet sous forme de guide pas à pas pour créer de petites animations, et micro-intéractions sous after effect après importation des sources Sketch / Figma.
L’idée est simplement d’utiliser les animations sous #AfterEffect pour donner vie à votre interface et montre comment toutes les éléments doivent se comporter et interagir.

Anim
🧩 Tips

Animation TIPS

📌 ARTICLE très intéressant sur les caractéristiques d’une bonne animation, d’un bon design d’interaction. Toujours à garder à l’esprit : – Les animations doivent être pertinentes – L’animation doit soutenir l’interaction – L’animation ne doit jamais ralentir l’expérience – L’animation doit être naturelle – L’animation doit refléter l’image de marque – L’animations doit tenir compte de la faisabilité technique

big icon.2d776dfb
✏️ Conception

Uselightbox.com

📌 LIGHTBOX est un outil d’animation pour les illustrateurs qui possèdent une tablette tactile. Très simple d’utilisation l’application vous montre la frame précédente et vous invite à créer la suivante, à la manière d’un FLIPBOOK. Gratuit et sympa

HeroImage0 scaled
✏️ Conception

KITE : Animation HTML

📌 J’adore KITE pour rapidement animer les créas réalisées sous sketch , et maintenant sous XD également. Vraiment beaucoup plus accessible que After Effect (dans tous les sens du terme), Il permet même de générer du code directement intégrable à vos applications. Je ne comprend toujours pas pourquoi Sketch n’intègre pas nativement une timeline + Keyframe

capture de28099ecc81cran 2019 08 13 acc80 14.25.02
📎 Resources

CSS ONLY FLOAT LABEL

📌 CSS ONLY FLOAT LABEL est un code CSS hébergé sur le génial codepen illustrant merveilleusement bien l’animation d’un libellé passant de l’intérieur du champ de saisie , au dessus du champs de saisie. Personnellement, je considère comme une bonne pratique, à complété d’un control de surface indiquant si le champs est OK ou KO 😉

UI motion design
🏆 Skills

Motion Design : Le recueil

📌 Très bon article sur le Motion Design. J’aurai tendance à utiliser KITE ou HYPE TUMULT pour effectuer ce genre de projet. Je compte bien essayer rapidement SVGATOR pour les petites animations de feedback et les intégrer à un proto (https://app.svgator.com/) Et enfin pour compléter cet article, je vous met un lien un autre article sur le même sujet :
https://www.webdesignerdepot.com/2017/10/3-smart-ways-to-engage-users-with-animation/