{"id":33826,"date":"2022-09-01T01:00:00","date_gmt":"2022-08-31T23:00:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=33826"},"modified":"2022-11-03T09:10:53","modified_gmt":"2022-11-03T08:10:53","slug":"zoning-site-web","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/zoning-site-web\/","title":{"rendered":"Comment faire un zoning de site web\u00a0?"},"content":{"rendered":"<p>De nos jours, le <a href=\"https:\/\/graphiste.com\/blog\/tendances-webdesign-2022\">web design d\u2019un site internet<\/a> (mais aussi d\u2019une application web) est pens\u00e9, avant toute autre chose, \u00e0 partir des comportements et besoins des utilisateurs.<\/p>\n<p>Le zoning web d\u00e9termine la structure des pages cl\u00e9s du futur site, prenant la forme de sch\u00e9mas simples qui indiquent clairement l\u2019emplacement des principaux \u00e9l\u00e9ments.<\/p>\n<p>Le zoning fait ainsi partie des pi\u00e8ces ma\u00eetresses de l\u2019<a href=\"https:\/\/graphiste.com\/blog\/principes-ux-design\">UX design<\/a>, puisqu\u2019il prend en compte la fonctionnalit\u00e9 du site avant m\u00eame son aspect graphique.<\/p>\n<p>Le zoning web, souvent confondu avec le <a href=\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\">wireframe<\/a> qui est en fait l\u2019une de ses \u00e9tapes, repr\u00e9sente donc une phase indispensable dans la cr\u00e9ation et la refonte d\u2019un site ou d\u2019une application web, offrant des bases ergonomiques saines et optimis\u00e9es au projet. Une \u00e9tape essentielle qui survient donc une fois l\u2019arborescence du site \u00e9tablie, mais bien avant la r\u00e9alisation des premi\u00e8res maquettes graphiques.<\/p>\n<p>Ainsi, m\u00eame si vous faites appel \u00e0 un professionnel pour concevoir votre site ou votre application web, conna\u00eetre les pr\u00e9ceptes du zoning vous aidera \u00e0 mieux appr\u00e9hender ce jargon parfois obscur. Vous pourrez ainsi plus facilement \u00e9tablir et d\u00e9tailler votre <a href=\"https:\/\/graphiste.com\/blog\/rediger-cahier-des-charges\">cahier des charges<\/a>.<\/p>\n<p>Voici comment faire un zoning de site web, en partant de sa d\u00e9finition pr\u00e9cise et de son int\u00e9r\u00eat pour votre projet web.<\/p>\n<p>&nbsp;<\/p>\n<h2>Qu\u2019est-ce que le zoning de site web\u00a0?<\/h2>\n<p>Le zoning web permet d\u2019organiser visuellement une page web. Cette derni\u00e8re est ainsi d\u00e9coup\u00e9e en diff\u00e9rentes zones \u00e0 l\u2019aide de <a href=\"https:\/\/graphiste.com\/blog\/designer-graphiques-schemas\">sch\u00e9mas<\/a> d\u00e9taill\u00e9s. Des zones elles-m\u00eames d\u00e9finies en fonction des besoins du projet. Par cons\u00e9quent, le zoning est une \u00e9tape de conception qui intervient logiquement une fois l\u2019arborescence du site parfaitement d\u00e9finie.<\/p>\n<p>Les sch\u00e9mas du zoning illustre l\u2019architecture globale de la page, et permet de visualiser concr\u00e8tement l\u2019emplacement des diff\u00e9rents \u00e9l\u00e9ments qui la composent, comme\u00a0:<\/p>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<ul>\n<li>le logo,<\/li>\n<li>le<a href=\"https:\/\/graphiste.com\/blog\/meilleure-navigation-site-web\"> menu de navigation<\/a>,<\/li>\n<li>les photos et illustrations,<\/li>\n<li>le texte,<\/li>\n<li>les <a href=\"https:\/\/graphiste.com\/blog\/web-design-utiliser-sidebar\">sidebar<\/a> et <a href=\"https:\/\/graphiste.com\/blog\/web-design-demarquer-footer\">footer<\/a>,<\/li>\n<li>etc.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<\/div>\n<\/div>\n<\/div>\n<p>\u00c0 son issue, le plan obtenu permet aux divers intervenants de se faire une id\u00e9e globale du parcours de navigation que devront suivre les utilisateurs pour parvenir \u00e0 leurs fins.<\/p>\n<figure id=\"attachment_33828\" aria-describedby=\"caption-attachment-33828\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-33828\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/12\/baldiri.jpg\" alt=\"\" width=\"700\" height=\"467\" \/><figcaption id=\"caption-attachment-33828\" class=\"wp-caption-text\">\u00a9 baldiri &#8211; Flickr<\/figcaption><\/figure>\n<p>Ce n\u2019est donc qu\u2019une fois l\u2019\u00e9tape de zoning achev\u00e9e que le webdesign entre en action, se basant sur le plan ainsi \u00e9tabli afin d\u2019assurer simultan\u00e9ment l\u2019ergonomie et l\u2019esth\u00e9tique du site ou de l\u2019application web.<\/p>\n<p>&nbsp;<\/p>\n<h2>Une maquette brute pr\u00e9liminaire<\/h2>\n<p>Le zoning prend la forme de sch\u00e9mas, \u00e0 raison d\u2019un sch\u00e9ma par page principale du site. Les premi\u00e8res maquettes brutes peuvent pr\u00e9alablement \u00eatre dessin\u00e9es par le client afin d\u2019aider le professionnel \u00e0 bien identifier les besoins de celui-ci.<\/p>\n<p>Ces premi\u00e8res \u00e9bauches, permettent notamment au professionnel d\u2019orienter son client en fonction des \u00e9ventuelles contraintes techniques r\u00e9v\u00e9l\u00e9es.<\/p>\n<p>Ces <a href=\"https:\/\/graphiste.com\/blog\/logiciel-prototypage-maquette-web\">maquettes pr\u00e9liminaires<\/a> seront ensuite retravaill\u00e9es par l\u2019\u00e9quipe en charge de la conception ou de la refonte du site, afin d\u2019aboutir \u00e0 un zoning optimis\u00e9 pour l\u2019UX design.<\/p>\n<p>&nbsp;<\/p>\n<h2>Comment r\u00e9aliser efficacement le zoning d\u2019un site web\u00a0?<\/h2>\n<p>&nbsp;<\/p>\n<h3>1. Menez une r\u00e9flexion commune<\/h3>\n<p>Un projet web ne se m\u00e8ne pas seul, et demande le regard de plusieurs personnes \u00e0 chaque \u00e9tape de la cr\u00e9ation ou de la refonte.<\/p>\n<p>Il en va ainsi du zoning. Une r\u00e9flexion commune \u00e0 cette \u00e9tape du projet vous \u00e9vitera d\u2019oublier certaines fonctionnalit\u00e9s et de commettre des erreurs de structure.<\/p>\n<p>&nbsp;<\/p>\n<h3>2. D\u00e9finissez le niveau de d\u00e9tail de votre zoning<\/h3>\n<p>Avant toute autre chose, vous devez d\u00e9cider du niveau de d\u00e9tail de votre zoning web. En effet, vous pourrez potentiellement \u00eatre amen\u00e9 \u00e0 pousser cette \u00e9tape de zoning \u00e0 son apog\u00e9e\u00a0: le wireframing.<\/p>\n<figure id=\"attachment_33830\" aria-describedby=\"caption-attachment-33830\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-33830\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/12\/Frank_Mojica_Design.jpg\" alt=\"\" width=\"700\" height=\"391\" \/><figcaption id=\"caption-attachment-33830\" class=\"wp-caption-text\">\u00a9 <a href=\"https:\/\/frankmojica.design\/perfect-properties\" target=\"_blank\" rel=\"noopener noreferrer\">Frank Mojica Design<\/a>.<\/figcaption><\/figure>\n<p>Le zoning simple est une technique de base qui a pour vocation de d\u00e9terminer les zones principales qui composent les pages du site ou de l\u2019application web, sans pour autant en d\u00e9tailler le contenu. Le zoning web a donc pour vocation de mettre en \u00e9vidence la structure globale de vos gabarits, et d\u2019offrir un premier niveau de lecture du futur site.<\/p>\n<p>Le <a href=\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe-web\">wireframe<\/a>, ou \u201cmaquette fil de fer\u201d, fait quant \u00e0 lui partie des \u00e9tapes d\u2019un zoning plus abouti, puisqu\u2019il permet de d\u00e9tailler ce dernier au maximum. En effet, le wireframing a pour objet de repr\u00e9senter visuellement le fonctionnement des pages, leurs types de contenus, leurs interactions et leurs animations.<\/p>\n<p>Compos\u00e9 de zones cliquables, le wireframe permet de pr\u00e9ciser l\u2019organisation interne de chaque section du zoning, et d\u2019analyser ainsi la fluidit\u00e9 du parcours de l\u2019internaute. La maquette fil de fer offre ainsi une \u00e9valuation plus pr\u00e9cise de l\u2019<a href=\"https:\/\/graphiste.com\/blog\/ergonomie-site-web\">ergonomie du futur site<\/a> afin d\u2019aboutir \u00e0 une exp\u00e9rience utilisateur optimale.<\/p>\n<p>En fonction de l\u2019envergure du projet web, il n\u2019est pas toujours n\u00e9cessaire de pousser l\u2019\u00e9tape du zoning jusqu\u2019au wireframing. Tout d\u00e9pend de la complexit\u00e9 et du nombre de pages qui composent le futur site web.<\/p>\n<p>&nbsp;<\/p>\n<h3>3. Pensez, respirez, vivez UX design<\/h3>\n<p>Un site web doit avant tout \u00eatre con\u00e7u pour offrir une navigation fluide \u00e0 ses visiteurs. \u00c9tablir un zoning web demande donc de vous mettre \u00e0 la place de ces derniers.<\/p>\n<p>\u00c0 l\u2019arriv\u00e9e, vos prospects doivent \u00eatre capables, sans effort, d\u2019acc\u00e9der \u00e0 ce qu\u2019ils cherchent. Dans l\u2019id\u00e9al, faites tester votre zoning \u00e0 des n\u00e9ophytes qui porteront un regard neuf sur votre travail.<\/p>\n<p>&nbsp;<\/p>\n<h3>4. Faites l\u2019inventaire du mat\u00e9riel disponible<\/h3>\n<p>Pour produire votre zoning, r\u00e9unissez l\u2019ensemble des \u00e9l\u00e9ments pr\u00e9alablement d\u00e9finis pour atteindre les objectifs du projet&nbsp;:<\/p>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<ul>\n<li>l\u2019arborescence,<\/li>\n<li>les fonctionnalit\u00e9s,<\/li>\n<li>les exigences commerciales,<\/li>\n<li>les exigences de conception,<\/li>\n<li>le flux utilisateur,<\/li>\n<li>etc.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3>5. Architecturez les informations<\/h3>\n<p>Structurez maintenant ces donn\u00e9es de fa\u00e7on \u00e0 hi\u00e9rarchiser les \u00e9l\u00e9ments \u00e0 inclure dans le contenu du site, et donc dans votre zoning.<\/p>\n<p>Pour ce faire, r\u00e9alisez un organigramme afin de les classer selon leur importance et leur fonction dans le site web.<\/p>\n<p>&nbsp;<\/p>\n<h3>6. Structurez la navigation<\/h3>\n<p>Les flux d&#8217;utilisateurs (c&#8217;est-\u00e0-dire le chemin emprunt\u00e9 par les utilisateurs pour r\u00e9aliser une t\u00e2che) vous aident \u00e0 pr\u00e9voir une <a href=\"https:\/\/graphiste.com\/blog\/meilleure-navigation-site-web\">navigation plus intuitive<\/a> dans votre zoning.<\/p>\n<figure id=\"attachment_33829\" aria-describedby=\"caption-attachment-33829\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-33829\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/12\/Christian_Campos.jpg\" alt=\"\" width=\"700\" height=\"307\" \/><figcaption id=\"caption-attachment-33829\" class=\"wp-caption-text\">\u00a9 Christian Campos &#8211; Flickr<\/figcaption><\/figure>\n<p>Pr\u00e9cisez donc les \u00e9tapes de navigation dans vos sch\u00e9mas, par le biais de textes courts qui d\u00e9crivent rapidement chacune de ces \u00e9tapes.<\/p>\n<p>Les donn\u00e9es fonctionnelles et la navigation du site sont ainsi mises en perspective, et vous permettent d\u2019avoir une id\u00e9e plus pr\u00e9cise de l\u2019organisation et du nombre de pages dont votre site \u00e0 besoin.<\/p>\n<p>&nbsp;<\/p>\n<h3>7. Pr\u00e9cisez les contenus<\/h3>\n<p>Sur vos sch\u00e9mas de zoning, ajoutez vos blocs de contenus, et mentionnez les processus et composants n\u00e9cessaires au fonctionnement du site (fonction recherche, processus de paiement, etc.).<\/p>\n<p>&nbsp;<\/p>\n<h3>8. Pensez au zoning interactif<\/h3>\n<p>Un zoning num\u00e9rique permet l\u2019ajout d\u2019interactions tr\u00e8s utiles pour tester en temps r\u00e9el le futur syst\u00e8me de navigation du site. Vous obtenez alors un sch\u00e9ma de navigation d\u00e9taill\u00e9, m\u00eame si le site n\u2019est encore repr\u00e9sent\u00e9 que par de simples blocs.<\/p>\n<p>Quels outils utiliser pour r\u00e9aliser le zoning d\u2019un site web&nbsp;?<\/p>\n<p>Aujourd\u2019hui, il existe de nombreux<a href=\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\"> logiciels et web services qui permettent de produire facilement un zoning web<\/a>.<\/p>\n<figure id=\"attachment_33831\" aria-describedby=\"caption-attachment-33831\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-33831\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/12\/Wireframe.jpg\" alt=\"\" width=\"700\" height=\"391\" \/><figcaption id=\"caption-attachment-33831\" class=\"wp-caption-text\">Wireframe sous Photoshop, par <a href=\"https:\/\/graphiste.com\/pictures\/173428\" target=\"_blank\" rel=\"noopener noreferrer\">Beno\u00eet Evrard<\/a>.<\/figcaption><\/figure>\n<p>Ces outils, souvent collaboratifs, permettent notamment\u00a0:<\/p>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<ul>\n<li>d\u2019ajouter diff\u00e9rentes formes de contenus \u00e0 vos maquettes ;<\/li>\n<li>de cr\u00e9er rapidement des gabarits (des mod\u00e8les de page) ;<\/li>\n<li>de lier les diff\u00e9rentes pages entre elles ;<\/li>\n<li>etc.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<\/div>\n<\/div>\n<\/div>\n<p>Voici une s\u00e9lection de trois outils parmi les plus utilis\u00e9s par les professionnels pour r\u00e9aliser leurs zonings web\u00a0:<\/p>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<ul>\n<li>Le plus connu reste sans doute <a href=\"https:\/\/balsamiq.com\/wireframes\/\" target=\"_blank\" rel=\"noopener noreferrer\">Balsamiq mockup<\/a>. Cet outil offre notamment un rendu graphique qui met l\u2019accent sur l\u2019aspect fonctionnel du futur site. Logiciel utilis\u00e9 en local, il ne permet en revanche pas le travail collaboratif.<\/li>\n<li>Int\u00e9gr\u00e9 \u00e0 la suite Adobe, <a href=\"https:\/\/www.adobe.com\/fr\/products\/xd.html\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe XD<\/a> est un logiciel collaboratif sp\u00e9cialement destin\u00e9 aux professionnels du web design. L\u2019outil permet de concevoir vos zonings rapidement, et de les partager ensuite sous forme de liens. Des liens qui permettent aux \u00ab invit\u00e9s \u00bb d\u2019acc\u00e9der aux maquettes et d\u2019y laisser des commentaires.<\/li>\n<li>Enfin, <a href=\"https:\/\/moqups.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Moqups<\/a> est un logiciel intuitif et sp\u00e9cifiquement con\u00e7u pour faciliter la co-construction de vos zonings. Il facilite notamment les interactions, commentaires et modifications, et s\u2019av\u00e8re tr\u00e8s accessible, m\u00eame sans formation. Il permet en outre un export des pages du zoning au format PNG ou PDF.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2>Conclusion<\/h2>\n<p>En d\u00e9finissant l\u2019aspect fonctionnel du site, le zoning permet de gagner du temps durant toutes les autres \u00e9tapes de conception ou de refonte. R\u00e9alis\u00e9 en co-cr\u00e9ation entre le professionnel et le client, ce zoning web vous assure de n\u2019oublier aucune fonctionnalit\u00e9 ou information cl\u00e9, et permet de r\u00e9pondre aux objectifs du projet gr\u00e2ce \u00e0 une ergonomie des pages bien pens\u00e9e.<\/p>\n<p>De fait, le zoning a aussi un int\u00e9r\u00eat commercial pour le propri\u00e9taire du site, puisqu\u2019il agit sur le taux de conversion de ce dernier, qu\u2019il s\u2019agisse d\u2019une boutique en ligne ou d\u2019un site vitrine. En effet, l\u2019UI et l\u2019UX design, dont le zoning est un outil, ont pour objet de permettre aux visiteurs de trouver rapidement l\u2019information qu\u2019il cherche, ce qui \u00e9vite qu\u2019ils ne quittent pr\u00e9matur\u00e9ment le site web pour ne plus y revenir. Un bon zoning web permet ainsi, d\u00e8s la conception du site, de d\u00e9finir le parcours client afin de le guider vers la prise de contact ou l\u2019achat.<\/p>\n<p>D\u2019autant qu\u2019une organisation claire du contenu du site web offre \u00e0 vos utilisateurs une exp\u00e9rience positive de leur passage, ce qui leur donnera tr\u00e8s probablement le d\u00e9sir d\u2019y revenir. Ainsi, le zoning doit \u00eatre int\u00e9gr\u00e9 \u00e0 votre strat\u00e9gie marketing en fonction de votre public cible, et \u00eatre utilis\u00e9 comme un outil de fid\u00e9lisation.<\/p>\n<p>Vous \u00eates \u00e0 la recherche d\u2019un professionnel capable de mener votre projet de refonte ou de cr\u00e9ation de site web\u00a0? Rendez-vous sur <a href=\"https:\/\/graphiste.com\">Graphiste.com\u00a0<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>De nos jours, le web design d\u2019un site internet (mais aussi d\u2019une application web) est pens\u00e9, avant toute autre chose, \u00e0 partir des comportements et besoins des utilisateurs. Le zoning web d\u00e9termine la structure des pages cl\u00e9s du futur site, prenant la forme de sch\u00e9mas simples qui indiquent clairement l\u2019emplacement des principaux \u00e9l\u00e9ments. Le zoning [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":33827,"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-33826","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 v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment faire un zoning de site web\u00a0? - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"De nos jours, le web design d\u2019un site internet (mais aussi d\u2019une application web) est pens\u00e9, avant toute autre chose, \u00e0 partir des comportements et\" \/>\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\/zoning-site-web\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment faire un zoning de site web\u00a0? - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"De nos jours, le web design d\u2019un site internet (mais aussi d\u2019une application web) est pens\u00e9, avant toute autre chose, \u00e0 partir des comportements et\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/zoning-site-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-08-31T23:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-03T08:10:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/12\/comment-faire-zoning-site-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=\"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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/zoning-site-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/zoning-site-web\/\"},\"author\":{\"name\":\"Laura Michaud\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\"},\"headline\":\"Comment faire un zoning de site web\u00a0?\",\"datePublished\":\"2022-08-31T23:00:00+00:00\",\"dateModified\":\"2022-11-03T08:10:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/zoning-site-web\/\"},\"wordCount\":1764,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/zoning-site-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/12\/comment-faire-zoning-site-web-1.jpg\",\"keywords\":[\"Booster votre agence\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/zoning-site-web\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/zoning-site-web\/\",\"url\":\"https:\/\/graphiste.com\/blog\/zoning-site-web\/\",\"name\":\"Comment faire un zoning de site web\u00a0? - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/zoning-site-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/zoning-site-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/12\/comment-faire-zoning-site-web-1.jpg\",\"datePublished\":\"2022-08-31T23:00:00+00:00\",\"dateModified\":\"2022-11-03T08:10:53+00:00\",\"description\":\"De nos jours, le web design d\u2019un site internet (mais aussi d\u2019une application web) est pens\u00e9, avant toute autre chose, \u00e0 partir des comportements et\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/zoning-site-web\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/zoning-site-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/zoning-site-web\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/12\/comment-faire-zoning-site-web-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/12\/comment-faire-zoning-site-web-1.jpg\",\"width\":850,\"height\":423,\"caption\":\"\u00a9 Christian Campos - Flickr\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/zoning-site-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comment faire un zoning de site web\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\/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":"Comment faire un zoning de site web\u00a0? - Graphiste Blog","description":"De nos jours, le web design d\u2019un site internet (mais aussi d\u2019une application web) est pens\u00e9, avant toute autre chose, \u00e0 partir des comportements et","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\/zoning-site-web\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment faire un zoning de site web\u00a0? - Graphiste Blog","og_description":"De nos jours, le web design d\u2019un site internet (mais aussi d\u2019une application web) est pens\u00e9, avant toute autre chose, \u00e0 partir des comportements et","og_url":"https:\/\/graphiste.com\/blog\/zoning-site-web\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2022-08-31T23:00:00+00:00","article_modified_time":"2022-11-03T08:10:53+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/12\/comment-faire-zoning-site-web-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":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/zoning-site-web\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/zoning-site-web\/"},"author":{"name":"Laura Michaud","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2"},"headline":"Comment faire un zoning de site web\u00a0?","datePublished":"2022-08-31T23:00:00+00:00","dateModified":"2022-11-03T08:10:53+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/zoning-site-web\/"},"wordCount":1764,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/zoning-site-web\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/12\/comment-faire-zoning-site-web-1.jpg","keywords":["Booster votre agence"],"articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/zoning-site-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/zoning-site-web\/","url":"https:\/\/graphiste.com\/blog\/zoning-site-web\/","name":"Comment faire un zoning de site web\u00a0? - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/zoning-site-web\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/zoning-site-web\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/12\/comment-faire-zoning-site-web-1.jpg","datePublished":"2022-08-31T23:00:00+00:00","dateModified":"2022-11-03T08:10:53+00:00","description":"De nos jours, le web design d\u2019un site internet (mais aussi d\u2019une application web) est pens\u00e9, avant toute autre chose, \u00e0 partir des comportements et","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/zoning-site-web\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/zoning-site-web\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/zoning-site-web\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/12\/comment-faire-zoning-site-web-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/12\/comment-faire-zoning-site-web-1.jpg","width":850,"height":423,"caption":"\u00a9 Christian Campos - Flickr"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/zoning-site-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Comment faire un zoning de site web\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\/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\/33826","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=33826"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/33826\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/33827"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=33826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=33826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=33826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}