AMBIENT INTELLIGENCE
tech days•
2015
#mstechdays techdays.microsoft.fr
Motion of steel
Le 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 G...
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
Home
Dashboard
Intervention
A faire...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
Interventions
Le tinder des
interve...
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
urgent...
tech.days 2015#mstechdays
L’ORDRE DU JOUR
Le retour du GIF animé et bien plus encore : le motion design
LE MOTION?
#01
LES...
tech.days 2015#mstechdays
01-L’animation depuis la nuit des temps
???
1978
MOTIONDESIGN(MOTIONGRAPHICS DESIGN)
L’art de do...
tech.days 2015#mstechdays
1987 Animation simple d’éléments dans l’UIGIF
1989 Eléments d’UI interactifsJAVASCRIPT
1993 Mote...
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 »…....
tech.days 2015#mstechdays
L’ORDRE DU JOUR
Le retour du GIF animé et bien plus encore : le motion design
L’ANIMATION ?
#01
...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
SQUASH & STRETCH
n°1
Aucun objet n’...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
ANTICIPATION
n°2
Préparation d’un o...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
STAGING
n° 3
Mise en avant de l’élé...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
STRAIGHT AHEAD AND POSETO POSE
n° 4...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
FOLLOW TRHOUGH & OVERLAPPING
n° 5
L...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
SLOW IN SLOW OUT
n° 6
L’accélératio...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
ARCS
n° 7
Un déplacement se fait se...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
SECONDARYACTIONS
n° 8
Une animation...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
TIMING
n° 9
Un objet doit sembler o...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
EXAGERATION
n° 10
Présenter la réal...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
SOLID DRAWING
n° 11
Les animations ...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
APPEAL
n° 12
Le charisme !!!
02-LES...
tech.days 2015#mstechdays
L’ORDRE DU JOUR
Le retour du GIF animé et bien plus encore : le motion design
L’ANIMATION ?
#01
...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
ACTION UTILISATEUR
Action Transitio...
tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
SANS ACTION
Chargement Focus visuel...
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
Une balance doit être trouvée entre ces trois paramètres
DUREE
IMPACT SU...
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
DUREE QUANTITE PRESENCE+ +
+
EASING
FUNCTIONS: DEMO
Le retour du GIF ani...
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
Le retour du GIF animé et bien plus encore : le motion design
EASING FUN...
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
LE FLUX DE PROD : COMPLET
Brainstorm
échange
Concept
After
Effects
Proto...
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
LE FLUX DE PROD : PRAGMATIQUE
Brainstorm
échange
Concept
GIF Animés
sur ...
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
LE FLUX DE PROD : BASIQUE
Brainstorm
échange
Concept Dév
Validation
anim...
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
Une animation est liée à des mouvements que l’on connait dans notre
mond...
tech.days 2015#mstechdays
Une animation est liée à des mouvements que l’on connait dans notre
monde > apporte plus de sign...
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
Une animation pour un type d’usage ou d’interaction > cela facilite la
c...
tech.days 2015#mstechdays
Une animation pour un type d’usage ou d’interaction > cela facilite la
compréhension de l’applic...
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
Une animation est un vecteur différenciant pour votre application >
trou...
tech.days 2015#mstechdays
Une animation est un vecteur différenciant pour votre application >
trouvez un gimmick à répéter...
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
Une animation vient améliorer un usage pas le supplanter > ne créez des
...
tech.days 2015#mstechdays
Une animation vient améliorer un usage pas le supplanter > ne créez des
animations que si nécess...
tech.days 2015#mstechdays
03-LES BONNES PRATIQUES
Une animation doit rester simple et courte > le contraire donnerait trop...
tech.days 2015#mstechdays
Une animation doit rester simple et courte > le contraire donnerait trop
d’importance à l’anim e...
Loïs Gaudebert : lois.gaudebert@ai3.fr
Axel Nemeth : @AxelNemeth, axel.nemeth@ai3.fr
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
Prochain SlideShare
Chargement dans…5
×

Le retour du GIF animé et bien plus encore : le motion design

1 292 vues

Publié le

