{"id":17436,"date":"2020-03-03T10:30:57","date_gmt":"2020-03-03T09:30:57","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=17436"},"modified":"2025-08-20T17:18:58","modified_gmt":"2025-08-20T15:18:58","slug":"ui-ux-principes-jouer-motion-design","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/","title":{"rendered":"UI\/UX\u00a0: 8 principes pour jouer sur le Motion Design"},"content":{"rendered":"<p>Afin de fid\u00e9liser un internaute, un site web se doit de proposer une navigation optimale et d\u2019offrir une exp\u00e9rience \u00e0 la fois stimulante et intuitive.<\/p>\n<p>Aussi, \u00e0 l\u2019heure o\u00f9 les designers disposent de moyens pour concevoir des animations fluides pour le web sans que ces derni\u00e8res n\u2019alourdissent les pages et accroissent leur temps de chargement, il n\u2019est pas \u00e9tonnant que le <a href=\"https:\/\/graphiste.com\/blog\/inspiration-video-motion-design\">Motion Design<\/a> int\u00e8gre <a href=\"https:\/\/graphiste.com\/blog\/comment-faire-difference-entre-ux-et-ui\" target=\"_blank\" rel=\"noopener noreferrer\">la d\u00e9marche UX.<\/a><\/p>\n<p>Nous vous proposons donc de d\u00e9couvrir dans cet article\u00a0<strong>8 des principes majeurs<\/strong> applicables en mati\u00e8re d\u2019animation des interfaces.<\/p>\n<p>&nbsp;<\/p>\n<h2>1. L\u2019assouplissement<\/h2>\n<p>Il est assur\u00e9ment l\u2019un des principes majeurs de l\u2019animation puisqu\u2019il est issu du livre \u00ab\u2009The Illusion of Life\u00a0: Disney Animation\u2009\u00bb d\u2019Ollie Johnston et Frank Thomas, ouvrage qui fait r\u00e9f\u00e9rence dans le domaine.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-17439\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/ux-design-easing-disney-motion-.gif\" alt=\"motion design principes Disney animation UX UI \" width=\"572\" height=\"429\" \/><\/p>\n<p>L\u2019assouplissement a vocation \u00e0 rendre le mouvement beaucoup plus naturel \u00e0 travers une d\u00e9c\u00e9l\u00e9ration ou une acc\u00e9l\u00e9ration due \u00e0 un nombre d\u2019images plus ou moins important.<\/p>\n<p>En effet, il est possible de ralentir une animation en ajoutant des images ou au contraire de l\u2019acc\u00e9l\u00e9rer en en supprimant.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;:\u00a0<a href=\"https:\/\/graphiste.com\/blog\/ux-ui-design-faire-tests-utilisateurs\">UX\/UI Design\u00a0: les meilleures fa\u00e7ons de faire des tests utilisateurs<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>2. Le suivi et le chevauchement des actions<\/h2>\n<p>Ce principe \u2014 qui en inclut deux en r\u00e9alit\u00e9 \u2014 est lui aussi tir\u00e9 de l\u2019ouvrage \u00ab\u2009The Illusion of Life\u00a0: Disney Animation\u2009\u00bb.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-17440\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/ux-design-easing-disney-motion-suivi-chevauchement.gif\" alt=\"ux ui design chevauchement motion\" width=\"491\" height=\"368\" \/><\/p>\n<p>Il se d\u00e9compose ainsi\u00a0: <\/p>\n<ul>\n<li><strong>Le suivi d\u2019action.<\/strong> Il repose sur le fait qu\u2019un corps en mouvement arr\u00eatant de bouger doit encore \u00eatre en action, et ce pour cr\u00e9er une animation r\u00e9aliste. Ce n\u2019est pas parce qu\u2019une femme arr\u00eate de courir brusquement que sa robe cesse brusquement tout mouvement par exemple.<\/li>\n<li><strong>Le chevauchement.<\/strong> Il repose sur le fait que les diff\u00e9rentes parties d\u2019un objet bougent \u00e0 des vitesses diff\u00e9rentes. Une donn\u00e9e \u00e0 prendre en consid\u00e9ration pour des animations r\u00e9alistes.<\/li>\n<\/ul>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/outils-faire-du-motion-design\">7 outils pour faire du motion design<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>3. La parentalit\u00e9<\/h2>\n<p>Le principe de parentalit\u00e9 consiste \u00e0 relier plusieurs objets d\u2019interface utilisateur et donc \u00e0 \u00e9tablir des relations ou une hi\u00e9rarchie entre ceux-ci.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-17441\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/ux-design-easing-disney-motion-parente-uxinmotion.gif\" alt=\"motion design principes Disney animation UX UI \" width=\"437\" height=\"328\" \/><\/p>\n<p>Ainsi, lorsque l\u2019internaute va manipuler un objet d\u2019interface, le designer va, par le biais d\u2019un mouvement, lui montrer comment les objets sont reli\u00e9s.<\/p>\n<p>La parentalit\u00e9 peut donc permettre de cr\u00e9er de l\u2019interaction en temps r\u00e9el et donc de rendre plus convivial un site.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/creer-video-motion-design\">6 \u00e9tapes pour cr\u00e9er une vid\u00e9o motion design<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>4. Le changement de valeur<\/h2>\n<p>Les objets d\u2019interface bas\u00e9s sur les chiffres sont tr\u00e8s nombreux sur le web. Si certains sont statiques et ne visent donc qu\u2019\u00e0 apporter une information, d\u2019autres sont dynamiques et ce sont ceux-l\u00e0 qui nous int\u00e9ressent.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-17455\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/ux-design-easing-disney-motion-parente-transformation-chiffre.gif\" alt=\"changement de valeur motion design\" width=\"449\" height=\"337\" \/><\/p>\n<p>Le fait que ce type d\u2019objet d\u2019interface soit \u00ab\u2009anim\u00e9\u2009\u00bb permet de mieux mettre en lumi\u00e8re la valeur pr\u00e9sent\u00e9e et surtout de mieux l\u2019ancrer dans la r\u00e9alit\u00e9.<\/p>\n<p>D\u2019ailleurs, la nature dynamique des donn\u00e9es pourrait donner envie \u00e0 certains utilisateurs de passer \u00e0 l\u2019action afin de les faire \u00e9voluer.<\/p>\n<p>En outre, parce que les valeurs affich\u00e9es peuvent \u00e9voluer sans action de l\u2019utilisateur, ces objets d\u2019interface contribuent \u00e0 refl\u00e9ter un r\u00e9cit dynamique.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/motion-design-conseils-succes\">Motion design&nbsp;: Les raisons de son succ\u00e8s<\/a>\u00a0<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>5. La superposition<\/h2>\n<p>Afin de donner un peu de relief \u00e0 l\u2019interface d\u2019un site web et afin de la rendre plus conviviale, un designer peut avoir recours au principe de la superposition.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-17451\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/ux-design-easing-disney-motion-parente-superposition.gif\" alt=\"superposition motion design motion design principes Disney animation UX UI \" width=\"494\" height=\"370\" \/><\/p>\n<p>Autrement dit, il cr\u00e9e plusieurs couches et rend certains \u00e9l\u00e9ments non visibles sans action de l\u2019internaute. Toutefois, pour que cela fonctionne parfaitement, le concepteur du site doit s\u2019assurer que l\u2019internaute puisse comprendre qu\u2019il y a du contenu cach\u00e9 accessible.<\/p>\n<p>Le rendu visuel offert par une bonne application de ce principe justifie \u00e0 lui seul d\u2019y avoir recours.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/ui-ux-interfaces-erreurs-a-ne-plus-faire\">UI\/UX&nbsp;: 7 erreurs \u00e0 ne plus faire sur vos interfaces<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>6. Le clonage<\/h2>\n<p>Pour apporter un peu de narration \u00e0 votre interface, rien de mieux que d\u2019avoir recours au principe du clonage. Son id\u00e9e est simple\u00a0: cr\u00e9er des objets \u00e0 partir d\u2019autres objets.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-17444\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/ux-design-easing-disney-motion-parente-clonage.gif\" alt=\"motion design principes Disney animation UX UI \" width=\"365\" height=\"274\" \/><\/p>\n<p>Eh oui, lorsque vous concevez un objet d\u2019interface, vous pouvez raconter une histoire. Comment\u2009?<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-17443\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/ux-design-easing-disney-motion-parente-clonage-exemple-montre-apple.gif\" alt=\"\" width=\"422\" height=\"316\" \/><\/p>\n<p>En cr\u00e9ant de nouveaux objets \u00e0 partir d\u2019objets existants, et ce alors m\u00eame que l\u2019attention de l\u2019internaute est focalis\u00e9e sur eux.<\/p>\n<p>Vous concevez ainsi une cha\u00eene d\u2019\u00e9v\u00e9nements et incitez l\u2019internaute \u00e0 agir de telle ou telle fa\u00e7on.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\">Web Design&nbsp;: Le guide complet sur l&#8217;animation<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>7. L\u2019obscurcissement<\/h2>\n<p>Afin de d\u00e9finir une hi\u00e9rarchie principale sur un site Internet ou bien d\u2019indiquer la navigation d\u00e9sir\u00e9e, les sp\u00e9cialistes du motion design peuvent avoir recours au principe d\u2019obscurcissement.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-17446\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/ux-design-easing-disney-motion-parente-oscburcissement.gif\" alt=\"motion design principes Disney animation UX UI \" width=\"497\" height=\"373\" \/><\/p>\n<p>Il consiste tout simplement \u00e0 obscurcir \u2014 et plus g\u00e9n\u00e9ralement \u00e0 rendre moins \u00ab\u2009visible\u2009\u00bb (le flou est souvent utilis\u00e9) \u2014 certains \u00e9l\u00e9ments d\u2019interface ou contenus afin de guider l\u2019internaute vers son tunnel de conversion le plus souvent.<\/p>\n<p>&nbsp;<\/p>\n<h2>8. L\u2019effet parallax<\/h2>\n<p>Le dernier principe pr\u00e9sent\u00e9 ici est un \u00e9l\u00e9ment-cl\u00e9 du web design dans les ann\u00e9es\u00a02010\u00a0: <a href=\"https:\/\/graphiste.com\/blog\/web-design-comment-utiliser-effet-parallax\" target=\"_blank\" rel=\"noopener noreferrer\">l\u2019effet parallax.<\/a><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-17447\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/02\/ux-design-easing-disney-motion-parente-parallax-effect.gif\" alt=\"motion design principes Disney animation UX UI \" width=\"631\" height=\"473\" \/><\/p>\n<p>Visant \u00e0 cr\u00e9er une hi\u00e9rarchie spatiale lorsque les internautes ont recours au d\u00e9filement vertical, l\u2019effet parallax est une technique qui repose sur une <strong>tr\u00e8s c\u00e9l\u00e8bre illusion d\u2019optique<\/strong>\u00a0: plus les \u00e9l\u00e9ments sont situ\u00e9s loin, puis nous les percevons petits.<\/p>\n<p>Les objets les plus \u00e9loign\u00e9s se d\u00e9placent alors moins vite dans notre perception.<\/p>\n<blockquote><p>Eh bien, cela a \u00e9t\u00e9 transpos\u00e9 \u00e0 l\u2019univers du web et gr\u00e2ce \u00e0 un arri\u00e8re-plan qui d\u00e9file moins vite que le reste du site, il est possible de cr\u00e9er de la profondeur et de mieux faire comprendre \u00e0 l\u2019internaute la hi\u00e9rarchie des \u00e9l\u00e9ments.<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<p>Vous l\u2019avez compris \u00e0 travers la pr\u00e9sentation de ces 8 grands principes, le m\u00e9tier de motion designer ne s\u2019improvise pas.<\/p>\n<p>Aussi, si vous d\u00e9sirez concevoir des animations de qualit\u00e9 pour optimiser la navigation et l\u2019exp\u00e9rience utilisateur des internautes, faites <strong><a href=\"https:\/\/graphiste.com\" target=\"_blank\" rel=\"noopener noreferrer\">appel \u00e0 un professionnel du motion design<\/a><\/strong> qui saura \u00e9couter vos besoins.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Afin de fid\u00e9liser un internaute, un site web se doit de proposer une navigation optimale et d\u2019offrir une exp\u00e9rience \u00e0 la fois stimulante et intuitive. Aussi, \u00e0 l\u2019heure o\u00f9 les designers disposent de moyens pour concevoir des animations fluides pour le web sans que ces derni\u00e8res n\u2019alourdissent les pages et accroissent leur temps de chargement, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":17585,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-17436","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-motion-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>UI\/UX\u00a0: 8 principes pour jouer sur le Motion Design - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Afin de fid\u00e9liser un internaute, un site web se doit de proposer une navigation optimale et d\u2019offrir une exp\u00e9rience \u00e0 la fois stimulante et intuitive.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI\/UX\u00a0: 8 principes pour jouer sur le Motion Design - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Afin de fid\u00e9liser un internaute, un site web se doit de proposer une navigation optimale et d\u2019offrir une exp\u00e9rience \u00e0 la fois stimulante et intuitive.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-03T09:30:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:18:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/03\/une-graphiste-principes-motion-design-copie-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Laura Michaud\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Laura Michaud\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/ui-ux-principes-jouer-motion-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/ui-ux-principes-jouer-motion-design\\\/\"},\"author\":{\"name\":\"Laura Michaud\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#\\\/schema\\\/person\\\/33c0ef04707fbe50a096f282050bb5f2\"},\"headline\":\"UI\\\/UX\u00a0: 8 principes pour jouer sur le Motion Design\",\"datePublished\":\"2020-03-03T09:30:57+00:00\",\"dateModified\":\"2025-08-20T15:18:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/ui-ux-principes-jouer-motion-design\\\/\"},\"wordCount\":1043,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/ui-ux-principes-jouer-motion-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2020\\\/03\\\/une-graphiste-principes-motion-design-copie-1.jpg\",\"articleSection\":[\"Motion design\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/graphiste.com\\\/blog\\\/ui-ux-principes-jouer-motion-design\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/ui-ux-principes-jouer-motion-design\\\/\",\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/ui-ux-principes-jouer-motion-design\\\/\",\"name\":\"UI\\\/UX\u00a0: 8 principes pour jouer sur le Motion Design - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/ui-ux-principes-jouer-motion-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/ui-ux-principes-jouer-motion-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2020\\\/03\\\/une-graphiste-principes-motion-design-copie-1.jpg\",\"datePublished\":\"2020-03-03T09:30:57+00:00\",\"dateModified\":\"2025-08-20T15:18:58+00:00\",\"description\":\"Afin de fid\u00e9liser un internaute, un site web se doit de proposer une navigation optimale et d\u2019offrir une exp\u00e9rience \u00e0 la fois stimulante et intuitive.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/ui-ux-principes-jouer-motion-design\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/graphiste.com\\\/blog\\\/ui-ux-principes-jouer-motion-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/ui-ux-principes-jouer-motion-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2020\\\/03\\\/une-graphiste-principes-motion-design-copie-1.jpg\",\"contentUrl\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2020\\\/03\\\/une-graphiste-principes-motion-design-copie-1.jpg\",\"width\":850,\"height\":423},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/ui-ux-principes-jouer-motion-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vid\u00e9o\",\"item\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/video\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Motion design\",\"item\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/video\\\/motion-design\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"UI\\\/UX\u00a0: 8 principes pour jouer sur le Motion Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2022\\\/07\\\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2022\\\/07\\\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/graphistesfreelances\",\"https:\\\/\\\/x.com\\\/Graphistecom\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/graphiste-com\\\/\",\"https:\\\/\\\/fr.pinterest.com\\\/Graphiste_Com\",\"https:\\\/\\\/www.instagram.com\\\/graphiste_com\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#\\\/schema\\\/person\\\/33c0ef04707fbe50a096f282050bb5f2\",\"name\":\"Laura Michaud\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"caption\":\"Laura Michaud\"},\"description\":\"Laura connait tous les meilleurs outils pour g\u00e9rer des projets et une entreprise. Cr\u00e9ative, c'est aussi une sp\u00e9cialiste des outils de cr\u00e9ation graphique pour faire briller une entreprise.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/michaudlaura\\\/\"],\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/author\\\/laura\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI\/UX\u00a0: 8 principes pour jouer sur le Motion Design - Graphiste Blog","description":"Afin de fid\u00e9liser un internaute, un site web se doit de proposer une navigation optimale et d\u2019offrir une exp\u00e9rience \u00e0 la fois stimulante et intuitive.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/","og_locale":"fr_FR","og_type":"article","og_title":"UI\/UX\u00a0: 8 principes pour jouer sur le Motion Design - Graphiste Blog","og_description":"Afin de fid\u00e9liser un internaute, un site web se doit de proposer une navigation optimale et d\u2019offrir une exp\u00e9rience \u00e0 la fois stimulante et intuitive.","og_url":"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2020-03-03T09:30:57+00:00","article_modified_time":"2025-08-20T15:18:58+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/03\/une-graphiste-principes-motion-design-copie-1.jpg","type":"image\/jpeg"}],"author":"Laura Michaud","twitter_card":"summary_large_image","twitter_creator":"@Graphistecom","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Laura Michaud","Dur\u00e9e de lecture estim\u00e9e":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/"},"author":{"name":"Laura Michaud","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2"},"headline":"UI\/UX\u00a0: 8 principes pour jouer sur le Motion Design","datePublished":"2020-03-03T09:30:57+00:00","dateModified":"2025-08-20T15:18:58+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/"},"wordCount":1043,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/03\/une-graphiste-principes-motion-design-copie-1.jpg","articleSection":["Motion design"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/","url":"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/","name":"UI\/UX\u00a0: 8 principes pour jouer sur le Motion Design - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/03\/une-graphiste-principes-motion-design-copie-1.jpg","datePublished":"2020-03-03T09:30:57+00:00","dateModified":"2025-08-20T15:18:58+00:00","description":"Afin de fid\u00e9liser un internaute, un site web se doit de proposer une navigation optimale et d\u2019offrir une exp\u00e9rience \u00e0 la fois stimulante et intuitive.","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/03\/une-graphiste-principes-motion-design-copie-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/03\/une-graphiste-principes-motion-design-copie-1.jpg","width":850,"height":423},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vid\u00e9o","item":"https:\/\/graphiste.com\/blog\/video\/"},{"@type":"ListItem","position":3,"name":"Motion design","item":"https:\/\/graphiste.com\/blog\/video\/motion-design\/"},{"@type":"ListItem","position":4,"name":"UI\/UX\u00a0: 8 principes pour jouer sur le Motion Design"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2","name":"Laura Michaud","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","caption":"Laura Michaud"},"description":"Laura connait tous les meilleurs outils pour g\u00e9rer des projets et une entreprise. Cr\u00e9ative, c'est aussi une sp\u00e9cialiste des outils de cr\u00e9ation graphique pour faire briller une entreprise.","sameAs":["https:\/\/www.linkedin.com\/in\/michaudlaura\/"],"url":"https:\/\/graphiste.com\/blog\/author\/laura\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/17436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=17436"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/17436\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/17585"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=17436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=17436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=17436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}