Le role grandissant du paiement dans l'expérience utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Transcript of Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
![Page 1: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/1.jpg)
Motion WebDesign
L’animationau service del’expérienceutilisateur
![Page 2: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/2.jpg)
Tony AubéMaitrise Design Multimédia, Université Laval
Motion Designer,Université Laval
Lead Web/Motion designer,Unik Média
![Page 3: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/3.jpg)
![Page 4: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/4.jpg)
t
What Screens Want?Frank Chimero
![Page 5: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/5.jpg)
Le « grain » de l’écran
![Page 6: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/6.jpg)
![Page 7: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/7.jpg)
![Page 8: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/8.jpg)
![Page 9: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/9.jpg)
![Page 10: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/10.jpg)
![Page 11: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/11.jpg)
![Page 12: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/12.jpg)
Flux
![Page 13: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/13.jpg)
is the newFluxFlat“ ”
![Page 14: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/14.jpg)
![Page 15: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/15.jpg)
![Page 16: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/16.jpg)
![Page 17: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/17.jpg)
![Page 18: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/18.jpg)
Expérience Utilisateur
![Page 19: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/19.jpg)
Tout ce qui affecte l’interaction entre un site web et ses utilisateurs.“ ”
![Page 20: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/20.jpg)
![Page 21: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/21.jpg)
Pragmatique Hédonique
• Utilité • Utilisabilité • Accessibilité • Fiabilité
• Esthétisme • Symbolisme • Émotion
![Page 22: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/22.jpg)
vUtilisabilité
Esthétisme
Émotion
![Page 23: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/23.jpg)
Utilisabilité
![Page 24: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/24.jpg)
Heuristiques d’utilisabilité de
Nielsen
![Page 25: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/25.jpg)
Correspondancedu système avec
le monde réel
![Page 26: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/26.jpg)
Continuité
![Page 27: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/27.jpg)
![Page 28: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/28.jpg)
![Page 29: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/29.jpg)
![Page 30: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/30.jpg)
![Page 31: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/31.jpg)
![Page 32: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/32.jpg)
![Page 33: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/33.jpg)
Positionnementdans l’espace
![Page 34: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/34.jpg)
« Carte Mentale »
![Page 35: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/35.jpg)
![Page 36: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/36.jpg)
![Page 37: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/37.jpg)
![Page 38: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/38.jpg)
Lien conceptuel
![Page 39: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/39.jpg)
Common Fate Principes de la gestalt
![Page 40: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/40.jpg)
![Page 41: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/41.jpg)
Cohérence et standards
![Page 42: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/42.jpg)
Cohérence interne
![Page 43: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/43.jpg)
![Page 44: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/44.jpg)
Cohérence externe
![Page 45: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/45.jpg)
Relation Parent / Enfant
Zoom
![Page 46: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/46.jpg)
Relation de continuité
Glissement Gauche/Droite
![Page 47: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/47.jpg)
![Page 48: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/48.jpg)
Information complémentaire
Rotation
![Page 49: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/49.jpg)
![Page 50: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/50.jpg)
![Page 51: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/51.jpg)
Attirer et diriger l’attention
![Page 52: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/52.jpg)
![Page 53: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/53.jpg)
![Page 54: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/54.jpg)
![Page 55: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/55.jpg)
![Page 56: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/56.jpg)
![Page 57: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/57.jpg)
![Page 58: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/58.jpg)
Visibilité de l’étatdu système
![Page 59: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/59.jpg)
![Page 60: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/60.jpg)
![Page 61: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/61.jpg)
![Page 62: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/62.jpg)
Pertinence et design minimaliste
![Page 63: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/63.jpg)
![Page 64: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/64.jpg)
![Page 65: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/65.jpg)
![Page 66: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/66.jpg)
![Page 67: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/67.jpg)
Reconnaissance, diagnostic et récupération des erreurs
![Page 68: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/68.jpg)
Tony
Aubé
Osmo
![Page 69: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/69.jpg)
Feedback
![Page 70: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/70.jpg)
Affordance
![Page 71: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/71.jpg)
![Page 72: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/72.jpg)
![Page 73: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/73.jpg)
![Page 74: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/74.jpg)
![Page 75: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/75.jpg)
Liberté et contrôle de l’utilisateur
Flexibilité et efficience
![Page 76: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/76.jpg)
![Page 77: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/77.jpg)
![Page 78: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/78.jpg)
Esthétisme
![Page 79: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/79.jpg)
![Page 80: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/80.jpg)
Formes
![Page 81: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/81.jpg)
Couleurs
![Page 82: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/82.jpg)
Animation
![Page 83: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/83.jpg)
![Page 84: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/84.jpg)
![Page 85: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/85.jpg)
principes d’animations
12
![Page 86: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/86.jpg)
![Page 87: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/87.jpg)
![Page 88: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/88.jpg)
![Page 89: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/89.jpg)
![Page 90: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/90.jpg)
Slow in, slow out Compression et étirement Anticipation et continuité
Arcs Actions secondaires
Exagération Timing
![Page 91: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/91.jpg)
Plus une animation est réaliste, plus elle est
esthétique
![Page 92: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/92.jpg)
Slow in, Slow out
www.the12principles.tumblr.com
![Page 93: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/93.jpg)
Base
![Page 94: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/94.jpg)
Slow in, Slow out
![Page 95: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/95.jpg)
Compression et étirement
![Page 96: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/96.jpg)
Compression et étirement
![Page 97: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/97.jpg)
Anticipation et continuité
![Page 98: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/98.jpg)
Anticipation et continuité
![Page 99: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/99.jpg)
Trajectoire arquée
![Page 100: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/100.jpg)
Trajectoire arquée
![Page 101: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/101.jpg)
Overlapping
![Page 102: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/102.jpg)
Overlapping
![Page 103: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/103.jpg)
Timing
![Page 104: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/104.jpg)
Exagération
![Page 105: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/105.jpg)
![Page 106: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/106.jpg)
![Page 107: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/107.jpg)
Plus une animation est réaliste, plus elle est
esthétique
![Page 108: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/108.jpg)
![Page 109: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/109.jpg)
types d’esthétisme2
![Page 110: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/110.jpg)
Clean
![Page 111: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/111.jpg)
• Opacité • Transitions légères • Invisible
Clean
![Page 112: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/112.jpg)
![Page 113: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/113.jpg)
Wow
![Page 114: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/114.jpg)
• Systèmes de particules • 3D • Background video • Transitions extrêmes
Wow
![Page 115: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/115.jpg)
![Page 116: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/116.jpg)
![Page 117: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/117.jpg)
Émotion
![Page 118: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/118.jpg)
Conveying a certain feeling is the essence communication. The response of the viewer is an emotional one, because art speaks to the heart. This gives animation an almost magical ability
to reach inside any audience.
Frank Thomas and Ollie Johnston,The Walt Disney Company
“ ”
![Page 119: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/119.jpg)
![Page 120: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/120.jpg)
• Personnalité • Surprise • Anticipation
![Page 121: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/121.jpg)
Personnalité
![Page 122: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/122.jpg)
Personality MapDOMINANT
SOUMIS
AMICALEHOSTILE
![Page 123: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/123.jpg)
![Page 124: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/124.jpg)
![Page 125: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/125.jpg)
![Page 126: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/126.jpg)
![Page 127: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/127.jpg)
![Page 128: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/128.jpg)
Surprise
![Page 129: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/129.jpg)
![Page 130: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/130.jpg)
![Page 131: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/131.jpg)
![Page 132: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/132.jpg)
![Page 133: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/133.jpg)
Anticipation
![Page 134: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/134.jpg)
![Page 135: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/135.jpg)
![Page 136: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/136.jpg)
![Page 137: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/137.jpg)
Autre
![Page 138: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/138.jpg)
Quatrième dimension
![Page 139: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/139.jpg)
3D
![Page 140: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/140.jpg)
Visualisation d’informations
![Page 141: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/141.jpg)
Storytelling
![Page 142: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/142.jpg)
?
![Page 143: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/143.jpg)
AaronSchurmanSenior Motion UI Designer, Google
![Page 144: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/144.jpg)
![Page 145: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/145.jpg)
Développer et implémenter le « langage cinétique »
de la marque
![Page 146: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/146.jpg)
![Page 147: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/147.jpg)
![Page 148: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/148.jpg)
![Page 149: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/149.jpg)
Grain
Contraste
Espace Blanc
Balance
Harmonie
Alignement
![Page 150: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/150.jpg)
Grain
Balance
Espace Blanc
Harmonie
Contraste
Alignement
Timing
Amortis
Anticipation
Transition
Trajectoire
Orchestration
![Page 151: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/151.jpg)
After Effects Edge Animate Framer JS
Pixate Web Designer
![Page 152: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/152.jpg)
Modèle
KANO
![Page 153: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/153.jpg)
![Page 154: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/154.jpg)
![Page 155: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/155.jpg)
![Page 156: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/156.jpg)
![Page 157: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/157.jpg)
![Page 158: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur](https://reader030.fdocument.pub/reader030/viewer/2022032422/55a9006e1a28ab4f7c8b4627/html5/thumbnails/158.jpg)
Merci!