La minimalisation et la digitalisation des interfaces actuelles conduisent à une prégnance de plus en plus forte du motion. Comment bien appréhender le sujet ? Comment créer des animations qui ont du sens et qui apportent un réel plus à l’expérience utilisateur ?

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 292
Sur SlideShare
0
Issues des intégrations
0
Intégrations
12
Actions
Partages
0
Téléchargements
22
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le retour du GIF animé et bien plus encore : le motion design

  1. 1. AMBIENT INTELLIGENCE tech days• 2015 #mstechdays techdays.microsoft.fr
  2. 2. Motion of steel Le retour du GIF animé et bien plus encore : le motion design Loïs Gaudebert / Axel Nemeth www.ai3.fr
  3. 3. tech.days 2015#mstechdays LES INTERVENANTS Le retour du GIF animé et bien plus encore : le motion design LE « DEV » LOÏS GAUDEBERT Resp. solution .net Ai3 Sud-Ouest www.ai3.fr LE « DESIGNER » AXEL NEMETH Consultant UI/UX Ai3 Sud-Ouest @AxelNemeth www.ai3.fr Ai3 Paris Toulouse Aix Nantes
  4. 4. tech.days 2015#mstechdaysMotion of steel – Le retour du GIF animé et bien plus encore
  5. 5. tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design Splash Bon ben c’est un splash
  6. 6. tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design Home Dashboard Intervention A faire Point Planning Et… Chat
  7. 7. tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design Interventions Le tinder des interventions
  8. 8. tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design Planning C’est dans le nom
  9. 9. tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design Notif Pour les interventions urgentes
  10. 10. 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 DEMICKEY #02 LES BONNESPRATIQUES #03
  11. 11. tech.days 2015#mstechdays 01-L’animation depuis la nuit des temps ??? 1978 MOTIONDESIGN(MOTIONGRAPHICS DESIGN) L’art de donner vie à des éléments statiques en utilisant l’animation Contrôles interactifsPONG
  12. 12. tech.days 2015#mstechdays 1987 Animation simple d’éléments dans l’UIGIF 1989 Eléments d’UI interactifsJAVASCRIPT 1993 Moteur d’animationFLASH
  13. 13. tech.days 2015#mstechdays 1995 Page web interactiveJavaScript 1999 Application web interactiveAjax 2006 Fabrication d’UIWPF
  14. 14. tech.days 2015#mstechdays 2008 Animation web nativeHTML5+CSS3 2015 Interaction via les gestes, interfaces « naturelles »….Kinect,leapmotion
  15. 15. 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 DEMICKEY #02 LES BONNESPRATIQUES #03
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design STRAIGHT AHEAD AND POSETO POSE n° 4 Instants clefs ou bien action en continu 02-LES 12 REGLES DE MICKEY
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design SECONDARYACTIONS n° 8 Une animation secondaire met en avant la principale 02-LES 12 REGLES DE MICKEY
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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 DEMICKEY #02 LES BONNESPRATIQUES #03
  29. 29. tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design ACTION UTILISATEUR Action Transition 03-LES BONNES PRATIQUES
  30. 30. 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
  31. 31. tech.days 2015#mstechdays 03-LES BONNES PRATIQUES Une balance doit être trouvée entre ces trois paramètres DUREE IMPACT SUR L’EXPERIENCEUTILISATEUR QUANTITE PRESENCE+ + = Le retour du GIF animé et bien plus encore : le motion design
  32. 32. 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
  33. 33. tech.days 2015#mstechdays 03-LES BONNES PRATIQUES Le retour du GIF animé et bien plus encore : le motion design EASING FUNCTIONS
  34. 34. tech.days 2015#mstechdays 03-LES BONNES PRATIQUES LE FLUX DE PROD : COMPLET Brainstorm échange Concept 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
  35. 35. tech.days 2015#mstechdays 03-LES BONNES PRATIQUES LE FLUX DE PROD : PRAGMATIQUE Brainstorm échange Concept GIF Animés sur base des écrans Validation technique Corrections Dév Motion of steel – Le retour du GIF animé et bien plus encore CCU
  36. 36. tech.days 2015#mstechdays 03-LES BONNES PRATIQUES LE FLUX DE PROD : BASIQUE Brainstorm échange Concept Dév Validation anims Corrections Le retour du GIF animé et bien plus encore : le motion design CCU
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. Loïs Gaudebert : lois.gaudebert@ai3.fr Axel Nemeth : @AxelNemeth, axel.nemeth@ai3.fr
  48. 48. tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
  49. 49. © 2015 Microsoft Corporation. All rights reserved. tech days• 2015 #mstechdays techdays.microsoft.fr

×