Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,468 views

Published on

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 ?

Published in: Technology
  • Be the first to comment

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

×