{"id":950,"date":"2020-05-06T13:42:16","date_gmt":"2020-05-06T11:42:16","guid":{"rendered":"https:\/\/www.sortlist.be\/fr\/blog\/?p=950"},"modified":"2021-09-20T15:16:20","modified_gmt":"2021-09-20T13:16:20","slug":"maquette-site-web","status":"publish","type":"post","link":"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/","title":{"rendered":"Cr\u00e9er la maquette de votre site web | Guide Complet (2021)"},"content":{"rendered":"<p>Pour mettre en ligne votre site Internet, la premi\u00e8re \u00e9tape \u00e0 suivre est de <strong>cr\u00e9er une maquette site web<\/strong>. La maquette de votre site web va vous permettre d&rsquo;\u00e9laborer sa structure et de savoir \u00e0 quoi il va ressembler avant que vous ne commenciez \u00e0 le mettre en place.<\/p>\n<p>Pour faire une m\u00e9taphore, cr\u00e9er la <strong>maquette d&rsquo;un site web<\/strong> est similaire \u00e0 suivre un plan de route : elle vous aidera \u00e0 y voir plus clair et \u00e0 savoir ce que vous devez faire pour atteindre votre objectif.<\/p>\n<h2>Pourquoi cr\u00e9er une maquette site web ?<\/h2>\n<p>Faire une <strong>maquette de site<\/strong> a deux int\u00e9r\u00eats :<\/p>\n<ul>\n<li>Le <strong>maquettage site web<\/strong> permet de construire la structure et l&rsquo;aspect graphique de votre site sans que vous n&rsquo;ayez \u00e0 toucher une seule ligne de code.<\/li>\n<li>Si vous avez de nouvelles id\u00e9es en cours de route, modifier ou d\u00e9placer un \u00e9l\u00e9ment sur une maquette web vous co\u00fbtera 0\u20ac. C&rsquo;est loin d&rsquo;\u00eatre le cas quand vous souhaitez faire une telle modification sur un site qui est d\u00e9j\u00e0 en ligne. D\u00e9placer une fen\u00eatre sur le plan d&rsquo;une maison se fait en un coup de crayon, alors que d\u00e9placer une fen\u00eatre sur une maison d\u00e9j\u00e0 construite demande plusieurs milliers d&rsquo;euros.<\/li>\n<\/ul>\n<p>Ainsi toute l&rsquo;utilit\u00e9 d&rsquo;une <strong>maquette de site<\/strong> est de vous permettre de conna\u00eetre le plan de votre site avant de commencer sa construction. Plusieurs \u00e9l\u00e9ments doivent \u00eatre pris en compte dans votre maquette, il y a bien s\u00fbr l&rsquo;aspect graphique qui renvoie au style de votre site, mais il y a aussi l&rsquo;aspect fonctionnel, qui renvoie \u00e0 la navigation.<\/p>\n<p>Tout le challenge est de <strong>faire une maquette de site<\/strong> jolie \u00e0 voir et qui pr\u00e9voit une navigation facile pour les internautes qui viendront sur votre site.<\/p>\n<h2>Maquette, Wireframe, Mockup : Quelles diff\u00e9rences ?<\/h2>\n<div class=\"entry-content\">Il y a beaucoup de termes diff\u00e9rents pour parler de <strong>maquette de site web<\/strong>. Wireframe est assez connu, mais on peut aussi parler d&rsquo;ergolayout et de mockup. En r\u00e9alit\u00e9 tous ces termes renvoient \u00e0 la m\u00eame chose : une <strong>maquette de site web<\/strong>, qui est une repr\u00e9sentation graphique simplifi\u00e9e de la fa\u00e7on dont vous voulez agencer votre site.<\/div>\n<div><\/div>\n<div class=\"entry-content\">L&rsquo;objectif est de pouvoir donner \u00e0 votre web designer un document qui montre ce \u00e0 quoi vous voulez que votre site web ressemble. La seule chose \u00e0 retenir, c&rsquo;est qu&rsquo;il y a deux types de <strong>maquette de site web<\/strong> que vous pouvez cr\u00e9er.<\/div>\n<div class=\"entry-content\">\n<h3>La maquette fonctionnelle<\/h3>\n<p>Une <strong>maquette fonctionnelle<\/strong> sert \u00e0 construire la structure de votre site et \u00e0 pr\u00e9voir l&rsquo;exp\u00e9rience utilisateur que vous allez cr\u00e9er. Tr\u00e8s concr\u00e8tement, c&rsquo;est sur la maquette fonctionnelle que vous placez vos diff\u00e9rents \u00e9l\u00e9ments :<\/p>\n<ul>\n<li><a href=\"https:\/\/www.adimeo.com\/blog\/ux-quel-menu-de-navigation-site-application\" target=\"_blank\" rel=\"noopener\">menus<\/a>,<\/li>\n<li>boutons,<\/li>\n<li>call to action,<\/li>\n<li>espaces pour s&rsquo;identifier et taper son mot de passe,<\/li>\n<li>etc.<\/li>\n<\/ul>\n<p>Il s\u2019agit donc de d\u00e9finir en noir en blanc la mise en page de votre site, qui comporte l\u2019organisation de ses diff\u00e9rents \u00e9l\u00e9ments et de ses textes principaux.<\/p>\n<p align=\"justify\">La <strong>maquette fonctionnelle<\/strong> se fait en deux parties :<\/p>\n<ul>\n<li>Le \u00ab\u00a0zoning\u00a0\u00bb, qui est un sch\u00e9ma listant les diff\u00e9rentes zones de votre site pour optimiser la structure de l&rsquo;information.<\/li>\n<li>Le \u00ab\u00a0wireframe\u00a0\u00bb, qui int\u00e8gre du contenu dans les diff\u00e9rentes zones d\u00e9finies lors du zoning.<\/li>\n<\/ul>\n<p align=\"justify\">L&rsquo;objectif de la maquette fonctionnelle site web est de poser les bases des conversions que votre site web parviendra \u00e0 g\u00e9n\u00e9rer. Il faut donc garder \u00e0 l&rsquo;esprit l&rsquo;exp\u00e9rience utilisateur lorsque vous construisez cette maquette.<\/p>\n<p align=\"justify\">Voici un exemple de maquette fonctionnelle :<\/p>\n<p align=\"justify\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-951 aligncenter\" src=\"https:\/\/www.sortlist.be\/fr\/blog\/wp-content\/uploads\/2020\/05\/maquette_fonctionnelle.jpg\" alt=\"maquette_fonctionnelle\" width=\"355\" height=\"413\" srcset=\"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle.jpg 945w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-768x894.jpg 768w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-50x58.jpg 50w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-288x335.jpg 288w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-576x670.jpg 576w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-339x395.jpg 339w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-678x789.jpg 678w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-373x434.jpg 373w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-746x868.jpg 746w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-691x804.jpg 691w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-478x556.jpg 478w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-516x601.jpg 516w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-680x792.jpg 680w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/p>\n<h3 align=\"justify\">La maquette graphique<\/h3>\n<\/div>\n<p>Une <strong>maquette graphique<\/strong> vient approfondir la maquette fonctionnelle, en apposant des \u00e9l\u00e9ments graphiques sur cette derni\u00e8re. La maquette graphique int\u00e8gre tous les codes de l&rsquo;identit\u00e9 visuelle de votre marque, que ce soit en termes de couleurs, de logo, ou de typographie.<\/p>\n<p>La maquette graphique est donc une repr\u00e9sentation pr\u00e9cise de votre site, qui doit \u00eatre au plus proche du r\u00e9sultat final attendu. C&rsquo;est sur base de cette maquette graphique que vos d\u00e9veloppeurs, ou que l&rsquo;agence avec laquelle vous allez collaborer, pourra coder votre site en HTML et en CSS.<\/p>\n<p>Voici un <strong>exemple de maquette graphique<\/strong> :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-952 aligncenter\" src=\"https:\/\/www.sortlist.be\/fr\/blog\/wp-content\/uploads\/2020\/05\/maquette_graphique.png\" alt=\"maquette_graphique\" width=\"438\" height=\"464\" srcset=\"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique.png 1038w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-768x814.png 768w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-50x53.png 50w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-288x305.png 288w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-576x610.png 576w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-339x359.png 339w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-678x718.png 678w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-373x395.png 373w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-746x791.png 746w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-691x732.png 691w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-973x1031.png 973w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-478x507.png 478w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-956x1013.png 956w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-516x547.png 516w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-1032x1094.png 1032w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-680x721.png 680w\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" \/><\/p>\n<p>Pour arriver \u00e0 une telle maquette graphique, il est n\u00e9cessaire de prendre le temps de bien faire sa maquette fonctionnelle. L&rsquo;id\u00e9al est de le faire par it\u00e9ration, en construisant une premi\u00e8re maquette fonctionnelle, puis en demandant du feedback, sur base duquel vous pourrez cr\u00e9er une maquette site web efficacement.<\/p>\n<p>Que vous d\u00e9cidiez de coder votre site web vous m\u00eame, ou que vous d\u00e9cidiez de <a href=\"https:\/\/www.sortlist.fr\/s\/creation-graphique\/paris-fr\" target=\"_blank\" rel=\"noopener noreferrer\">collaborer avec une agence<\/a>, il ne faut pas h\u00e9siter \u00e0 se remettre en question et \u00e0 bien retravailler sa maquette fonctionnelle car elle constitue la base de votre maquette graphique.<\/p>\n<h2>Quelles sont les \u00e9tapes \u00e0 suivre pour cr\u00e9er une Maquette Site Web ?<\/h2>\n<p>Pour <strong>cr\u00e9er une maquette site web<\/strong>, il y a trois \u00e9tapes \u00e0 suivre.<\/p>\n<h3>Commencer votre maquettage site web avec une arborescence<\/h3>\n<p>La premi\u00e8re chose \u00e0 faire est d&rsquo;avoir une vue d&rsquo;ensemble de votre site web en \u00e9laborant son arborescence. Cela vous permettra de comprendre comment votre site web sera structur\u00e9 et donc de savoir quels seront les diff\u00e9rents types de pages \u00e0 inclure dans la cr\u00e9ation de votre maquette web.<\/p>\n<p>Pour prendre un <strong>exemple de maquette<\/strong>, si votre site web est un blog, vous allez avoir des pages de type \u00ab\u00a0article de blog\u00a0\u00bb qu&rsquo;il faudra mod\u00e9liser avec une maquette fonctionnelle site web. Si vous voulez cr\u00e9er un e-commerce, ce sera plut\u00f4t des pages \u00ab\u00a0fiche produit\u00a0\u00bb qu&rsquo;il faudra prendre en compte.<\/p>\n<p>Au del\u00e0 de \u00e7a, l\u2019arborescence vous sera utile pour concevoir des parcours clients efficaces en plus de pr\u00e9parer le maillage interne de vos pages, et ce dans un objectif d&rsquo;am\u00e9liorer votre r\u00e9f\u00e9rencement.<\/p>\n<p>Nous avons d\u00e9j\u00e0 publi\u00e9 un <a href=\"https:\/\/www.sortlist.be\/fr\/blog\/arborescence-site-web\/\" target=\"_blank\" rel=\"noopener noreferrer\">article d\u00e9di\u00e9 \u00e0 l&rsquo;arborescence<\/a> pour vous aider dans la bonne r\u00e9alisation de cette \u00e9tape.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-895\" src=\"https:\/\/www.sortlist.be\/fr\/blog\/wp-content\/uploads\/2020\/04\/capture-decran-2020-04-21-a-11.03.11.png\" alt=\"arborescence site de sortlist\" width=\"651\" height=\"367\" srcset=\"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11.png 1144w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-768x434.png 768w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-50x28.png 50w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-288x163.png 288w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-576x325.png 576w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-339x191.png 339w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-678x383.png 678w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-373x211.png 373w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-746x421.png 746w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-691x390.png 691w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-973x549.png 973w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-1048x592.png 1048w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-478x270.png 478w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-956x540.png 956w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-516x291.png 516w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-1032x583.png 1032w, https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/04\/capture-decran-2020-04-21-a-11.03.11-680x384.png 680w\" sizes=\"auto, (max-width: 651px) 100vw, 651px\" \/><\/p>\n<p>Une fois cette \u00e9tape compl\u00e9t\u00e9e, vous pouvez passer \u00e0 l&rsquo;\u00e9laboration de vos pages principales.<\/p>\n<h3>Construire vos pages principales<\/h3>\n<p>Commencez toujours par les maquettes des pages les plus importantes de votre site web, car ce sont d&rsquo;elles que d\u00e9coule tout le reste.<\/p>\n<p>Elles vous aideront \u00e0 \u00e9laborer les maquettes web de vos pages secondaires, en plus d&rsquo;influencer celles-ci. En effet, il est assez commun que l&rsquo;arborescence initiale se retrouve modifi\u00e9e suite \u00e0 la construction des maquettes web des pages principales. Ainsi, ne commencez les maquettes web de vos pages secondaires qu&rsquo;\u00e0 partir du moment o\u00f9 celles de vos pages principales ont \u00e9t\u00e9 retravaill\u00e9es et valid\u00e9es.<\/p>\n<p>Cela vous permettra de gagner du temps. Non seulement en \u00e9vitant de devoir faire des modifications sur toute une s\u00e9rie de <strong>maquettes de site<\/strong>, mais en plus vous pourrez reporter certains \u00e9l\u00e9ments de vos pages principales directement sur vos pages secondaires.<\/p>\n<p>Cela vous fera gagner du temps lors de l&rsquo;\u00e9laboration de vos maquettes web, mais cela permettra aussi au d\u00e9veloppeur charg\u00e9 de cr\u00e9er votre site d&rsquo;\u00e9conomiser du temps, ce qui vous fera gagner de l&rsquo;argent.<\/p>\n<p>Concr\u00e8tement, t\u00e2chez d&rsquo;identifier tous les blocs, tous les tableaux, les menus, les objets graphiques qui peuvent \u00eatre utilis\u00e9s plusieurs fois. Au del\u00e0 de vous faire gagner du temps et de l&rsquo;argent, cela vous permettra aussi de mesurer \u00e0 quel point vos maquettes web sont coh\u00e9rentes les unes avec les autres. Ce qui sera important pour l&rsquo;exp\u00e9rience utilisateur que votre site pourra offrir.<\/p>\n<h3>Cr\u00e9er vos maquettes graphiques<\/h3>\n<p>C&rsquo;est ici que vous traduisez vos maquettes fonctionnelles en maquettes graphiques en utilisant tous les codes de l&rsquo;identit\u00e9 visuelle de votre marque. Bien s\u00fbr, si vous travaillez avec une agence, pr\u00eatez attention \u00e0 trouver un juste \u00e9quilibre entre ce que vous avez en t\u00eate et la libert\u00e9 de cr\u00e9ation que vous accorderez \u00e0 l&rsquo;agence.<\/p>\n<p>Il est tr\u00e8s probable que celle-ci vous surprenne et vous fasse des propositions graphiques auxquelles vous n&rsquo;auriez pas forc\u00e9ment penser.<\/p>\n<p>Voici les diff\u00e9rents \u00e9l\u00e9ments \u00e0 ajouter sur une <strong>maquette graphique<\/strong>.<\/p>\n<h4 class=\"fusion-responsive-typography-calculated\" data-fontsize=\"24\" data-lineheight=\"33.6px\">La d\u00e9finition de vos couleurs<\/h4>\n<p>En tant qu&rsquo;entreprise, vous avez probablement d\u00e9j\u00e0 une charte graphique ainsi qu&rsquo;une palette de couleurs bien d\u00e9finies. Maintenant, il va falloir choisir celles qui figureront sur votre site web et la fa\u00e7on dont vous allez les utiliser. L\u2019id\u00e9e est d\u2019attribuer \u00e0 chaque couleur une fonction donn\u00e9e afin d\u2019avoir un cadre logique et une coh\u00e9rence pour le visiteur.<\/p>\n<p>Il vaut mieux ne pas avoir plus de 5 tons diff\u00e9rents afin de ne pas faire fuir vos visiteurs avec trop ou pas assez de couleurs.<\/p>\n<p>Prenez en compte les couleurs de vos :<\/p>\n<ul>\n<li>Fonds ;<\/li>\n<li>Textes ;<\/li>\n<li>Liens ;<\/li>\n<li>Call to Action.<\/li>\n<\/ul>\n<p align=\"justify\">De plus, il est recommand\u00e9 de :<\/p>\n<ul>\n<li>S\u00e9lectionner soit une dominante fonc\u00e9e soit une dominante claire, en fonction de l&rsquo;univers de votre marque ;<\/li>\n<li>Reprendre les couleurs de votre logo pour avoir un tout coh\u00e9rent ;<\/li>\n<li>Mettre du contraste entre les couleurs de fond et celle du texte pour am\u00e9liorer la lisibilit\u00e9.<\/li>\n<\/ul>\n<h4 class=\"fusion-responsive-typography-calculated\" data-fontsize=\"24\" data-lineheight=\"33.6px\"><span id=\"Le_choix_de_la_typographie_Tailles_\/_Polices_et_des_fronts\" class=\"ez-toc-section\"><\/span>Le choix de votre typographie : Taille et Police<\/h4>\n<p align=\"justify\">Il peut \u00eatre compliqu\u00e9 de choisir la bonne police de caract\u00e8res pour un site web. Encore plus si vous d\u00e9cidez d&rsquo;en combiner plusieurs. Cependant, il ne faut pas prendre cette \u00e9tape \u00e0 la l\u00e9g\u00e8re. Vos polices transmettent aussi l&rsquo;identit\u00e9 de votre marque, exactement comme vos couleurs et le tone of voice que vous adoptez. Et au del\u00e0 \u00e7a, de par le fait que vos visiteurs vont lire le contenu que vous aurez publi\u00e9, la typographie est l&rsquo;un des \u00e9l\u00e9ments auxquels ils seront le plus confront\u00e9s.<\/p>\n<p align=\"justify\">Pour vous faciliter la t\u00e2che, n&rsquo;utilisez pas plus de trois polices de caract\u00e8res. \u00c0 ce niveau-l\u00e0, Google Fonts pourra vous aider sur plusieurs niveaux :<\/p>\n<ul>\n<li>Les polices qui y sont disponibles sont id\u00e9ales pour construire un site, et elles sont tellement diversifi\u00e9es que vous trouverez \u00e0 coup s\u00fbr celle qu&rsquo;il vous faut ;<\/li>\n<li>Les polices peuvent \u00eatre int\u00e9gr\u00e9es tr\u00e8s facilement \u00e0 votre site : une ligne de code est suffisante pour faire cette int\u00e9gration ;<\/li>\n<li>Vous pouvez t\u00e9l\u00e9charger les polices tr\u00e8s facilement, ce qui vous aidera \u00e0 construire les \u00e9l\u00e9ments graphiques d&rsquo;autres outils dont vous pourriez avoir besoin ;<\/li>\n<li>Ces polices sont Open Source, donc totalement gratuites et libres de droits.<\/li>\n<\/ul>\n<p>Il y a plusieurs crit\u00e8res \u00e0 prendre en compte pour choisir les typographies que vous allez utiliser :<\/p>\n<ul>\n<li>La lisibilit\u00e9 : la typo doit rendre vos textes facilement lisibles, sans fatiguer le visiteur ;<\/li>\n<li>La diversit\u00e9 : la typo doit \u00eatre attractive dans les diff\u00e9rents styles qu&rsquo;elle propose (light, regular, bold) pour vous permettre de bien structurer votre contenu ;<\/li>\n<li>L&rsquo;efficacit\u00e9 : la typo doit contenir l&rsquo;ensemble des caract\u00e8res dont vous pourriez avoir besoin \u00e0 l&rsquo;avenir ;<\/li>\n<li>La compatibilit\u00e9 : la typo doit pouvoir \u00eatre reconnue par tous les navigateurs et tous les devices qu&rsquo;il est possible d&rsquo;utiliser pour consulter votre site web.<\/li>\n<\/ul>\n<h4 class=\"fusion-responsive-typography-calculated\" data-fontsize=\"28\" data-lineheight=\"36.4px\"><span id=\"La_creation_des_visuels_a_integrer\" class=\"ez-toc-section\"><\/span>Choisir des images d&rsquo;illustration<span id=\"Definition_du_style_des_images\" class=\"ez-toc-section\"><\/span><\/h4>\n<p align=\"justify\">Il va de soi que votre site web va devoir pr\u00e9senter plusieurs images. Que ce soit pour communiquer des informations importantes ou pour am\u00e9liorer son aspect esth\u00e9tique. Utiliser des images pr\u00e9sente en effet plusieurs avantages, notamment celui d&rsquo;illustrer vos propos et d&rsquo;attirer l&rsquo;attention de vos visiteurs.<\/p>\n<p align=\"justify\">Vous pouvez recourir \u00e0 plusieurs types d&rsquo;images :<\/p>\n<ul>\n<li>Photos<\/li>\n<li>Sch\u00e9mas<\/li>\n<li>Illustrations (isom\u00e9triques \/ flat \/ 3D par exemple)<\/li>\n<li>Gif<\/li>\n<\/ul>\n<p>Plusieurs petites choses \u00e0 garder en t\u00eate cela dit :<\/p>\n<ul>\n<li>Utilisez bien s\u00fbr des images de haute qualit\u00e9 ;<\/li>\n<li>Optimisez leur taille pour les rendre plus l\u00e9g\u00e8res ;<\/li>\n<li>Choisissez des images qui fonctionnent aussi bien sur laptop que sur smartphone ;<\/li>\n<li>Utilisez des photos de vos produits ;<\/li>\n<li>Veillez \u00e0 la coh\u00e9rence image-texte\u00a0;<\/li>\n<li>Utilisez des images libres de droits ou produisez les v\u00f4tres.<\/li>\n<\/ul>\n<p align=\"justify\">Concernant le dernier point, vous pouvez soit faire appel \u00e0 un photographe professionnel (si vous avez un budget assez cons\u00e9quent), soit recourir \u00e0 plusieurs biblioth\u00e8ques de photos qui proposent des images libres de droits. Parmi ces biblioth\u00e8ques, il y a par exemple :<\/p>\n<ul>\n<li>Shutterstock ;<\/li>\n<li>Pixabay ;<\/li>\n<li>Unsplash ;<\/li>\n<li>Giphy.<\/li>\n<\/ul>\n<h4 class=\"fusion-responsive-typography-calculated\" data-fontsize=\"24\" data-lineheight=\"33.6px\"><span id=\"Coherences_graphiques\" class=\"ez-toc-section\"><\/span>Attention \u00e0 la coh\u00e9rence graphique<\/h4>\n<p align=\"justify\">Tous ces diff\u00e9rents \u00e9l\u00e9ments peuvent donner un m\u00e9lange qui est loin d&rsquo;\u00eatre homog\u00e8ne. Entre des couleurs, des typographies, et des images, il est tout \u00e0 fait possible que le r\u00e9sultat final ne soit pas du tout satisfaisant. Ainsi, il importe de pr\u00eater attention \u00e0 la coh\u00e9rence qui existe entre ces diff\u00e9rents \u00e9l\u00e9ments. Concr\u00e8tement, le tout donne-t-il un r\u00e9sultat esth\u00e9tique et attractif ?<\/p>\n<p align=\"justify\">L&rsquo;objectif de cette \u00e9tape est de valider la maquette graphique de votre site. Vous pouvez aussi proc\u00e9der \u00e0 certains changements si vous estimez que le r\u00e9sultat final n&rsquo;est pas satisfaisant.<\/p>\n<p align=\"justify\">V\u00e9rifiez donc la coh\u00e9rence de chaque \u00e9l\u00e9ment avec l&rsquo;ensemble de votre maquette graphique. V\u00e9rifier une nouvelle fois la maquette fonctionnelle de votre site web, et assurez-vous que l&rsquo;exp\u00e9rience utilisateur sera optimale.<\/p>\n<p align=\"justify\">Cette \u00e9tape est particuli\u00e8rement importante. Une fois votre maquette graphique valid\u00e9e, c&rsquo;est la cr\u00e9ation de votre site web qui commence. Et une fois celle-ci entam\u00e9e, effectuer des changements sera beaucoup plus compliqu\u00e9. V\u00e9rifiez-donc bien que le r\u00e9sultat vos pla\u00eet avant de lancer la production de votre site.<\/p>\n<p align=\"justify\">N&rsquo;oubliez pas que nous pouvons vous aider dans la conception de votre maquette, en vous proposant gratuitement une s\u00e9lection des <a href=\"https:\/\/www.sortlist.be\/fr\/graphisme\" target=\"_blank\" rel=\"noopener noreferrer\">meilleures agences de graphisme<\/a>.<\/p>\n<h2>Quels outils pour faire une Maquette Site Web ?<\/h2>\n<p>Pour cl\u00f4turer cet article, voyons les outils auxquels vous pouvez recourir pour <strong>cr\u00e9er vos diff\u00e9rentes maquettes de site web<\/strong>.<\/p>\n<h3>Les solutions traditionnelles<\/h3>\n<p>Pour cr\u00e9er vos maquettes fonctionnelles, le papier et Microsoft Powerpoint sont les deux solutions les plus simples. Elles offrent l&rsquo;avantage d&rsquo;\u00eatre gratuites, mais ont l&rsquo;inconv\u00e9nient de ne pas faciliter la gestion des proportions. C&rsquo;est contraignant car il faut aujourd&rsquo;hui penser \u00e0 la mise en page de son site web pour plusieurs formats : laptop, tablettes, smartphones.<\/p>\n<ul>\n<li><b>Le papier<\/b> : L\u2019utilisation du papier reste l\u2019un des moyens les plus simples de mettre de l\u2019ordre dans vos id\u00e9es. C&rsquo;est rapide, accessible, souple, et ultra simple.<\/li>\n<li><b>Microsoft Powerpoint<\/b> : oui, ce logiciel peut servir \u00e0 r\u00e9aliser des maquettes fonctionnelles de site web. D&rsquo;autant plus que des biblioth\u00e8ques de composants additionnels sp\u00e9cialement con\u00e7us pour faire des maquettes existent, comme <a title=\"D\u00e9couvrir PowerMockup\" href=\"http:\/\/www.powermockup.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">PowerMockup<\/a> par exemple.<\/li>\n<li><strong>Google Slides<\/strong> : le principe est le m\u00eame que pour Microsoft Powerpoint, mais pr\u00e9sente l&rsquo;avantage de pouvoir \u00eatre utilis\u00e9 par plusieurs personnes en m\u00eame temps. Si vous \u00e9laborez vos maquettes \u00e0 plusieurs, Google Slides peut vous offrir cet aspect collaboratif qu&rsquo;on ne retrouve pas sur Powerpoint.<\/li>\n<li><strong>Canva<\/strong> : Cette solution permet de r\u00e9aliser aussi bien des maquettes fonctionnelles de qualit\u00e9 que des maquettes graphiques gr\u00e2ce <a href=\"https:\/\/www.canva.com\/fr_fr\/graphiques\/sitemap\/\" target=\"_blank\" rel=\"noopener noreferrer\">aux diff\u00e9rents mod\u00e8les<\/a> qui sont propos\u00e9s aux utilisateurs.<\/li>\n<\/ul>\n<h3>Les logiciels sp\u00e9cialis\u00e9s<\/h3>\n<p>Ces logiciels permettent de cr\u00e9er des <strong>maquettes fonctionnelles<\/strong> de sites web.<\/p>\n<p>De plus, contrairement \u00e0 Powerpoint, ils permettent de g\u00e9rer les proportions des diff\u00e9rents composants que vous allez utiliser.<\/p>\n<p>De nombreux logiciels de ce genre existent, en voici quelques-uns :<\/p>\n<ul>\n<li><a title=\"Site web \u00e9diteur\" href=\"https:\/\/cacoo.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Cacoo<\/a> : tourn\u00e9 vers le collaboratif, Cacoo est disponible dans une version gratuite et est tr\u00e8s simple d\u2019utilisation pour cr\u00e9er une maquette site internet.<\/li>\n<li><a title=\"Site web \u00e9diteur\" href=\"http:\/\/balsamiq.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Balsamiq<\/a> : c&rsquo;est une r\u00e9f\u00e9rence dans le domaine de la cr\u00e9ation de site internet. Simple et puissant, Balsamiq permet \u00e0 n\u2019importe qui de faire des maquettes fonctionnelles, m\u00eame si celles-ci sont complexes. En revanche, contrairement \u00e0 Cacoo, Balsamiq est payant : soit en version Dektop (79$) soit en version Web (12$\/mois).<\/li>\n<li><a title=\"Site web \u00e9diteur\" href=\"http:\/\/www.axure.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Axure RP<\/a> : Sans doute le logiciel le plus complet et le plus puissant en mati\u00e8re de cr\u00e9ation de maquette site internet. Le prix de sa version standard est de 249$.<\/li>\n<\/ul>\n<p>Et la liste est encore longue, avec par exemple Sketch, Adobe XD, MockFlow, Moqups, WireframeCC, Wirefy, ou encore Pencil.<\/p>\n<h3>Les logiciels de graphisme<\/h3>\n<p>Pour cr\u00e9er vos maquettes graphiques sur base de vos maquettes fonctionnelles, plusieurs outils sont \u00e0 votre disposition. Cependant, gardez \u00e0 l&rsquo;esprit qu&rsquo;une r\u00e9alisation graphique est plus complexe qu&rsquo;une simple r\u00e9alisation fonctionnelle. Par cons\u00e9quent, les outils sont moins faciles \u00e0 prendre en main et peuvent demander un certain temps d&rsquo;apprentissage.<\/p>\n<p>C&rsquo;est le cas par exemple de la suite Adobe, plus particuli\u00e8rement d&rsquo;Adobe Photoshop et d&rsquo;Adobe Illustrator. Ce sont l\u00e0 les deux outils de r\u00e9f\u00e9rence en mati\u00e8re de cr\u00e9ation de maquettes graphiques.<\/p>\n<h4>Photoshop<\/h4>\n<p>Puissant, souple et adapt\u00e9 pour la phase de d\u00e9coupage n\u00e9cessaire \u00e0 l\u2019int\u00e9gration en HTML \/ CSS, Photoshop est une r\u00e9f\u00e9rence. Certaines alternatives existent, comme Gimp par exemple. Mais si vous voulez atteindre un niveau professionnel, c&rsquo;est vers Photoshop qu&rsquo;il faudra vous tourner.<\/p>\n<h4>Illustrator<\/h4>\n<p>\u00c0 c\u00f4t\u00e9 de Photoshop, on peut aussi utiliser Illustrator pour r\u00e9ussir votre <strong>maquette graphique<\/strong>. Cela dit, de la m\u00eame mani\u00e8re que pour Photoshop, son utilisation n\u00e9cessite un certain nombre de connaissances. Comme pour Photoshop, Illustrator pr\u00e9sente des avantages. Plus particuli\u00e8rement pour la phase de d\u00e9coupage des maquettes site web pour leur int\u00e9gration en HTML et en CSS.<\/p>\n<h2>Maquette Site Web : Conclusion<\/h2>\n<p>Vous avez maintenant toutes les informations dont vous pouviez avoir besoin pour \u00e9laborer une <strong>maquette de site web<\/strong>. N&rsquo;oubliez pas qu&rsquo;il s&rsquo;agit d&rsquo;une \u00e9tape cruciale pour construire un site efficace, beau et facile \u00e0 utiliser.<\/p>\n<p>De plus, pensez \u00e0 confronter au maximum votre maquette de site web avec votre public cible. Cela vous permettra d&rsquo;\u00e9viter certaines erreurs mais aussi de cr\u00e9er un site parfaitement adapt\u00e9 \u00e0 votre audience.<\/p>\n<p>Si vous souhaitez en savoir plus \u00e0 ce niveau-l\u00e0,\u00a0 je vous invite \u00e0 consulter notre <a href=\"https:\/\/www.sortlist.be\/fr\/blog\/simplifier-site-web-ux-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">article d\u00e9di\u00e9 \u00e0 l&rsquo;UX Design<\/a>, vous y trouverez beaucoup d&rsquo;informations compl\u00e9mentaires qui pourront vous \u00eatre utiles dans la construction de votre maquette.<\/p>\n<p>Vous pouvez \u00e9galement lire notre guide complet du <a href=\"https:\/\/www.sortlist.fr\/developpement-web\" target=\"_blank\" rel=\"noopener\">d\u00e9veloppement web<\/a> pour aller plus loin.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pour mettre en ligne votre site Internet, la premi\u00e8re \u00e9tape \u00e0 suivre est de cr\u00e9er une maquette site web. La maquette de votre site web va vous permettre d&rsquo;\u00e9laborer sa structure et de savoir \u00e0 quoi il va ressembler avant que vous ne commenciez \u00e0 le mettre en place. Pour faire une m\u00e9taphore, cr\u00e9er la [&hellip;]<\/p>\n","protected":false},"author":17,"featured_media":5038,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,3],"class_list":["post-950","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developpement-web","category-web-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Maquette Site Web : Comment Cr\u00e9er la Maquette de Votre Site ? | 2026<\/title>\n<meta name=\"description\" content=\"D\u00e9couvrez comment cr\u00e9er votre maquette site web en 3 \u00e9tapes et les 3 types d&#039;outils \u00e0 utiliser pour cr\u00e9er une maquette web en 2026 .\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Maquette Site Web : Comment Cr\u00e9er la Maquette de Votre Site ? | 2026\" \/>\n<meta property=\"og:description\" content=\"D\u00e9couvrez comment cr\u00e9er votre maquette site web en 3 \u00e9tapes et les 3 types d&#039;outils \u00e0 utiliser pour cr\u00e9er une maquette web en 2026 .\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Sortlist Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-06T11:42:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-20T13:16:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette-site-web.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1747\" \/>\n\t<meta property=\"og:image:height\" content=\"1240\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tancr\u00e8de d&#039;Aspremont Lynden\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tancr\u00e8de d&#039;Aspremont Lynden\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/\",\"url\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/\",\"name\":\"Maquette Site Web : Comment Cr\u00e9er la Maquette de Votre Site ? | 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette-site-web.png\",\"datePublished\":\"2020-05-06T11:42:16+00:00\",\"dateModified\":\"2021-09-20T13:16:20+00:00\",\"author\":{\"@id\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/#\/schema\/person\/4fcda7fb451a474950b4b5162765184d\"},\"description\":\"D\u00e9couvrez comment cr\u00e9er votre maquette site web en 3 \u00e9tapes et les 3 types d'outils \u00e0 utiliser pour cr\u00e9er une maquette web en 2026 .\",\"breadcrumb\":{\"@id\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/#primaryimage\",\"url\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette-site-web.png\",\"contentUrl\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette-site-web.png\",\"width\":1747,\"height\":1240,\"caption\":\"maquette site web\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cr\u00e9er la maquette de votre site web | Guide Complet (2021)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/#website\",\"url\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/\",\"name\":\"Sortlist Blog\",\"description\":\"Guides, e-books, interviews &amp; articles d\u2019experts pour vous lancer dans le marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/#\/schema\/person\/4fcda7fb451a474950b4b5162765184d\",\"name\":\"Tancr\u00e8de d'Aspremont Lynden\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/07\/avatar_user_17_1625133425-96x96.png\",\"contentUrl\":\"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/07\/avatar_user_17_1625133425-96x96.png\",\"caption\":\"Tancr\u00e8de d'Aspremont Lynden\"},\"description\":\"Content Manager chez Sortlist. Son travail lui donne l'ocasion de combiner ses deux passions : la cr\u00e9ation de contenu et le marketing. Lorsqu'il n'\u00e9crit pas d'articles pour notre blog, il anime le podcast \\\"Beyond Marketing\\\".\",\"url\":\"https:\/\/www.sortlist-test.be\/fr\/blog\/author\/tancrede\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Maquette Site Web : Comment Cr\u00e9er la Maquette de Votre Site ? | 2026","description":"D\u00e9couvrez comment cr\u00e9er votre maquette site web en 3 \u00e9tapes et les 3 types d'outils \u00e0 utiliser pour cr\u00e9er une maquette web en 2026 .","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"fr_FR","og_type":"article","og_title":"Maquette Site Web : Comment Cr\u00e9er la Maquette de Votre Site ? | 2026","og_description":"D\u00e9couvrez comment cr\u00e9er votre maquette site web en 3 \u00e9tapes et les 3 types d'outils \u00e0 utiliser pour cr\u00e9er une maquette web en 2026 .","og_url":"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/","og_site_name":"Sortlist Blog","article_published_time":"2020-05-06T11:42:16+00:00","article_modified_time":"2021-09-20T13:16:20+00:00","og_image":[{"width":1747,"height":1240,"url":"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette-site-web.png","type":"image\/png"}],"author":"Tancr\u00e8de d'Aspremont Lynden","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Tancr\u00e8de d'Aspremont Lynden","Dur\u00e9e de lecture estim\u00e9e":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/","url":"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/","name":"Maquette Site Web : Comment Cr\u00e9er la Maquette de Votre Site ? | 2026","isPartOf":{"@id":"https:\/\/www.sortlist-test.be\/fr\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/#primaryimage"},"image":{"@id":"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette-site-web.png","datePublished":"2020-05-06T11:42:16+00:00","dateModified":"2021-09-20T13:16:20+00:00","author":{"@id":"https:\/\/www.sortlist-test.be\/fr\/blog\/#\/schema\/person\/4fcda7fb451a474950b4b5162765184d"},"description":"D\u00e9couvrez comment cr\u00e9er votre maquette site web en 3 \u00e9tapes et les 3 types d'outils \u00e0 utiliser pour cr\u00e9er une maquette web en 2026 .","breadcrumb":{"@id":"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/#primaryimage","url":"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette-site-web.png","contentUrl":"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette-site-web.png","width":1747,"height":1240,"caption":"maquette site web"},{"@type":"BreadcrumbList","@id":"https:\/\/www.sortlist-test.be\/fr\/blog\/maquette-site-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.sortlist-test.be\/fr\/blog\/"},{"@type":"ListItem","position":2,"name":"Cr\u00e9er la maquette de votre site web | Guide Complet (2021)"}]},{"@type":"WebSite","@id":"https:\/\/www.sortlist-test.be\/fr\/blog\/#website","url":"https:\/\/www.sortlist-test.be\/fr\/blog\/","name":"Sortlist Blog","description":"Guides, e-books, interviews &amp; articles d\u2019experts pour vous lancer dans le marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sortlist-test.be\/fr\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/www.sortlist-test.be\/fr\/blog\/#\/schema\/person\/4fcda7fb451a474950b4b5162765184d","name":"Tancr\u00e8de d'Aspremont Lynden","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.sortlist-test.be\/fr\/blog\/#\/schema\/person\/image\/","url":"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/07\/avatar_user_17_1625133425-96x96.png","contentUrl":"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/07\/avatar_user_17_1625133425-96x96.png","caption":"Tancr\u00e8de d'Aspremont Lynden"},"description":"Content Manager chez Sortlist. Son travail lui donne l'ocasion de combiner ses deux passions : la cr\u00e9ation de contenu et le marketing. Lorsqu'il n'\u00e9crit pas d'articles pour notre blog, il anime le podcast \"Beyond Marketing\".","url":"https:\/\/www.sortlist-test.be\/fr\/blog\/author\/tancrede\/"}]}},"_links":{"self":[{"href":"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-json\/wp\/v2\/posts\/950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-json\/wp\/v2\/comments?post=950"}],"version-history":[{"count":0,"href":"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-json\/wp\/v2\/posts\/950\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-json\/wp\/v2\/media\/5038"}],"wp:attachment":[{"href":"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-json\/wp\/v2\/media?parent=950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sortlist-test.be\/fr\/blog\/wp-json\/wp\/v2\/categories?post=950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}