AMBIENT INTELLIGENCE tech days • 2015 # mstechdays techdays.microsoft.fr
Aug 07, 2015
AMBIENT INTELLIGENCE
tech days•
2015
#mstechdays techdays.microsoft.fr
Motion of steelLe retour du GIF animé et bien plus encore : le motion design
Loïs Gaudebert / Axel Nemeth
www.ai3.fr
tech.days 2015#mstechdays
LES INTERVENANTS
Le retour du GIF animé et bien plus encore : le motion design
LE « DEV » LOÏS GAUDEBERTResp. solution .net Ai3 Sud-Ouest
www.ai3.fr
LE « DESIGNER » AXEL NEMETHConsultant UI/UX Ai3 Sud-Ouest
@AxelNemeth
www.ai3.fr
Ai3
Paris
Toulouse
Aix
Nantes
tech.days 2015#mstechdaysMotion of steel – Le retour du GIF animé et bien plus encore
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
Splash
Bon ben c’est un splash
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
HomeDashboard
Intervention
A faire
Point
Planning
Et…
Chat
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
Interventions
Le tinder des
interventions
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
Planning
C’est dans le nom
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
Notif
Pour les interventions
urgentes
tech.days 2015#mstechdays
L’ORDRE DU JOUR
Le retour du GIF animé et bien plus encore : le motion design
LE MOTION ?
#01
LES 12 REGLES DE MICKEY
#02
LES BONNES PRATIQUES
#03
tech.days 2015#mstechdays
01-L’animation depuis la nuit des temps
???
1978
MOTION DESIGN (MOTION GRAPHICS DESIGN)
L’art de donner vie à des éléments
statiques en utilisant l’animation
Contrôles interactifsPONG
tech.days 2015#mstechdays
1987 Animation simple d’éléments dans l’UIGIF
1989 Eléments d’UI interactifsJAVASCRIPT
1993 Moteur d’animationFLASH
tech.days 2015#mstechdays
1995 Page web interactiveJavaScript
1999 Application web interactiveAjax
2006 Fabrication d’UIWPF
tech.days 2015#mstechdays
2008 Animation web nativeHTML5+CSS3
2015 Interaction via les gestes, interfaces
« naturelles »….Kinect, leapmotion
tech.days 2015#mstechdays
L’ORDRE DU JOUR
Le retour du GIF animé et bien plus encore : le motion design
L’ANIMATION ?
#01
LES 12 REGLES DE MICKEY
#02
LES BONNES PRATIQUES
#03
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
SQUASH & STRETCH
n°1
Aucun objet n’est indéformable, simule
le poids et le volume
02-LES 12 REGLES DE MICKEY
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
ANTICIPATION
n°2
Préparation d’un objet à faire un
mouvement
02-LES 12 REGLES DE MICKEY
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
STAGING
n° 3
Mise en avant de l’élément principal
02-LES 12 REGLES DE MICKEY
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
STRAIGHT AHEAD AND POSE TO POSE
n° 4
Instants clefs ou bien action en continu
02-LES 12 REGLES DE MICKEY
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
FOLLOW TRHOUGH & OVERLAPPING
n° 5
Les différentes parties d’un objet
bougent indépendamment
02-LES 12 REGLES DE MICKEY
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
SLOW IN SLOW OUT
n° 6
L’accélération c’est important
02-LES 12 REGLES DE MICKEY
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
ARCS
n° 7
Un déplacement se fait selon un
mouvement courbe
02-LES 12 REGLES DE MICKEY
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
SECONDARY ACTIONS
n° 8
Une animation secondaire met en avant
la principale
02-LES 12 REGLES DE MICKEY
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
TIMING
n° 9
Un objet doit sembler obéir aux lois de
la physique
02-LES 12 REGLES DE MICKEY
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
EXAGERATION
n° 10
Présenter la réalité plus « sauvage » et
« extrême »
02-LES 12 REGLES DE MICKEY
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
SOLID DRAWING
n° 11
Les animations se font dans un monde
en 3D
02-LES 12 REGLES DE MICKEY
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
APPEAL
n° 12
Le charisme !!!
02-LES 12 REGLES DE MICKEY
tech.days 2015#mstechdays
L’ORDRE DU JOUR
Le retour du GIF animé et bien plus encore : le motion design
L’ANIMATION ?
#01
LES 12 REGLES DE MICKEY
#02
LES BONNES PRATIQUES
#03
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
ACTION UTILISATEUR
Action Transition
03-LES BONNES PRATIQUES
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
SANS ACTION
Chargement Focus visuel/FeedbackNotification (intrusive)
03-LES BONNES PRATIQUES
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
Une balance doit être trouvée entre ces trois paramètres
DUREE
IMPACT SUR L’EXPERIENCE UTILISATEUR
QUANTITE PRESENCE+ +
=
Le retour du GIF animé et bien plus encore : le motion design
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
DUREE QUANTITE PRESENCE+ +
+
EASING FUNCTIONS: DEMO
Le retour du GIF animé et bien plus encore : le motion design
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
Le retour du GIF animé et bien plus encore : le motion design
EASING FUNCTIONS
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
LE FLUX DE PROD : COMPLET
Brainstorm
échangeConcept
After
Effects
PrototypesCorrections
Proto final
Motion to
code
Validation
technique
Impossible
Dév
Le retour du GIF animé et bien plus encore : le motion design
CCU
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
LE FLUX DE PROD : PRAGMATIQUE
Brainstorm
échangeConcept
GIF Animés
sur base
des écrans
Validation
techniqueCorrections
Dév
Motion of steel – Le retour du GIF animé et bien plus encore
CCU
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
LE FLUX DE PROD : BASIQUE
Brainstorm
échangeConcept Dév
Validation
animsCorrections
Le retour du GIF animé et bien plus encore : le motion design
CCU
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
Une animation est liée à des mouvements que l’on connait dans notre
monde > apporte plus de signification à l’expérience
R U D E S
REELLE
Le retour du GIF animé et bien plus encore : le motion design
tech.days 2015#mstechdays
Une animation est liée à des mouvements que l’on connait dans notre
monde > apporte plus de signification à l’expérience
REELLE
03-LES BONNES PRATIQUES
Le retour du GIF animé et bien plus encore : le motion design
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
Une animation pour un type d’usage ou d’interaction > cela facilite la
compréhension de l’application
R U D E S
UNIQUE
Le retour du GIF animé et bien plus encore : le motion design
tech.days 2015#mstechdays
Une animation pour un type d’usage ou d’interaction > cela facilite la
compréhension de l’application
UNIQUE
03-LES BONNES PRATIQUES
Le retour du GIF animé et bien plus encore : le motion design
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
Une animation est un vecteur différenciant pour votre application >
trouvez un gimmick à répéter
R U D E S
DIFFERENCIANTE
Le retour du GIF animé et bien plus encore : le motion design
tech.days 2015#mstechdays
Une animation est un vecteur différenciant pour votre application >
trouvez un gimmick à répéter
DIFFERENCIANTE
03-LES BONNES PRATIQUES
Le retour du GIF animé et bien plus encore : le motion design
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
Une animation vient améliorer un usage pas le supplanter > ne créez des
animations que si nécessaire
R U D E S
EFFICACE
Le retour du GIF animé et bien plus encore : le motion design
tech.days 2015#mstechdays
Une animation vient améliorer un usage pas le supplanter > ne créez des
animations que si nécessaire
EFFICACE
03-LES BONNES PRATIQUES
Le retour du GIF animé et bien plus encore : le motion design
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
Une animation doit rester simple et courte > le contraire donnerait trop
d’importance à l’anim et pas assez à ce que vous voulez mettre en avant
R U D E S
SIMPLE
Le retour du GIF animé et bien plus encore : le motion design
tech.days 2015#mstechdays
Une animation doit rester simple et courte > le contraire donnerait trop
d’importance à l’anim et pas assez à ce que vous voulez mettre en avant
SIMPLE
03-LES BONNES PRATIQUES
Le retour du GIF animé et bien plus encore : le motion design
Loïs Gaudebert : [email protected] Nemeth : @AxelNemeth, [email protected]
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
© 2015 Microsoft Corporation. All rights reserved.
tech days•
2015
#mstechdays techdays.microsoft.fr