{"id":8386,"date":"2018-10-23T10:30:03","date_gmt":"2018-10-23T08:30:03","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=8386"},"modified":"2025-08-20T17:22:39","modified_gmt":"2025-08-20T15:22:39","slug":"design-interface-regle-3-c","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/","title":{"rendered":"Design d&#8217;interface&nbsp;: connaissez-vous la r\u00e8gle des 3 C&nbsp;?"},"content":{"rendered":"<p>Dans le design, il existe un certain nombre de <a href=\"https:\/\/graphiste.com\/blog\/7-secrets-dune-composition-graphique-reussie\" target=\"_blank\" rel=\"noopener noreferrer\">r\u00e8gles \u00e0 suivre<\/a>. Y compris quand il s&#8217;agit de cr\u00e9er une interface, qui doit \u00eatre \u00e0 la fois pratique, utile, et agr\u00e9able \u00e0 utiliser.<\/p>\n<p>La r\u00e8gle des trois C peut vous aider \u00e0 v\u00e9rifier si vous respectez ces objectifs. Les 3 C, ce sont les couleurs, les contrastes et le contenu. D\u00e9couvrez comment en tirer le meilleur profit&nbsp;!<\/p>\n<h2>Premier C&nbsp;: les couleurs<\/h2>\n<p>Nous vous avons d\u00e9j\u00e0 parl\u00e9 un certain nombre de fois des couleurs. De leur <a href=\"https:\/\/graphiste.com\/blog\/signification-des-couleurs\" target=\"_blank\" rel=\"noopener noreferrer\">impact au niveau psychologique<\/a> (oui, les couleurs influencent non seulement la vision que les clients potentiels auront de vous, mais joue aussi sur leurs intentions d&#8217;achat) \u00e0 la meilleure mani\u00e8re de les marier, vous \u00eates maintenant un expert sur le sujet.<\/p>\n<p>Les choix de couleurs n&#8217;ont donc pas uniquement leur importance pour un logo. Mais aussi pour un bouton d&#8217;appel \u00e0 l&#8217;action. Pour le fond qui va \u00eatre sous le texte. Ou les colonnes qui vont l&#8217;encadrer. Pour le bandeau en haut de page\u2026<\/p>\n<p>Chaque s\u00e9lection que vous effectuerez aura un effet qui lui sera propre.<\/p>\n<figure id=\"attachment_8392\" aria-describedby=\"caption-attachment-8392\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-8392 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/10\/couleur-app-mobile.jpg\" alt=\"Couleur app mobile\" width=\"600\" height=\"450\" \/><figcaption id=\"caption-attachment-8392\" class=\"wp-caption-text\">Source&nbsp;: Aga Ciurysek<\/figcaption><\/figure>\n<p>Dans le cadre du design d&#8217;interface, les <a href=\"https:\/\/graphiste.com\/blog\/choisir-couleur-interface-web\" target=\"_blank\" rel=\"noopener noreferrer\">teintes retenues<\/a> devront \u00e9galement servir \u00e0 guider l&#8217;utilisateur, \u00e0 transformer son exp\u00e9rience. N&#8217;h\u00e9sitez pas \u00e0 effectuer des tests avec des tonalit\u00e9s diff\u00e9rentes, pour v\u00e9rifier leur impact.<\/p>\n<p>Vous pourriez \u00eatre surpris de voir l&#8217;interaction se cr\u00e9er plus avec un fond vert qu&#8217;un fond bleu, par exemple.<\/p>\n<p>Mais, dans tous les cas, vous aurez \u00e9galement \u00e0 jouer sur les contrastes, pour mieux mettre en avant certaines parties. Ce qui nous am\u00e8ne au deuxi\u00e8me C.<\/p>\n<h2>Deuxi\u00e8me C&nbsp;: les contrastes<\/h2>\n<p>Le contraste, quand on parle de design d&#8217;interface, ne se limite pas \u00e0 v\u00e9rifier l&#8217;impact d&#8217;une page quand elle est imprim\u00e9e en noir et blanc.<\/p>\n<p>Le contraste va cr\u00e9er du dynamisme en jouant sur&nbsp;:<\/p>\n<ul>\n<li>Les couleurs<\/li>\n<li>Les tailles des \u00e9l\u00e9ments<\/li>\n<li>Leurs formes<\/li>\n<li>Leurs directions<\/li>\n<\/ul>\n<p>Le premier point permet de s&#8217;assurer que <a href=\"https:\/\/graphiste.com\/blog\/meilleure-navigation-site-web\" target=\"_blank\" rel=\"noopener noreferrer\">la navigation reste aussi ais\u00e9e<\/a> quel que soit le support utilis\u00e9 (et les r\u00e9glages qui lui sont propres). Vous devrez trouver la r\u00e9ponse \u00e0 des questions aussi cruciales que &#8220;texte fonc\u00e9 sur fond clair ou texte clair sur fond fonc\u00e9&nbsp;?&#8221;<\/p>\n<figure id=\"attachment_8393\" aria-describedby=\"caption-attachment-8393\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-8393 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/10\/contraste-interface.png\" alt=\"Contraste interface\" width=\"600\" height=\"292\" \/><figcaption id=\"caption-attachment-8393\" class=\"wp-caption-text\">Source&nbsp;: <a href=\"https:\/\/light-and-shadows.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Light &amp; Shadows<\/a><\/figcaption><\/figure>\n<blockquote><p>Une <a href=\"https:\/\/graphiste.com\/blog\/5-erreurs-ergonomie-interface\">interface<\/a> doit \u00eatre facile \u00e0 utiliser, accessible au plus grand nombre mais aussi responsive.<\/p><\/blockquote>\n<p>En alternant les formes et les tonalit\u00e9s claires ou fonc\u00e9es, vous devez uniquement chercher \u00e0 aider l&#8217;internaute \u00e0 mieux se rep\u00e9rer&nbsp;: faire joli n&#8217;est pas la priorit\u00e9 aux premiers stades du d\u00e9veloppement.<\/p>\n<blockquote><p>Lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/web-design-arriere-plan-noir%e2%80%89\" target=\"_blank\" rel=\"noopener noreferrer\">Web design&nbsp;: comment utiliser un arri\u00e8re-plan noir\u2009?<\/a><\/p><\/blockquote>\n<h2>Troisi\u00e8me C&nbsp;: les contenus<\/h2>\n<p>Sur une interface, vous trouverez principalement trois types de contenus. Chacun d&#8217;entre eux doit \u00eatre utilis\u00e9 uniquement s&#8217;il est int\u00e9ressant pour l&#8217;utilisateur.<\/p>\n<p>Voici comment vous y aider.<\/p>\n<h4>Des images<\/h4>\n<p>Les images peuvent avoir deux fonctions sur une interface&nbsp;: \u00eatre utiles ou <a href=\"https:\/\/graphiste.com\/blog\/susciter-emotion-webdesign\" target=\"_blank\" rel=\"noopener noreferrer\">cr\u00e9er un lien \u00e9motionnel<\/a>.<\/p>\n<p>Parmi elles, vous trouverez des <a href=\"https:\/\/graphiste.com\/blog\/photographie-astuces-essentielles\" target=\"_blank\" rel=\"noopener noreferrer\">photos<\/a> (de produits, de d\u00e9monstration ou d&#8217;appui par rapport \u00e0 un contenu textuel), des <a href=\"https:\/\/graphiste.com\/blog\/utiliser-illustration-communication\" target=\"_blank\" rel=\"noopener noreferrer\">illustrations<\/a> (qui personnaliseront l&#8217;interface), des ic\u00f4nes (au but principalement utilitaire, mais qui peuvent \u00eatre transform\u00e9es pour leur insuffler de la personnalit\u00e9), des <a href=\"https:\/\/graphiste.com\/blog\/creer-mascotte\" target=\"_blank\" rel=\"noopener noreferrer\">mascottes<\/a> (pour cr\u00e9er un sentiment d&#8217;appartenance).<\/p>\n<h4>Du texte<\/h4>\n<p>Le texte ne fait pas partie du design \u00e0 proprement parler, mais il est pourtant un \u00e9l\u00e9ment indispensable pour toute interface, il faut donc lui trouver de la place et le mettre en valeur.<\/p>\n<p>La <a href=\"https:\/\/graphiste.com\/blog\/best-of-typographie\" target=\"_blank\" rel=\"noopener noreferrer\">typographie<\/a>, la taille, la couleur du contenu textuel doit donc \u00e9galement \u00eatre pens\u00e9e et pr\u00e9vue pour attirer l&#8217;\u0153il et pour \u00eatre lisible par tous.<\/p>\n<figure id=\"attachment_8391\" aria-describedby=\"caption-attachment-8391\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-8391 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/10\/design-interface-couleur.png\" alt=\"Design d'interface image typo\" width=\"600\" height=\"301\" \/><figcaption id=\"caption-attachment-8391\" class=\"wp-caption-text\">Source&nbsp;: ST\u00c9R\u00c9OSUPER<\/figcaption><\/figure>\n<h4>Des vid\u00e9os<\/h4>\n<p>Les <a href=\"https:\/\/graphiste.com\/blog\/tendances-video\" target=\"_blank\" rel=\"noopener noreferrer\">vid\u00e9os<\/a> sont maintenant devenues incontournables et on en trouve \u00e9galement dans les interfaces, que ce soit en guise d&#8217;introduction, de d\u00e9monstration ou juste pour illustrer un propos.<\/p>\n<p>Dans ce contexte, cependant, les vid\u00e9os devront \u00eatre pr\u00e9vues pour correspondre au ton de l&#8217;interface et au reste de son contenu, pour cr\u00e9er un effet d&#8217;unit\u00e9 r\u00e9el.<\/p>\n<p>&nbsp;<\/p>\n<p>Ces trois C sont donc les bases sur lesquelles vous pourrez cr\u00e9er le design de votre interface. Des bases qui contiennent d\u00e9j\u00e0 les \u00e9tages qui vous permettront de la d\u00e9velopper&nbsp;!<\/p>\n<p>Dans tous les cas, n&#8217;oubliez pas la r\u00e8gle primordiale&nbsp;: pensez toujours d&#8217;abord \u00e0 l&#8217;utilisateur.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans le design, il existe un certain nombre de r\u00e8gles \u00e0 suivre. Y compris quand il s&#8217;agit de cr\u00e9er une interface, qui doit \u00eatre \u00e0 la fois pratique, utile, et agr\u00e9able \u00e0 utiliser. La r\u00e8gle des trois C peut vous aider \u00e0 v\u00e9rifier si vous respectez ces objectifs. Les 3 C, ce sont les couleurs, [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":8389,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-8386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign"],"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 : connaissez-vous la r\u00e8gle des 3 C ? - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Dans le design, il existe un certain nombre de r\u00e8gles \u00e0 suivre. Y compris quand il s&#039;agit de cr\u00e9er une interface, qui doit \u00eatre \u00e0 la fois pratique, utile,\" \/>\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\/design-interface-regle-3-c\/\" \/>\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 : connaissez-vous la r\u00e8gle des 3 C ? - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Dans le design, il existe un certain nombre de r\u00e8gles \u00e0 suivre. Y compris quand il s&#039;agit de cr\u00e9er une interface, qui doit \u00eatre \u00e0 la fois pratique, utile,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/\" \/>\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=\"2018-10-23T08:30:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:22:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/10\/graphiste-design-interface-3c-1.png\" \/>\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\/png\" \/>\n<meta name=\"author\" content=\"Thomas Lazzaroni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@totolazza\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Lazzaroni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/\"},\"author\":{\"name\":\"Thomas Lazzaroni\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\"},\"headline\":\"Design d&#8217;interface&nbsp;: connaissez-vous la r\u00e8gle des 3 C&nbsp;?\",\"datePublished\":\"2018-10-23T08:30:03+00:00\",\"dateModified\":\"2025-08-20T15:22:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/\"},\"wordCount\":773,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/10\/graphiste-design-interface-3c-1.png\",\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/\",\"url\":\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/\",\"name\":\"Design d'interface : connaissez-vous la r\u00e8gle des 3 C ? - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/10\/graphiste-design-interface-3c-1.png\",\"datePublished\":\"2018-10-23T08:30:03+00:00\",\"dateModified\":\"2025-08-20T15:22:39+00:00\",\"description\":\"Dans le design, il existe un certain nombre de r\u00e8gles \u00e0 suivre. Y compris quand il s'agit de cr\u00e9er une interface, qui doit \u00eatre \u00e0 la fois pratique, utile,\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/10\/graphiste-design-interface-3c-1.png\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/10\/graphiste-design-interface-3c-1.png\",\"width\":850,\"height\":423,\"caption\":\"Design interface : r\u00e8gle des 3C\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#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\":\"Design d&#8217;interface&nbsp;: connaissez-vous la r\u00e8gle des 3 C&nbsp;?\"}]},{\"@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\/cc3b0a678aeffcae19ecc599eaf679e5\",\"name\":\"Thomas Lazzaroni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"caption\":\"Thomas Lazzaroni\"},\"description\":\"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/\",\"https:\/\/x.com\/totolazza\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/thomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Design d'interface : connaissez-vous la r\u00e8gle des 3 C ? - Graphiste Blog","description":"Dans le design, il existe un certain nombre de r\u00e8gles \u00e0 suivre. Y compris quand il s'agit de cr\u00e9er une interface, qui doit \u00eatre \u00e0 la fois pratique, utile,","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\/design-interface-regle-3-c\/","og_locale":"fr_FR","og_type":"article","og_title":"Design d'interface : connaissez-vous la r\u00e8gle des 3 C ? - Graphiste Blog","og_description":"Dans le design, il existe un certain nombre de r\u00e8gles \u00e0 suivre. Y compris quand il s'agit de cr\u00e9er une interface, qui doit \u00eatre \u00e0 la fois pratique, utile,","og_url":"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2018-10-23T08:30:03+00:00","article_modified_time":"2025-08-20T15:22:39+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/10\/graphiste-design-interface-3c-1.png","type":"image\/png"}],"author":"Thomas Lazzaroni","twitter_card":"summary_large_image","twitter_creator":"@totolazza","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Thomas Lazzaroni","Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/"},"author":{"name":"Thomas Lazzaroni","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5"},"headline":"Design d&#8217;interface&nbsp;: connaissez-vous la r\u00e8gle des 3 C&nbsp;?","datePublished":"2018-10-23T08:30:03+00:00","dateModified":"2025-08-20T15:22:39+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/"},"wordCount":773,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/10\/graphiste-design-interface-3c-1.png","articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/","url":"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/","name":"Design d'interface : connaissez-vous la r\u00e8gle des 3 C ? - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/10\/graphiste-design-interface-3c-1.png","datePublished":"2018-10-23T08:30:03+00:00","dateModified":"2025-08-20T15:22:39+00:00","description":"Dans le design, il existe un certain nombre de r\u00e8gles \u00e0 suivre. Y compris quand il s'agit de cr\u00e9er une interface, qui doit \u00eatre \u00e0 la fois pratique, utile,","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/10\/graphiste-design-interface-3c-1.png","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/10\/graphiste-design-interface-3c-1.png","width":850,"height":423,"caption":"Design interface : r\u00e8gle des 3C"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/design-interface-regle-3-c\/#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":"Design d&#8217;interface&nbsp;: connaissez-vous la r\u00e8gle des 3 C&nbsp;?"}]},{"@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\/cc3b0a678aeffcae19ecc599eaf679e5","name":"Thomas Lazzaroni","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","caption":"Thomas Lazzaroni"},"description":"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.","sameAs":["https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/","https:\/\/x.com\/totolazza"],"url":"https:\/\/graphiste.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/8386","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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=8386"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/8386\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/8389"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=8386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=8386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=8386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}