{"id":4525,"date":"2020-04-24T10:06:54","date_gmt":"2020-04-24T08:06:54","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=4525"},"modified":"2020-04-24T10:06:54","modified_gmt":"2020-04-24T08:06:54","slug":"web-design-creer-style-guide","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/","title":{"rendered":"Web design\u00a0: comment cr\u00e9er le guide de style parfait"},"content":{"rendered":"<p>Dans les bonnes pratiques qui facilitent \u00e0 la fois le travail des int\u00e9grateurs webs et les \u00e9changes entre les diff\u00e9rents membres d\u2019une \u00e9quipe, le guide de style <em>(aussi appel\u00e9 pattern library par les anglophones)<\/em> remporte de plus en plus de suffrages.<\/p>\n<p>Apprenez-en plus sur son utilit\u00e9 et la mani\u00e8re de cr\u00e9er <strong>le v\u00f4tre.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2>Qu\u2019est-ce qu\u2019un guide de style\u00a0?<\/h2>\n<p>Le guide de style se rapproche fortement de la charte graphique d\u2019une entreprise.<\/p>\n<p>C\u2019est un document, pr\u00e9sent\u00e9 sous forme de page web ou de pdf, qui recense tous les \u00e9l\u00e9ments utiles concernant le webdesign d\u2019un site (typographie, couleur, apparence des boutons\u2026).<\/p>\n<figure id=\"attachment_18425\" aria-describedby=\"caption-attachment-18425\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-18425 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2017\/09\/reinoo-dribbble-styleguide-3.png\" alt=\"guide de style \" width=\"800\" height=\"600\" \/><figcaption id=\"caption-attachment-18425\" class=\"wp-caption-text\"><a href=\"https:\/\/dribbble.com\/shots\/4750472-Reinoo-Website-Design-System-Style-Guide\" target=\"_blank\" rel=\"noopener noreferrer\">Source<\/a><\/figcaption><\/figure>\n<blockquote><p>Il permet de communiquer tr\u00e8s rapidement avec un client lors de la phase de pr\u00e9paration d\u2019un site mais, surtout, il est n\u00e9cessaire pour que toutes les personnes qui auront \u00e0 intervenir sur celui-ci par la suite connaissent tr\u00e8s exactement les aspects graphiques \u00e0 reprendre.<\/p><\/blockquote>\n<p>Ainsi, plus de risque d\u2019incoh\u00e9rences entre les pages, ni d\u2019heures perdues \u00e0 essayer de retrouver sur laquelle d\u2019entre elles avait \u00e9t\u00e9 pr\u00e9sent\u00e9 cet appel \u00e0 l\u2019action que vous souhaiteriez bien mettre \u00e0 nouveau\u00a0en avant\u2009!<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/creer-guide-de-style-marque\" target=\"_blank\" rel=\"noopener noreferrer\">Comment cr\u00e9er un guide de style en 4 \u00e9tapes pour votre marque<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>Que devez-vous int\u00e9grer dans votre guide de style\u00a0?<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4526 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2017\/09\/style-guide.png\" alt=\"\" width=\"816\" height=\"534\" \/><\/p>\n<p>La plupart des feuilles de style comportent les m\u00eames \u00e9l\u00e9ments, plus ou moins dans le m\u00eame ordre\u00a0:<\/p>\n<ul>\n<li><strong>la palette de couleurs,<\/strong> indiqu\u00e9es en RGB ou en hexad\u00e9cimal, en tenant compte des teintes principales, \u00e9videmment, mais aussi des secondaires\u00a0;<\/li>\n<li><strong>la typographie,<\/strong> en pr\u00e9cisant la famille de police, mais \u00e9galement la taille des caract\u00e8res et les espacements en fonction de leur positionnement dans la page (H1, H2, lien\u2026)\u00a0;<\/li>\n<li><strong>l\u2019iconographie <\/strong>du site, avec les dimensions recommand\u00e9es pour chaque ic\u00f4ne\u00a0;<\/li>\n<li><strong>le type de visuels<\/strong>: format, filtre appliqu\u00e9, cadre, marge autour des images, rognage\u2026<\/li>\n<li><strong>les boutons\u00a0<\/strong>: leurs formes et couleurs, mais aussi leurs r\u00e9actions en fonction des actions des utilisateurs, au passage de la souris ou au clic\u00a0;<\/li>\n<li><strong>l\u2019espacement<\/strong>, vertical comme horizontal, en fonction de la grille de <a href=\"https:\/\/graphiste.com\/blog\/logiciels-pao-mise-en-page\">mise en page<\/a>, selon la taille de l\u2019\u00e9cran, mais \u00e9galement entre les diff\u00e9rents \u00e9l\u00e9ments internes\u00a0;<\/li>\n<li>la forme <strong>des formulaires<\/strong>, leur pr\u00e9sentation type sans oublier les messages de r\u00e9ponse qui apparaissent \u00e0 l\u2019\u00e9cran.<\/li>\n<\/ul>\n<blockquote><p>\u00c0 lire aussi&nbsp;:\u00a0<a href=\"https:\/\/graphiste.com\/blog\/inspiration-site-web-tendance-webdesign\">4 sources d\u2019inspiration pour un site web tendance en 2020<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>Comment vous assurer que votre guide de style soit utilis\u00e9<\/h2>\n<p>Votre guide de style doit \u00eatre connu par toutes les personnes concern\u00e9es par le site, pour qu\u2019il ait une chance de servir. Certaines marques n\u2019h\u00e9sitent d\u2019ailleurs pas \u00e0 proposer les leurs en ligne, et vous en retrouverez un grand nombre sur <a href=\"http:\/\/styleguides.io\/\">StyleGuides<\/a>.<\/p>\n<figure id=\"attachment_18426\" aria-describedby=\"caption-attachment-18426\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-18426 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2017\/09\/dribbble_shot_4x-e1587462574366.png\" alt=\"guide de style\" width=\"800\" height=\"600\" \/><figcaption id=\"caption-attachment-18426\" class=\"wp-caption-text\"><a href=\"https:\/\/dribbble.com\/shots\/6000526-Webdesign-style-guide-1-0-Free\" target=\"_blank\" rel=\"noopener noreferrer\">Source<\/a><\/figcaption><\/figure>\n<p>L\u2019id\u00e9al est de le composer pour qu\u2019il soit directement utilisable, en int\u00e9grant par exemple<strong> les lignes de code<\/strong> que les int\u00e9grateurs n\u2019auront plus qu\u2019\u00e0 recopier telles quelles sur les nouvelles pages.<\/p>\n<blockquote><p>Il peut aussi \u00eatre possible de lier le guide au<a href=\"https:\/\/graphiste.com\/blog\/web-design-guide-animations-css\" target=\"_blank\" rel=\"noopener noreferrer\"> CSS de l\u2019application<\/a>, pour que chaque modification soit automatiquement mise \u00e0 jour sur l\u2019un comme sur l\u2019autre, mais cela peut n\u00e9cessiter un travail de codage suppl\u00e9mentaire pour les n\u00e9ophytes. <\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>Cr\u00e9ez facilement vos feuilles de style<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-4527\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2017\/09\/screenshot-hologram-1024x673.png\" alt=\"\" width=\"810\" height=\"532\" \/><\/p>\n<p>Il existe des sites qui vous encourageront \u00e0 composer vos guides de style en quelques clics, en incluant \u00e9galement la possibilit\u00e9 de les rendre interactifs (et donc d\u2019en faciliter la maintenance).<\/p>\n<p>Ce sera le cas de <a href=\"https:\/\/patternlab.io\/\">Pattern Lab<\/a>, <a href=\"http:\/\/trulia.github.io\/hologram\/\">Hologram<\/a> ou <a href=\"http:\/\/warpspire.com\/kss\/\">KSS<\/a>, pour n\u2019en citer que quelques-uns.<\/p>\n<p>Vous y trouverez des mod\u00e8les pour d\u00e9marrer votre pr\u00e9sentation, que vous n\u2019aurez qu\u2019\u00e0 compl\u00e9ter en fonction des caract\u00e9ristiques de votre site internet.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-9265\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/12\/wireframe.jpg\" alt=\"\" width=\"600\" height=\"397\" \/><\/p>\n<p>L\u2019utilisation d\u2019un tel guide demande moins de travail de maquette, et permet d\u2019avancer en parall\u00e8le sur diff\u00e9rents aspects de la cr\u00e9ation d\u2019un site\u00a0: <a href=\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe-web\">le wireframe<\/a> d\u2019un c\u00f4t\u00e9, les aspects graphiques de l\u2019autre.<\/p>\n<p>Puis de lier les deux. Le gain de temps et d\u2019\u00e9nergie est toujours bon \u00e0 prendre.\u00a0Il pourra aussi contenir le ton g\u00e9n\u00e9ral du site, l\u2019ambiance qu\u2019il doit communiquer, pour que chacun la garde en t\u00eate lors de ses \u00e9volutions ult\u00e9rieures.<\/p>\n<p>&nbsp;<\/p>\n<p>Avant de vous lancer je vous conseille de jeter un oeil aux <a href=\"https:\/\/graphiste.com\/blog\/webdesign-tendances-2021\" target=\"_blank\" rel=\"noopener noreferrer\">tendances web design<\/a>&nbsp;! Et si vous souhaitez faire appel \u00e0 un <a href=\"https:\/\/graphiste.com\/categories\/webdesign\/users\">webdesigner professionnel<\/a> pour la r\u00e9alisation de votre guide de style, vous pouvez d\u00e9poser gratuitement une annonce sur graphiste.com.<\/p>\n<p>Pour aller plus loin, lisez notre article pour cr\u00e9er un <a href=\"https:\/\/graphiste.com\/blog\/creer-guide-de-style-marque\" target=\"_blank\" rel=\"noopener noreferrer\">guide de style pour votre marque<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans les bonnes pratiques qui facilitent \u00e0 la fois le travail des int\u00e9grateurs webs et les \u00e9changes entre les diff\u00e9rents membres d\u2019une \u00e9quipe, le guide de style (aussi appel\u00e9 pattern library par les anglophones) remporte de plus en plus de suffrages. Apprenez-en plus sur son utilit\u00e9 et la mani\u00e8re de cr\u00e9er le v\u00f4tre. &nbsp; Qu\u2019est-ce [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":18428,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[42],"class_list":["post-4525","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-creer-marque"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web design\u00a0: comment cr\u00e9er le guide de style parfait - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Dans les bonnes pratiques qui facilitent \u00e0 la fois le travail des int\u00e9grateurs webs et les \u00e9changes entre les diff\u00e9rents membres d\u2019une \u00e9quipe, le guide de\" \/>\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\/web-design-creer-style-guide\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web design\u00a0: comment cr\u00e9er le guide de style parfait - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Dans les bonnes pratiques qui facilitent \u00e0 la fois le travail des int\u00e9grateurs webs et les \u00e9changes entre les diff\u00e9rents membres d\u2019une \u00e9quipe, le guide de\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/\" \/>\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-04-24T08:06:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2017\/09\/une-graphiste-guide-de-style-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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/\"},\"author\":{\"name\":\"Laura Michaud\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\"},\"headline\":\"Web design\u00a0: comment cr\u00e9er le guide de style parfait\",\"datePublished\":\"2020-04-24T08:06:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/\"},\"wordCount\":801,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2017\/09\/une-graphiste-guide-de-style-1.jpg\",\"keywords\":[\"Cr\u00e9er votre marque\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/\",\"url\":\"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/\",\"name\":\"Web design\u00a0: comment cr\u00e9er le guide de style parfait - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2017\/09\/une-graphiste-guide-de-style-1.jpg\",\"datePublished\":\"2020-04-24T08:06:54+00:00\",\"description\":\"Dans les bonnes pratiques qui facilitent \u00e0 la fois le travail des int\u00e9grateurs webs et les \u00e9changes entre les diff\u00e9rents membres d\u2019une \u00e9quipe, le guide de\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2017\/09\/une-graphiste-guide-de-style-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2017\/09\/une-graphiste-guide-de-style-1.jpg\",\"width\":850,\"height\":423},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#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\":\"Web design\u00a0: comment cr\u00e9er le guide de style parfait\"}]},{\"@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":"Web design\u00a0: comment cr\u00e9er le guide de style parfait - Graphiste Blog","description":"Dans les bonnes pratiques qui facilitent \u00e0 la fois le travail des int\u00e9grateurs webs et les \u00e9changes entre les diff\u00e9rents membres d\u2019une \u00e9quipe, le guide de","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\/web-design-creer-style-guide\/","og_locale":"fr_FR","og_type":"article","og_title":"Web design\u00a0: comment cr\u00e9er le guide de style parfait - Graphiste Blog","og_description":"Dans les bonnes pratiques qui facilitent \u00e0 la fois le travail des int\u00e9grateurs webs et les \u00e9changes entre les diff\u00e9rents membres d\u2019une \u00e9quipe, le guide de","og_url":"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2020-04-24T08:06:54+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2017\/09\/une-graphiste-guide-de-style-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":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/"},"author":{"name":"Laura Michaud","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2"},"headline":"Web design\u00a0: comment cr\u00e9er le guide de style parfait","datePublished":"2020-04-24T08:06:54+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/"},"wordCount":801,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2017\/09\/une-graphiste-guide-de-style-1.jpg","keywords":["Cr\u00e9er votre marque"],"articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/","url":"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/","name":"Web design\u00a0: comment cr\u00e9er le guide de style parfait - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2017\/09\/une-graphiste-guide-de-style-1.jpg","datePublished":"2020-04-24T08:06:54+00:00","description":"Dans les bonnes pratiques qui facilitent \u00e0 la fois le travail des int\u00e9grateurs webs et les \u00e9changes entre les diff\u00e9rents membres d\u2019une \u00e9quipe, le guide de","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2017\/09\/une-graphiste-guide-de-style-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2017\/09\/une-graphiste-guide-de-style-1.jpg","width":850,"height":423},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/web-design-creer-style-guide\/#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":"Web design\u00a0: comment cr\u00e9er le guide de style parfait"}]},{"@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\/4525","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=4525"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/4525\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/18428"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=4525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=4525"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=4525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}