{"id":23966,"date":"2022-04-01T01:00:00","date_gmt":"2022-03-31T23:00:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=23966"},"modified":"2022-11-03T09:17:11","modified_gmt":"2022-11-03T08:17:11","slug":"webdesign-comment-preparer-fichier-integration-web","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/","title":{"rendered":"Web design\u00a0: comment bien pr\u00e9parer vos fichiers pour une int\u00e9gration\u00a0?"},"content":{"rendered":"<p>Voici une question dont les r\u00e9ponses vont tr\u00e8s probablement changer la vie des membres de votre \u00e9quipe technique (codeurs, int\u00e9grateurs et d\u00e9veloppeurs)&nbsp;!<\/p>\n<p>En effet, on n\u2019y pense pas toujours, mais quelques gestes simples peuvent beaucoup faciliter et acc\u00e9l\u00e9rer l\u2019int\u00e9gration d\u2019une <a href=\"https:\/\/graphiste.com\/blog\/reussir-site-internet\" target=\"_blank\" rel=\"noopener noreferrer\">maquette web.<\/a><\/p>\n<p>Organisation des calques, ic\u00f4nes, typographies&#8230; D\u00e9couvrez dans cet article comment bien pr\u00e9parer vos fichiers pour une int\u00e9gration web.<\/p>\n<p>&nbsp;<\/p>\n<h2>Bien pr\u00e9parer une maquette d\u2019interface web avant son int\u00e9gration<\/h2>\n<p>En amont de tout projet, le webdesigner doit utiliser le bon logiciel pour concevoir des maquettes graphiques destin\u00e9es ensuite \u00e0 une int\u00e9gration web. Sachez que les logiciels Adobe ont chacun leur propre utilit\u00e9.<\/p>\n<p>\u00c9vitez donc <a href=\"https:\/\/graphiste.com\/blog\/indesign-vs-illustrator-choisir-creations-graphiques\" target=\"_blank\" rel=\"noopener noreferrer\">InDesign<\/a> qui n\u2019est pas du tout adapt\u00e9 \u00e0 la conception d\u2019interfaces web, mais qui est id\u00e9al pour mettre en page des documents print ou <a href=\"https:\/\/graphiste.com\/blog\/logiciels-generer-diviser-proteger-pdf\">PDF<\/a>.<\/p>\n<figure id=\"attachment_23968\" aria-describedby=\"caption-attachment-23968\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-23968\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/128FHUFf8GquFBhzu9-G5Bw.png\" alt=\"material design maquette sute web\" width=\"700\" height=\"632\" \/><figcaption id=\"caption-attachment-23968\" class=\"wp-caption-text\">Materiel design par Google<\/figcaption><\/figure>\n<p>Vous pouvez en revanche cr\u00e9er des maquettes de site internet sur Photoshop et Illustrator, sans \u00eatre ensuite maudit par votre d\u00e9veloppeur. Sachez toutefois que <a href=\"https:\/\/graphiste.com\/blog\/plugins-adobe-xd-free-gratuit-creation\">Adobe XD<\/a>, Sketch et Photoshop sont g\u00e9n\u00e9ralement privil\u00e9gi\u00e9s par les webdesigners, Illustrator \u00e9tant surtout employ\u00e9 par les graphistes print.<\/p>\n<p>Attention, car l\u2019\u00e9quipe technique n\u2019a pas toujours une ma\u00eetrise tr\u00e8s assur\u00e9e du logiciel utilis\u00e9. Avant de lui transmettre la maquette, prenez donc le temps de bien l\u2019organiser&nbsp;:<\/p>\n<ul>\n<li>Renommez tous les calques \u00e0 l\u2019aide de d\u00e9nominations explicites.<\/li>\n<li>Classez vos calques dans un ordre logique et organisez-les en dossiers.<\/li>\n<li>Supprimez les calques sans utilit\u00e9.<\/li>\n<li>Nommez tous les ic\u00f4nes et tous les composants de la maquette.<\/li>\n<\/ul>\n<p>Au moment de transf\u00e9rer vos fichiers, vous pouvez utiliser une plateforme permettant de facilement partager avec le d\u00e9veloppeur des sp\u00e9cifications, actifs, extraits de code\u2026 Quelques exemples&nbsp;: <a href=\"https:\/\/avocode.com\/\">Avocode<\/a>, <a href=\"https:\/\/zeplin.io\/\">Zeplin<\/a>, <a href=\"https:\/\/www.invisionapp.com\/\">Invision<\/a> ou encore <a href=\"https:\/\/material.io\/resources\/gallery\">Material Design Gallery<\/a>.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/se-demarquer-avec-site-web-engageant\">Web design&nbsp;: comment se d\u00e9marquer avec un site web engageant&nbsp;?<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>Pr\u00e9parer et fournir les \u00e9l\u00e9ments de style du futur site web<\/h2>\n<p>Autre astuce et non des moindres, veillez \u00e0 fournir \u00e0 votre \u00e9quipe technique tous les \u00e9l\u00e9ments de style dont elle aura besoin au moment de l\u2019int\u00e9gration de votre maquette sur le site web.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-23971\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/maquette-site-web.png\" alt=\"\" width=\"700\" height=\"415\" \/><\/p>\n<h4>La palette de couleurs<\/h4>\n<p>Fournissez \u00e0 votre d\u00e9veloppeur la palette compl\u00e8te de votre projet. Ces \u00e9l\u00e9ments pr\u00e9cieux ne manqueront pas de lui faire gagner en temps et en efficacit\u00e9 dans la cr\u00e9ation de variables.<\/p>\n<h4>Les ic\u00f4nes<\/h4>\n<p>On y pense peu, mais les ic\u00f4nes peuvent ais\u00e9ment devenir une source d\u00e9sagr\u00e9able de probl\u00e8mes pour votre int\u00e9grateur qui perd un temps pr\u00e9cieux \u00e0 les extraire un \u00e0 un de votre maquette.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-23178\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/10\/icon-filaire-1-e1604048680514.png\" alt=\"icon filaire exemple\" width=\"750\" height=\"563\" \/><\/p>\n<blockquote><p>Pensez donc \u00e0 lui fournir l\u2019ensemble de ces ic\u00f4nes. Et lorsque vous les lui transf\u00e9rez, veillez \u00e0 ce que tous les ic\u00f4nes d\u2019un m\u00eame type pr\u00e9sente la m\u00eame taille.<\/p><\/blockquote>\n<p>Sachez aussi qu\u2019il existe d\u00e9sormais de nombreux sites web qui proposent des biblioth\u00e8ques d\u2019ic\u00f4nes en ligne d\u2019une qualit\u00e9 parfaite.<\/p>\n<p>Une fois le dossier d\u2019ic\u00f4nes t\u00e9l\u00e9charg\u00e9, install\u00e9 sur votre site, et un lien ins\u00e9r\u00e9 dans le header, il sera tr\u00e8s facile d\u2019afficher les ic\u00f4nes souhait\u00e9s n\u2019importe o\u00f9 sur le site. Parmi ces sites d\u2019ic\u00f4nes, l\u2019un des plus populaires n\u2019est autre que <a href=\"https:\/\/fontawesome.com\/?from=io\">Font Awesome<\/a>.<\/p>\n<blockquote><p>Des tutoriels existent pour apprendre \u00e0 <a href=\"https:\/\/www.codeur.com\/tuto\/html\/inserer-icones-font-awesome\/\" target=\"_blank\" rel=\"noopener noreferrer\">installer Font Awesome sur votre site web<\/a>.<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h4>Les \u00e9l\u00e9ments typographiques<\/h4>\n<p>Autre point d\u2019attention \u00e0 ne pas n\u00e9gliger, privil\u00e9giez imp\u00e9rativement les polices Web dans votre conception de maquette. N\u2019optez jamais pour une police de bureau.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-23970\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/typographie-medium.png\" alt=\"typographie medium\" width=\"600\" height=\"318\" \/><\/p>\n<blockquote><p>Attention&nbsp;: En effet, ce type de <a href=\"https:\/\/graphiste.com\/blog\/top-15-meilleures-pires-typographies-police\" target=\"_blank\" rel=\"noopener noreferrer\">typographie<\/a> n\u2019est pas adapt\u00e9 \u00e0 un support web. De plus, votre \u00e9quipe technique risque de perdre du temps \u00e0 installer cette police sur votre site internet.<\/p><\/blockquote>\n<p>Pr\u00e9f\u00e9rez donc choisir votre typo dans l\u2019immense r\u00e9pertoire Web <a href=\"https:\/\/fonts.google.com\/\">Google Fonts<\/a> qui offre une grande quantit\u00e9 de polices open-source.<\/p>\n<p>Pensez \u00e9galement \u00e0 d\u00e9finir les dimensions et caract\u00e9ristiques de votre police.<\/p>\n<p>Par exemple&nbsp;:<\/p>\n<ul>\n<li>Titre H1: Lato Bold 20 px &#8211; Majuscule<\/li>\n<li>Corps 1: Lato Regular 16 px<\/li>\n<li>Corps 2: Lato Regular 14 px<\/li>\n<li>Bouton: Lato Medium 14 px<\/li>\n<li>L\u00e9gende: Lato Light italic 12 px<\/li>\n<li>Surligner&nbsp;: Lato Regular 10 px<\/li>\n<\/ul>\n<blockquote><p>\u00c0 lire aussi&nbsp;:\u00a0<a href=\"https:\/\/graphiste.com\/blog\/logiciel-prototypage-maquette-web\">Web design&nbsp;: 10 logiciels de prototyping pour vos maquettes<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h4>Les diff\u00e9rents \u00e9tats de vos boutons ou CTA<\/h4>\n<p>\u00c9galement bien utile au d\u00e9veloppeur, expliquez-lui pr\u00e9cis\u00e9ment les variations de style entre les diff\u00e9rents \u00e9tats (activ\u00e9, d\u00e9sactiv\u00e9, survol, etc.) des \u00e9l\u00e9ments du site.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-23969\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/etat-des-boutons-cta.png\" alt=\"\" width=\"700\" height=\"350\" \/><\/p>\n<p>Par exemple&nbsp;:<\/p>\n<ul>\n<li>Bouton d\u00e9sactiv\u00e9&nbsp;: 30% #241daf<\/li>\n<li>Bouton activ\u00e9: #4944b0<\/li>\n<li>Bouton au survol&nbsp;: 80% #717087<\/li>\n<li>\u00c9tat actif: 100% #4944b0<\/li>\n<\/ul>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/choisir-forme-bouton\">Comment choisir la forme de vos boutons\u2009?<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>Conclusion<\/h2>\n<p>Le travail de conception graphique d&#8217;une interface web est tr\u00e8s diff\u00e9rent de celui de son int\u00e9gration. Pensez aux<a href=\"https:\/\/graphiste.com\/blog\/web-designer-ameliorer-competences\" target=\"_blank\" rel=\"noopener noreferrer\"> intervenants<\/a> qui devront prendre le relai de votre projet web en s\u2019appuyant exclusivement sur les fichiers que vous leur aurez transmis. En assimilant cette notion tout au long de votre processus de cr\u00e9ation vous aiderez, et acc\u00e9l\u00e9rerez beaucoup le travail des d\u00e9veloppeurs.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-13757\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/eftakher-alam-i1VQZsU86ok-unsplash.jpg\" alt=\"webdesign erreurs courantes en UX UI chez un graphiste\" width=\"650\" height=\"513\" \/><\/p>\n<blockquote><p>Attention&nbsp;: Cr\u00e9er une maquette pour l\u2019interface d\u2019un site web est un projet exaltant. Ne vous emballez toutefois pas trop vite. Pensez \u00e0 consulter les int\u00e9grateurs et d\u00e9veloppeurs de votre projet afin de vous assurer de la faisabilit\u00e9 technique de vos id\u00e9es graphiques.<\/p><\/blockquote>\n<p>Lorsque plusieurs professionnels collaborent sur un m\u00eame projet, la communication et le respect du travail de chacun repr\u00e9sentent la pierre angulaire d\u2019un projet bien men\u00e9. Le r\u00e9sultat final sera ainsi fid\u00e8le \u00e0 vos maquettes, ce qui apportera satisfaction \u00e0 votre client.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/inspiration-web-design-sites-avec-menus-verticaux\">Web design&nbsp;: 10 sites avec menus verticaux<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<p><strong>Vous souhaitez r\u00e9aliser la maquette de votre futur site internet&nbsp;? N\u2019h\u00e9sitez pas \u00e0 consulter les diff\u00e9rents profils des webdesigners professionnels disponibles sur<\/strong><a href=\"https:\/\/graphiste.com\" target=\"_blank\" rel=\"noopener noreferrer\"><strong> Graphiste.com<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voici une question dont les r\u00e9ponses vont tr\u00e8s probablement changer la vie des membres de votre \u00e9quipe technique (codeurs, int\u00e9grateurs et d\u00e9veloppeurs)&nbsp;! En effet, on n\u2019y pense pas toujours, mais quelques gestes simples peuvent beaucoup faciliter et acc\u00e9l\u00e9rer l\u2019int\u00e9gration d\u2019une maquette web. Organisation des calques, ic\u00f4nes, typographies&#8230; D\u00e9couvrez dans cet article comment bien pr\u00e9parer vos [&hellip;]<\/p>\n","protected":false},"author":54,"featured_media":23974,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[40],"class_list":["post-23966","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-booster-agence"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Web design\u00a0: comment bien pr\u00e9parer vos fichiers pour une int\u00e9gration\u00a0? - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Voici une question dont les r\u00e9ponses vont tr\u00e8s probablement changer la vie des membres de votre \u00e9quipe technique (codeurs, int\u00e9grateurs et d\u00e9veloppeurs) !\" \/>\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\/webdesign-comment-preparer-fichier-integration-web\/\" \/>\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 bien pr\u00e9parer vos fichiers pour une int\u00e9gration\u00a0? - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Voici une question dont les r\u00e9ponses vont tr\u00e8s probablement changer la vie des membres de votre \u00e9quipe technique (codeurs, int\u00e9grateurs et d\u00e9veloppeurs) !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/\" \/>\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=\"2022-03-31T23:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-03T08:17:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/une-graphiste-webdesign-preparer-maquette-web-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=\"Solenne Ricard\" \/>\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=\"Solenne Ricard\" \/>\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\\\/webdesign-comment-preparer-fichier-integration-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/webdesign-comment-preparer-fichier-integration-web\\\/\"},\"author\":{\"name\":\"Solenne Ricard\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#\\\/schema\\\/person\\\/d32851799b2f02a17a0e64f98fe5def4\"},\"headline\":\"Web design\u00a0: comment bien pr\u00e9parer vos fichiers pour une int\u00e9gration\u00a0?\",\"datePublished\":\"2022-03-31T23:00:00+00:00\",\"dateModified\":\"2022-11-03T08:17:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/webdesign-comment-preparer-fichier-integration-web\\\/\"},\"wordCount\":999,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/webdesign-comment-preparer-fichier-integration-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2020\\\/12\\\/une-graphiste-webdesign-preparer-maquette-web-1.jpg\",\"keywords\":[\"Booster votre agence\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/graphiste.com\\\/blog\\\/webdesign-comment-preparer-fichier-integration-web\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/webdesign-comment-preparer-fichier-integration-web\\\/\",\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/webdesign-comment-preparer-fichier-integration-web\\\/\",\"name\":\"Web design\u00a0: comment bien pr\u00e9parer vos fichiers pour une int\u00e9gration\u00a0? - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/webdesign-comment-preparer-fichier-integration-web\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/webdesign-comment-preparer-fichier-integration-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2020\\\/12\\\/une-graphiste-webdesign-preparer-maquette-web-1.jpg\",\"datePublished\":\"2022-03-31T23:00:00+00:00\",\"dateModified\":\"2022-11-03T08:17:11+00:00\",\"description\":\"Voici une question dont les r\u00e9ponses vont tr\u00e8s probablement changer la vie des membres de votre \u00e9quipe technique (codeurs, int\u00e9grateurs et d\u00e9veloppeurs) !\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/webdesign-comment-preparer-fichier-integration-web\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/graphiste.com\\\/blog\\\/webdesign-comment-preparer-fichier-integration-web\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/webdesign-comment-preparer-fichier-integration-web\\\/#primaryimage\",\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2020\\\/12\\\/une-graphiste-webdesign-preparer-maquette-web-1.jpg\",\"contentUrl\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2020\\\/12\\\/une-graphiste-webdesign-preparer-maquette-web-1.jpg\",\"width\":850,\"height\":423},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/webdesign-comment-preparer-fichier-integration-web\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web design\u00a0: comment bien pr\u00e9parer vos fichiers pour une int\u00e9gration\u00a0?\"}]},{\"@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\\\/d32851799b2f02a17a0e64f98fe5def4\",\"name\":\"Solenne Ricard\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/89317884380ee1cf794e2e807f66c0d7d6ccf7fe2779b34a087382d27c0f12ee?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/89317884380ee1cf794e2e807f66c0d7d6ccf7fe2779b34a087382d27c0f12ee?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/89317884380ee1cf794e2e807f66c0d7d6ccf7fe2779b34a087382d27c0f12ee?s=96&d=mm&r=g\",\"caption\":\"Solenne Ricard\"},\"description\":\"Dipl\u00f4m\u00e9e d'une licence d'Histoire de l'Art, Solenne propose un point de vue expert sur le graphisme et les outils cr\u00e9atifs.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/solennericard\\\/\"],\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/author\\\/solenne-ricard\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web design\u00a0: comment bien pr\u00e9parer vos fichiers pour une int\u00e9gration\u00a0? - Graphiste Blog","description":"Voici une question dont les r\u00e9ponses vont tr\u00e8s probablement changer la vie des membres de votre \u00e9quipe technique (codeurs, int\u00e9grateurs et d\u00e9veloppeurs) !","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\/webdesign-comment-preparer-fichier-integration-web\/","og_locale":"fr_FR","og_type":"article","og_title":"Web design\u00a0: comment bien pr\u00e9parer vos fichiers pour une int\u00e9gration\u00a0? - Graphiste Blog","og_description":"Voici une question dont les r\u00e9ponses vont tr\u00e8s probablement changer la vie des membres de votre \u00e9quipe technique (codeurs, int\u00e9grateurs et d\u00e9veloppeurs) !","og_url":"https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2022-03-31T23:00:00+00:00","article_modified_time":"2022-11-03T08:17:11+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/une-graphiste-webdesign-preparer-maquette-web-1.jpg","type":"image\/jpeg"}],"author":"Solenne Ricard","twitter_card":"summary_large_image","twitter_creator":"@Graphistecom","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Solenne Ricard","Dur\u00e9e de lecture estim\u00e9e":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/"},"author":{"name":"Solenne Ricard","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/d32851799b2f02a17a0e64f98fe5def4"},"headline":"Web design\u00a0: comment bien pr\u00e9parer vos fichiers pour une int\u00e9gration\u00a0?","datePublished":"2022-03-31T23:00:00+00:00","dateModified":"2022-11-03T08:17:11+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/"},"wordCount":999,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/une-graphiste-webdesign-preparer-maquette-web-1.jpg","keywords":["Booster votre agence"],"articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/","url":"https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/","name":"Web design\u00a0: comment bien pr\u00e9parer vos fichiers pour une int\u00e9gration\u00a0? - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/une-graphiste-webdesign-preparer-maquette-web-1.jpg","datePublished":"2022-03-31T23:00:00+00:00","dateModified":"2022-11-03T08:17:11+00:00","description":"Voici une question dont les r\u00e9ponses vont tr\u00e8s probablement changer la vie des membres de votre \u00e9quipe technique (codeurs, int\u00e9grateurs et d\u00e9veloppeurs) !","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/une-graphiste-webdesign-preparer-maquette-web-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/12\/une-graphiste-webdesign-preparer-maquette-web-1.jpg","width":850,"height":423},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/webdesign-comment-preparer-fichier-integration-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web design\u00a0: comment bien pr\u00e9parer vos fichiers pour une int\u00e9gration\u00a0?"}]},{"@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\/d32851799b2f02a17a0e64f98fe5def4","name":"Solenne Ricard","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/89317884380ee1cf794e2e807f66c0d7d6ccf7fe2779b34a087382d27c0f12ee?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/89317884380ee1cf794e2e807f66c0d7d6ccf7fe2779b34a087382d27c0f12ee?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/89317884380ee1cf794e2e807f66c0d7d6ccf7fe2779b34a087382d27c0f12ee?s=96&d=mm&r=g","caption":"Solenne Ricard"},"description":"Dipl\u00f4m\u00e9e d'une licence d'Histoire de l'Art, Solenne propose un point de vue expert sur le graphisme et les outils cr\u00e9atifs.","sameAs":["https:\/\/www.linkedin.com\/in\/solennericard\/"],"url":"https:\/\/graphiste.com\/blog\/author\/solenne-ricard\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/23966","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\/54"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=23966"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/23966\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/23974"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=23966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=23966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=23966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}