{"id":11754,"date":"2019-07-11T10:30:41","date_gmt":"2019-07-11T08:30:41","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=11754"},"modified":"2025-08-20T17:23:33","modified_gmt":"2025-08-20T15:23:33","slug":"regles-illusion-optique-interface","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/","title":{"rendered":"Design d&#8217;interface&nbsp;: 2 r\u00e8gles d&#8217;illusions d&#8217;optique \u00e0 conna\u00eetre"},"content":{"rendered":"<p>Parfois, l&#8217;\u0153il humain et les ordinateurs ne sont pas d&#8217;accord.<\/p>\n<p>Aujourd&#8217;hui, vous allez apprendre les effets d&#8217;optique sur lesquels vous pouvez jouer pour toutes les formes g\u00e9om\u00e9triques \u00e0 ins\u00e9rer dans vos <a href=\"https:\/\/graphiste.com\/blog\/ui-design-10-commandements-a-suivre-interfaces\">interfaces<\/a>. Entre les boutons et les formulaires, il y en a beaucoup&nbsp;!<\/p>\n<h2>1. Ce qui est identique ne l&#8217;est pas toujours<\/h2>\n<p>Oui, je sais, on dirait une formule de Game of Thrones, &#8220;ce qui est mort ne peut mourir&#8221;. Et pourtant, c&#8217;est une v\u00e9rit\u00e9.<\/p>\n<p>Prenez deux formes g\u00e9om\u00e9triques, un carr\u00e9 et un cercle. D\u00e9cidez qu&#8217;ils feront exactement la m\u00eame taille, au pixel pr\u00e8s. Et positionnez l&#8217;un \u00e0 c\u00f4t\u00e9 de l&#8217;autre\u2026<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-11759 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/07\/illusion-optique-taille.jpg\" alt=\"Illusion d'optique taille \u00e9l\u00e9ments\" width=\"600\" height=\"300\" \/><\/p>\n<p>\u00c9trangement, le carr\u00e9 a l&#8217;air plus grand que le cercle. Ce qui peut \u00eatre tr\u00e8s aga\u00e7ant si vous utilisez une s\u00e9rie de visuels carr\u00e9s et ronds les uns \u00e0 c\u00f4t\u00e9 des autres, et que vous voulez qu&#8217;ils semblent identiques, n&#8217;est-ce pas&nbsp;? (c&#8217;est notamment le cas pour les ic\u00f4nes des r\u00e9seaux sociaux)<\/p>\n<p>La seule option pour lutter contre ce ph\u00e9nom\u00e8ne, c&#8217;est d&#8217;<strong>augmenter l\u00e9g\u00e8rement la taille des formes rondes<\/strong>. Oui, c&#8217;est contre-intuitif. Mais c&#8217;est le r\u00e9sultat qui compte, non&nbsp;?<\/p>\n<p>En r\u00e9alit\u00e9, il s&#8217;agit de retrouver plus ou moins la m\u00eame surface couverte&nbsp;: un cercle empi\u00e8te sur moins d&#8217;espace qu&#8217;un carr\u00e9, donc il faut l&#8217;agrandir pour qu&#8217;ils deviennent \u00e9gaux. Le m\u00eame principe s&#8217;appliquera pour les losanges ou les triangles&nbsp;: il vous faudra cr\u00e9er une l\u00e9g\u00e8re illusion d&#8217;optique pour donner l&#8217;impression qu&#8217;ils font la m\u00eame taille.<\/p>\n<p>Il ne s&#8217;agit pas seulement de cr\u00e9er une s\u00e9rie de visuels d&#8217;apparence semblables&nbsp;: un bouton rond \u00e0 c\u00f4t\u00e9 d&#8217;un rectangle de texte semblera sous-dimensionn\u00e9 si vous ne l&#8217;agrandissez pas de quelques pixels. Et non, il n&#8217;existe pas de formules math\u00e9matiques pour d\u00e9terminer \u00e0 l&#8217;avance de combien&nbsp;: il vous faudra tester&nbsp;!<\/p>\n<blockquote><p>Lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/choisir-forme-bouton\" target=\"_blank\" rel=\"noopener noreferrer\">Comment choisir la forme de vos boutons\u2009?<\/a><\/p><\/blockquote>\n<h2>2. L&#8217;alignement est un mensonge<\/h2>\n<p>Puisque l&#8217;on parle de s\u00e9rie de visuels, il faut aussi penser \u00e0 leur alignement.<\/p>\n<p>Commen\u00e7ons par l&#8217;aspect vertical. Positionn\u00e9es l&#8217;une sous l&#8217;autre, une ligne droite et une ligne qui se termine par une fl\u00e8che sembleront de tailles diff\u00e9rentes m\u00eame si ce n&#8217;est pas le cas.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-11760 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/07\/effet-optique-longueur.jpg\" alt=\"Illusion d'optique longueur\" width=\"600\" height=\"200\" \/><\/p>\n<p>Il vous faudra allonger un peu la deuxi\u00e8me pour donner l&#8217;impression qu&#8217;elles s&#8217;alignent (ce qui est la suite logique du premier point). Et ce qui pourra \u00e9galement \u00eatre utilis\u00e9 si vous vous appuyez sur un bouton en forme de fl\u00e8che sous la fen\u00eatre carr\u00e9e ou rectangulaire d&#8217;un formulaire.<\/p>\n<p>Mais ce principe d&#8217;alignement va plus loin encore. Reprenons ce bouton en forme de fl\u00e8che. Vous y inscrivez un mot, que vous centrez, bien \u00e9videmment. Et pourtant, visuellement, il semble d\u00e9cal\u00e9. C&#8217;est rageant, n&#8217;est-ce pas&nbsp;?<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-11761 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/07\/effet-optique-centre.jpg\" alt=\"Illusion d'optique centre\" width=\"400\" height=\"150\" \/><\/p>\n<p>Pour que l&#8217;\u0153il n&#8217;ait plus besoin de compenser les espaces manquants non couverts, vous devrez toujours ajuster manuellement l&#8217;alignement des mots dans des boutons qui n&#8217;ont pas de bord droit. L&#8217;id\u00e9e est d&#8217;\u00e9carter la zone de texte de la partie du bouton en pointe (et l\u00e0 encore, vous devrez proc\u00e9der par essais-erreurs pour trouver le bon \u00e9quilibre).<\/p>\n<blockquote><p>Lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\" target=\"_blank\" rel=\"noopener noreferrer\">6 astuces de hi\u00e9rarchie visuelle pour am\u00e9liorer votre site web<\/a><\/p><\/blockquote>\n<p>Ce m\u00eame proc\u00e9d\u00e9 est encore plus flagrant quand vous superposez une ic\u00f4ne sur un bouton. Le centrage automatique ne semblera jamais bien align\u00e9 \u00e0 vos yeux. La meilleure solution, c&#8217;est d&#8217;ins\u00e9rer cette ic\u00f4ne dans un cercle qui la touche bord \u00e0 bord, puis d&#8217;aligner ce cercle \u00e0 l&#8217;int\u00e9rieur du bouton.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-11763 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/07\/effet-optique-bouton.jpg\" alt=\"Illusion d'optique bouton\" width=\"500\" height=\"250\" \/><\/p>\n<p>Vous l&#8217;avez compris&nbsp;: il ne faut pas se fier \u00e0 la logique math\u00e9matique pour vos interfaces.<\/p>\n<p>Vous noterez enfin un autre d\u00e9tail&nbsp;: changer la couleur de fond d&#8217;une forme (un rond noir apr\u00e8s un carr\u00e9 blanc) transforme encore son aspect. Dans ce cas-l\u00e0, vous devriez pouvoir conserver le m\u00eame ratio de taille pour les deux blocs.<\/p>\n<p>Les effets d&#8217;optique n&#8217;ont pas fini de vous amuser au moment de <a href=\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\" target=\"_blank\" rel=\"noopener noreferrer\">cr\u00e9er des interfaces<\/a>\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Parfois, l&#8217;\u0153il humain et les ordinateurs ne sont pas d&#8217;accord. Aujourd&#8217;hui, vous allez apprendre les effets d&#8217;optique sur lesquels vous pouvez jouer pour toutes les formes g\u00e9om\u00e9triques \u00e0 ins\u00e9rer dans vos interfaces. Entre les boutons et les formulaires, il y en a beaucoup&nbsp;! 1. Ce qui est identique ne l&#8217;est pas toujours Oui, je sais, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":11765,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[102],"tags":[69],"class_list":["post-11754","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design","tag-graphisme"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Design d&#039;interface : 2 r\u00e8gles d&#039;illusions d&#039;optique \u00e0 conna\u00eetre - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Parfois, l&#039;\u0153il humain et les ordinateurs ne sont pas d&#039;accord. Aujourd&#039;hui, vous allez apprendre les effets d&#039;optique sur lesquels vous pouvez jouer pour\" \/>\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\/regles-illusion-optique-interface\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design d&#039;interface : 2 r\u00e8gles d&#039;illusions d&#039;optique \u00e0 conna\u00eetre - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Parfois, l&#039;\u0153il humain et les ordinateurs ne sont pas d&#039;accord. Aujourd&#039;hui, vous allez apprendre les effets d&#039;optique sur lesquels vous pouvez jouer pour\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/\" \/>\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=\"2019-07-11T08:30:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:23:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/07\/design-interface-illlusion-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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/\"},\"author\":{\"name\":\"Laura Michaud\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\"},\"headline\":\"Design d&#8217;interface&nbsp;: 2 r\u00e8gles d&#8217;illusions d&#8217;optique \u00e0 conna\u00eetre\",\"datePublished\":\"2019-07-11T08:30:41+00:00\",\"dateModified\":\"2025-08-20T15:23:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/\"},\"wordCount\":734,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/07\/design-interface-illlusion-1.jpg\",\"keywords\":[\"Tout savoir sur le Graphisme\"],\"articleSection\":[\"UI design\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/\",\"url\":\"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/\",\"name\":\"Design d'interface : 2 r\u00e8gles d'illusions d'optique \u00e0 conna\u00eetre - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/07\/design-interface-illlusion-1.jpg\",\"datePublished\":\"2019-07-11T08:30:41+00:00\",\"dateModified\":\"2025-08-20T15:23:33+00:00\",\"description\":\"Parfois, l'\u0153il humain et les ordinateurs ne sont pas d'accord. Aujourd'hui, vous allez apprendre les effets d'optique sur lesquels vous pouvez jouer pour\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/07\/design-interface-illlusion-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/07\/design-interface-illlusion-1.jpg\",\"width\":850,\"height\":423},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"UI design\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/ui-design\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Design d&#8217;interface&nbsp;: 2 r\u00e8gles d&#8217;illusions d&#8217;optique \u00e0 conna\u00eetre\"}]},{\"@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:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"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":"Design d'interface : 2 r\u00e8gles d'illusions d'optique \u00e0 conna\u00eetre - Graphiste Blog","description":"Parfois, l'\u0153il humain et les ordinateurs ne sont pas d'accord. Aujourd'hui, vous allez apprendre les effets d'optique sur lesquels vous pouvez jouer pour","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\/regles-illusion-optique-interface\/","og_locale":"fr_FR","og_type":"article","og_title":"Design d'interface : 2 r\u00e8gles d'illusions d'optique \u00e0 conna\u00eetre - Graphiste Blog","og_description":"Parfois, l'\u0153il humain et les ordinateurs ne sont pas d'accord. Aujourd'hui, vous allez apprendre les effets d'optique sur lesquels vous pouvez jouer pour","og_url":"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2019-07-11T08:30:41+00:00","article_modified_time":"2025-08-20T15:23:33+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/07\/design-interface-illlusion-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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/"},"author":{"name":"Laura Michaud","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2"},"headline":"Design d&#8217;interface&nbsp;: 2 r\u00e8gles d&#8217;illusions d&#8217;optique \u00e0 conna\u00eetre","datePublished":"2019-07-11T08:30:41+00:00","dateModified":"2025-08-20T15:23:33+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/"},"wordCount":734,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/07\/design-interface-illlusion-1.jpg","keywords":["Tout savoir sur le Graphisme"],"articleSection":["UI design"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/","url":"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/","name":"Design d'interface : 2 r\u00e8gles d'illusions d'optique \u00e0 conna\u00eetre - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/07\/design-interface-illlusion-1.jpg","datePublished":"2019-07-11T08:30:41+00:00","dateModified":"2025-08-20T15:23:33+00:00","description":"Parfois, l'\u0153il humain et les ordinateurs ne sont pas d'accord. Aujourd'hui, vous allez apprendre les effets d'optique sur lesquels vous pouvez jouer pour","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/07\/design-interface-illlusion-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/07\/design-interface-illlusion-1.jpg","width":850,"height":423},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/regles-illusion-optique-interface\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"UI design","item":"https:\/\/graphiste.com\/blog\/webdesign\/ui-design\/"},{"@type":"ListItem","position":4,"name":"Design d&#8217;interface&nbsp;: 2 r\u00e8gles d&#8217;illusions d&#8217;optique \u00e0 conna\u00eetre"}]},{"@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:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","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\/11754","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=11754"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/11754\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/11765"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=11754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=11754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=11754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}