{"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":"2024-08-07T15:42:53","modified_gmt":"2024-08-07T13:42:53","slug":"maquette-site-web","status":"publish","type":"post","link":"https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/","title":{"rendered":"Cr\u00e9er la maquette de votre site web | Guide complet"},"content":{"rendered":"\n<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\n\n\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\n\n\n<h2 class=\"wp-block-heading\">Pourquoi cr\u00e9er une maquette site web ?<\/h2>\n\n\n\n<p>Faire une <strong>maquette de site<\/strong> a deux int\u00e9r\u00eats :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\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\n\n\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\n\n\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.<\/p>\n\n\n\n<p>C&rsquo;est \u00e9galement ce que nous expliquons dans ce podcast, avec les erreurs \u00e0 \u00e9viter quand on lance un site web :&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-spotify wp-block-embed-spotify wp-embed-aspect-21-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Spotify Embed: #12 Lancer son site web : Quelles sont les erreurs \u00e0 \u00e9viter ? - Avec Galopins et l&amp;apos;Agence Nest\" style=\"border-radius: 12px\" width=\"100%\" height=\"152\" frameborder=\"0\" allowfullscreen allow=\"autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture\" loading=\"lazy\" src=\"https:\/\/open.spotify.com\/embed\/episode\/75zdpCgocyat25RzZPHGAL?si=r5oQFkQ7REiaMmhz1w9NUA&#038;utm_source=oembed\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>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\n\n\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\n\n\n<h2 class=\"wp-block-heading\">Maquette, Wireframe, Mockup : Quelles diff\u00e9rences ?<\/h2>\n\n\n\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\n\n\n<div>&nbsp;<\/div>\n\n\n\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\n\n\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<figure><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-951 aligncenter\" src=\"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/2020\/05\/maquette_fonctionnelle.jpg\" alt=\"maquette_fonctionnelle\" width=\"355\" height=\"413\" srcset=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle.jpg 945w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-768x894.jpg 768w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-50x58.jpg 50w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-288x335.jpg 288w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-576x670.jpg 576w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-339x395.jpg 339w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-678x789.jpg 678w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-373x434.jpg 373w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-746x868.jpg 746w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-691x804.jpg 691w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-478x556.jpg 478w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-516x601.jpg 516w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_fonctionnelle-680x792.jpg 680w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/figure><p align=\"justify\"><\/p>\n<h3 align=\"justify\">La maquette graphique<\/h3>\n<\/div>\n\n\n\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 <strong>codes de l&rsquo;<a href=\"https:\/\/www.sortlist.be\/fr\/blog\/comment-creer-une-identite-visuelle-forte-et-efficace-pour-votre-site\/\">identit\u00e9 visuelle<\/a><\/strong> de votre marque, que ce soit en termes de couleurs, de <a href=\"https:\/\/www.sortlist.be\/fr\/blog\/prix-logo\/\">logo<\/a>, ou de typographie.<\/p>\n\n\n\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\n\n\n<p>Voici un <strong>exemple de maquette graphique<\/strong> :<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/2020\/05\/maquette_graphique.png\" alt=\"maquette_graphique\" class=\"wp-image-952\" width=\"693\" height=\"734\" srcset=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique.png 1038w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-768x814.png 768w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-50x53.png 50w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-288x305.png 288w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-576x610.png 576w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-339x359.png 339w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-678x718.png 678w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-373x395.png 373w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-746x791.png 746w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-691x732.png 691w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-973x1031.png 973w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-478x507.png 478w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-956x1013.png 956w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-516x547.png 516w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-1032x1094.png 1032w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2020\/05\/maquette_graphique-680x721.png 680w\" sizes=\"auto, (max-width: 693px) 100vw, 693px\" \/><\/figure><\/div>\n\n\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\n\n\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.be\/fr\/graphisme\/belgique-be\">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\n\n\n<h2 class=\"wp-block-heading\">Quelles sont les \u00e9tapes \u00e0 suivre pour cr\u00e9er une Maquette Site Web ?<\/h2>\n\n\n\n<p>Pour <strong>cr\u00e9er une maquette site web<\/strong>, il y a trois \u00e9tapes \u00e0 suivre.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#1 Commencer votre maquettage site web avec une arborescence<\/h3>\n\n\n\n<p>La premi\u00e8re chose \u00e0 faire est d&rsquo;avoir une vue d&rsquo;ensemble de votre site web en \u00e9laborant son <strong>arborescence<\/strong>. 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\n\n\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\u00a0<a href=\"https:\/\/www.sortlist.be\/fr\/blog\/fiche-produit-exemple\/\">fiche produit<\/a>\u00a0\u00bb qu&rsquo;il faudra prendre en compte.<\/p>\n\n\n\n<p>Au del\u00e0 de \u00e7a, l\u2019arborescence vous sera utile pour concevoir des <a href=\"https:\/\/www.sortlist.be\/fr\/blog\/parcours-client\/\">parcours clients<\/a> efficaces en plus de pr\u00e9parer le <a href=\"https:\/\/www.sortlist.be\/fr\/blog\/maillage-interne-seo\/\">maillage interne<\/a> de vos pages, et ce dans un objectif d&rsquo;am\u00e9liorer votre r\u00e9f\u00e9rencement.<\/p>\n\n\n\n<p>Nous avons d\u00e9j\u00e0 publi\u00e9 un <a href=\"https:\/\/www.sortlist.be\/fr\/blog\/arborescence-site-web\/\">article d\u00e9di\u00e9 \u00e0 l&rsquo;arborescence<\/a> pour vous aider dans la bonne r\u00e9alisation de cette \u00e9tape.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2020\/05\/arborescence.png\" alt=\"arborescence site de sortlist\" class=\"wp-image-13917\" width=\"690\" height=\"489\"\/><\/figure><\/div>\n\n\n<p>Une fois cette \u00e9tape compl\u00e9t\u00e9e, vous pouvez passer \u00e0 l&rsquo;\u00e9laboration de vos pages principales.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#2 Construire vos pages principales<\/h3>\n\n\n\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\n\n\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. <\/p>\n\n\n\n<p>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\n\n\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\n\n\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\n\n\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\n\n\n<h3 class=\"wp-block-heading\">#3 Cr\u00e9er vos maquettes graphiques<\/h3>\n\n\n\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\n\n\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\n\n\n<p>Voici les diff\u00e9rents \u00e9l\u00e9ments \u00e0 ajouter sur une <strong>maquette graphique<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">La d\u00e9finition de vos couleurs<\/h4>\n\n\n\n<p>En tant qu&rsquo;entreprise, vous avez probablement d\u00e9j\u00e0 une charte graphique ainsi qu&rsquo;une <a href=\"https:\/\/www.sortlist.be\/fr\/blog\/palette-de-couleur\/\">palette de couleurs<\/a> 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 <a href=\"https:\/\/www.sortlist.be\/fr\/blog\/signification-des-couleurs\/\">couleur<\/a> une fonction donn\u00e9e afin d\u2019avoir un cadre logique et une coh\u00e9rence pour le visiteur.<\/p>\n\n\n\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\n\n\n<p>Prenez en compte les couleurs de vos :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fonds ;<\/li>\n\n\n\n<li>Textes ;<\/li>\n\n\n\n<li>Liens ;<\/li>\n\n\n\n<li>Call to Action.<\/li>\n<\/ul>\n\n\n\n<p>De plus, il est recommand\u00e9 de :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>S\u00e9lectionner soit une dominante fonc\u00e9e soit une dominante claire, en fonction de l&rsquo;univers de votre marque ;<\/li>\n\n\n\n<li>Reprendre les couleurs de votre logo pour avoir un tout coh\u00e9rent ;<\/li>\n\n\n\n<li>Mettre du contraste entre les couleurs de fond et celle du texte pour am\u00e9liorer la lisibilit\u00e9.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><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\n\n\n<p>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. <\/p>\n\n\n\n<p>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\n\n\n<p>Pour vous faciliter la t\u00e2che, n&rsquo;utilisez <strong>pas plus de trois polices de caract\u00e8res<\/strong>. \u00c0 ce niveau-l\u00e0, Google Fonts pourra vous aider sur plusieurs niveaux :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\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\n\n\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\n\n\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\n\n\n<li>Ces polices sont Open Source, donc totalement gratuites et libres de droits.<\/li>\n<\/ul>\n\n\n\n<p>Il y a plusieurs crit\u00e8res \u00e0 prendre en compte pour choisir les typographies que vous allez utiliser :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>La lisibilit\u00e9<\/em> : la typo doit rendre vos textes facilement lisibles, sans fatiguer le visiteur ;<\/li>\n\n\n\n<li><em>La diversit\u00e9<\/em> : 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\n\n\n<li><em>L&rsquo;efficacit\u00e9<\/em> : la typo doit contenir l&rsquo;ensemble des caract\u00e8res dont vous pourriez avoir besoin \u00e0 l&rsquo;avenir ;<\/li>\n\n\n\n<li><em>La compatibilit\u00e9 <\/em>: 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\n\n\n<h4 class=\"wp-block-heading\"><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\n\n\n<p>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\n\n\n<p>Vous pouvez recourir \u00e0 plusieurs types d&rsquo;images :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Photos<\/li>\n\n\n\n<li>Sch\u00e9mas<\/li>\n\n\n\n<li>Illustrations (isom\u00e9triques \/ flat \/ 3D par exemple)<\/li>\n\n\n\n<li>Gif<\/li>\n<\/ul>\n\n\n\n<p>Plusieurs petites choses \u00e0 garder en t\u00eate cela dit :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilisez bien s\u00fbr des images de haute qualit\u00e9 ;<\/li>\n\n\n\n<li>Optimisez leur taille pour les rendre plus l\u00e9g\u00e8res ;<\/li>\n\n\n\n<li>Choisissez des images qui fonctionnent aussi bien sur laptop que sur smartphone ;<\/li>\n\n\n\n<li>Utilisez des photos de vos produits ;<\/li>\n\n\n\n<li>Veillez \u00e0 la coh\u00e9rence image-texte&nbsp;;<\/li>\n\n\n\n<li>Utilisez des images libres de droits ou produisez les v\u00f4tres.<\/li>\n<\/ul>\n\n\n\n<p>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\n\n\n<ul class=\"wp-block-list\">\n<li>Shutterstock ;<\/li>\n\n\n\n<li>Pixabay ;<\/li>\n\n\n\n<li>Unsplash ;<\/li>\n\n\n\n<li>Giphy.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Coherences_graphiques\" class=\"ez-toc-section\"><\/span>Attention \u00e0 la coh\u00e9rence graphique<\/h4>\n\n\n\n<p>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\n\n\n<p>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\n\n\n<p>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\n\n\n<p>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\n\n\n<p>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\n\n\n<h2 class=\"wp-block-heading\">Bonnes pratiques pour une maquette de site web r\u00e9ussie<\/h2>\n\n\n\n<p>La cr\u00e9ation d&rsquo;une maquette de site web r\u00e9ussie ne se limite pas simplement \u00e0 une disposition visuelle attrayante, mais englobe \u00e9galement des consid\u00e9rations essentielles pour offrir une exp\u00e9rience utilisateur optimale. Voici quelques bonnes pratiques \u00e0 garder \u00e0 l&rsquo;esprit lors de la conception de vos maquettes :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Simplification de la navigation pour une exp\u00e9rience fluide<\/h3>\n\n\n\n<p>Lorsqu&rsquo;il s&rsquo;agit de simplifier la navigation dans votre maquette de site web, l&rsquo;objectif principal est de permettre aux utilisateurs de trouver rapidement et facilement les informations qu&rsquo;ils recherchent. Cela implique une organisation logique des \u00e9l\u00e9ments de navigation tels que les menus, les boutons et les liens. Voici quelques strat\u00e9gies pour garantir une navigation fluide :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hi\u00e9rarchie Visuelle :<\/strong> Organisez les \u00e9l\u00e9ments de navigation en fonction de leur importance et de leur pertinence. Utilisez des tailles de police diff\u00e9rentes, des couleurs contrast\u00e9es ou des ic\u00f4nes pour distinguer visuellement les \u00e9l\u00e9ments principaux des sous-sections.<\/li>\n\n\n\n<li><strong>Menu Simplifi\u00e9 :<\/strong> Limitez le nombre de cat\u00e9gories dans le menu principal pour \u00e9viter de submerger les utilisateurs avec trop d&rsquo;options. Optez pour des libell\u00e9s clairs et concis qui indiquent clairement le contenu ou les services correspondants.<\/li>\n\n\n\n<li><strong>Recherche Intuitive :<\/strong> Si votre site propose une fonction de recherche, placez-la de mani\u00e8re visible et facilement accessible. Assurez-vous que les r\u00e9sultats de recherche sont pertinents et bien organis\u00e9s.<\/li>\n\n\n\n<li><strong>Breadcrumbs (Chemin de Navigation) :<\/strong> Utilisez des breadcrumbs pour indiquer aux utilisateurs leur emplacement actuel dans la structure du site. Cela les aide \u00e0 comprendre leur position et \u00e0 revenir facilement en arri\u00e8re.<\/li>\n\n\n\n<li><strong>Appels \u00e0 l&rsquo;Action Strat\u00e9giques :<\/strong> Placez les boutons d&rsquo;appel \u00e0 l&rsquo;action (CTA) de mani\u00e8re strat\u00e9gique pour guider les utilisateurs vers des actions importantes, comme s&rsquo;inscrire, acheter ou en savoir plus.<\/li>\n<\/ul>\n\n\n\n<p>En simplifiant la navigation, vous offrez aux utilisateurs une exp\u00e9rience plus fluide et intuitive, r\u00e9duisant ainsi leur frustration et augmentant la probabilit\u00e9 qu&rsquo;ils restent plus longtemps sur votre site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Coh\u00e9rence avec l&rsquo;identit\u00e9 visuelle de la marque<\/h3>\n\n\n\n<p>La coh\u00e9rence visuelle est essentielle pour renforcer la reconnaissance de la marque et \u00e9tablir une relation de confiance avec les utilisateurs. Voici comment assurer la coh\u00e9rence avec l&rsquo;identit\u00e9 visuelle de votre marque dans la maquette :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Palette de Couleurs :<\/strong> Utilisez les couleurs qui font partie de l&rsquo;identit\u00e9 visuelle de votre marque. Assurez-vous que ces couleurs sont utilis\u00e9es de mani\u00e8re coh\u00e9rente dans toute la maquette, des boutons aux arri\u00e8re-plans.<\/li>\n\n\n\n<li><strong>Typographie :<\/strong> Choisissez les polices qui refl\u00e8tent le ton et la personnalit\u00e9 de votre marque. Limitez-vous \u00e0 quelques polices pour maintenir la coh\u00e9rence et assurez-vous qu&rsquo;elles sont lisibles sur tous les appareils.<\/li>\n\n\n\n<li><strong>\u00c9l\u00e9ments Visuels :<\/strong> Si votre marque utilise des \u00e9l\u00e9ments visuels sp\u00e9cifiques tels que des ic\u00f4nes, des motifs ou des illustrations, int\u00e9grez-les dans la maquette pour renforcer l&rsquo;identit\u00e9 visuelle.<\/li>\n\n\n\n<li><strong>Ton et Style :<\/strong> Adaptez le ton et le style de la r\u00e9daction aux valeurs de votre marque. Si votre marque est ludique et d\u00e9contract\u00e9e, le langage et le style doivent le refl\u00e9ter.<\/li>\n<\/ul>\n\n\n\n<p>En maintenant une coh\u00e9rence visuelle solide, vous \u00e9tablissez une exp\u00e9rience harmonieuse et m\u00e9morable pour les utilisateurs, renfor\u00e7ant ainsi la reconnaissance de votre marque \u00e0 chaque interaction.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9gration de l&rsquo;ergonomie : convivialit\u00e9 et accessibilit\u00e9<\/h3>\n\n\n\n<p>L&rsquo;ergonomie vise \u00e0 rendre votre maquette conviviale et accessible \u00e0 un large \u00e9ventail d&rsquo;utilisateurs, y compris ceux ayant des besoins particuliers. Voici comment int\u00e9grer l&rsquo;ergonomie dans votre maquette :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Disposition \u00c9quilibr\u00e9e :<\/strong> Organisez les \u00e9l\u00e9ments de mani\u00e8re \u00e0 ce qu&rsquo;ils soient facilement accessibles sans avoir \u00e0 faire d\u00e9filer excessivement la page. Placez les \u00e9l\u00e9ments importants dans des zones visibles.<\/li>\n\n\n\n<li><strong>Contraste et Lisibilit\u00e9 :<\/strong> Assurez-vous que le texte a un contraste suffisant par rapport \u00e0 l&rsquo;arri\u00e8re-plan pour une lisibilit\u00e9 optimale. Utilisez des polices lisibles et de taille ad\u00e9quate.<\/li>\n\n\n\n<li><strong>Accessibilit\u00e9 :<\/strong> Conformez-vous aux normes d&rsquo;accessibilit\u00e9 Web (WCAG) pour garantir que votre maquette est utilisable par tous, y compris les personnes handicap\u00e9es. Cela inclut l&rsquo;utilisation de descriptions alternatives pour les images, une navigation clavier conviviale, etc.<\/li>\n\n\n\n<li><strong>Temps de Chargement :<\/strong> Optimisez les images et les ressources pour r\u00e9duire les temps de chargement. Les utilisateurs appr\u00e9cient les sites qui se chargent rapidement.<\/li>\n<\/ul>\n\n\n\n<p>En int\u00e9grant l&rsquo;ergonomie, vous assurez une exp\u00e9rience conviviale et inclusive pour tous les utilisateurs, ce qui peut avoir un impact positif sur la satisfaction des utilisateurs et la conversion.<\/p>\n\n\n\n<p>En suivant ces principes cl\u00e9s, vous pouvez cr\u00e9er une maquette de site web qui non seulement attire visuellement, mais offre \u00e9galement une exp\u00e9rience utilisateur exceptionnelle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Collaboration et retours<\/h2>\n\n\n\n<p>La collaboration et les retours jouent un r\u00f4le essentiel dans le processus de conception d&rsquo;une maquette de site web. Voici comment optimiser la collaboration et g\u00e9rer les retours de mani\u00e8re efficace :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Importance de la r\u00e9troaction des parties prenantes<\/h3>\n\n\n\n<p>La r\u00e9troaction des parties prenantes est une ressource inestimable dans la cr\u00e9ation d&rsquo;une maquette r\u00e9ussie. Elle offre plusieurs avantages :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Perspectives Multiples :<\/strong> Les diff\u00e9rentes parties prenantes apportent des perspectives uniques en fonction de leurs r\u00f4les et de leurs attentes. Leurs commentaires permettent d&rsquo;identifier des aspects que vous pourriez ne pas avoir envisag\u00e9s.<\/li>\n\n\n\n<li><strong>R\u00e9ponse aux Besoins R\u00e9els :<\/strong> Les retours des parties prenantes aident \u00e0 garantir que la maquette r\u00e9pond aux besoins et aux objectifs initiaux. Cela r\u00e9duit les risques de divergence par rapport aux attentes.<\/li>\n\n\n\n<li><strong>Renforcement de la Propri\u00e9t\u00e9 :<\/strong> Lorsque les parties prenantes sont impliqu\u00e9es dans le processus de conception, elles se sentent davantage investies dans le projet et sont plus susceptibles de soutenir le r\u00e9sultat final.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Processus it\u00e9ratif pour affiner la maquette en fonction des commentaires<\/h3>\n\n\n\n<p>Le processus it\u00e9ratif consiste \u00e0 cr\u00e9er, \u00e0 obtenir des retours, puis \u00e0 apporter des ajustements en fonction de ces retours. Voici comment le processus it\u00e9ratif peut am\u00e9liorer la maquette :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Version Initiale :<\/strong> Commencez par une premi\u00e8re version de la maquette, en tenant compte des informations recueillies lors des r\u00e9unions de d\u00e9marrage.<\/li>\n\n\n\n<li><strong>Obtention de Retours :<\/strong> Partagez la maquette avec les parties prenantes et recueillez leurs retours sp\u00e9cifiques. Encouragez-les \u00e0 \u00eatre francs et constructifs.<\/li>\n\n\n\n<li><strong>Analyse des Retours :<\/strong> Examinez les retours re\u00e7us et identifiez les tendances ou les probl\u00e8mes r\u00e9currents. Cela vous aidera \u00e0 cibler les domaines n\u00e9cessitant des am\u00e9liorations.<\/li>\n\n\n\n<li><strong>Mises \u00e0 Jour Graduelles :<\/strong> Apportez des modifications \u00e0 la maquette en tenant compte des retours. Concentrez-vous sur les ajustements les plus importants plut\u00f4t que de tout r\u00e9viser en une seule fois.<\/li>\n\n\n\n<li><strong>Nouvelle Pr\u00e9sentation :<\/strong> Partagez la maquette mise \u00e0 jour avec les parties prenantes. Expliquez comment leurs retours ont \u00e9t\u00e9 int\u00e9gr\u00e9s et comment cela am\u00e9liore l&rsquo;exp\u00e9rience utilisateur.<\/li>\n\n\n\n<li><strong>R\u00e9p\u00e9tez le Processus :<\/strong> Continuez \u00e0 obtenir des retours \u00e0 chaque it\u00e9ration. Chaque cycle affine davantage la maquette en fonction des besoins et des commentaires.<\/li>\n<\/ul>\n\n\n\n<p>Le processus it\u00e9ratif garantit que la maquette \u00e9volue de mani\u00e8re progressive, en prenant en compte les contributions des parties prenantes. Cela augmente la probabilit\u00e9 d&rsquo;aboutir \u00e0 une conception finale qui r\u00e9pond aux attentes et aux exigences de tous.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pr\u00e9paration pour le d\u00e9veloppement<\/h2>\n\n\n\n<p>Une fois que la maquette de site web a \u00e9t\u00e9 affin\u00e9e gr\u00e2ce \u00e0 la collaboration et aux retours, une phase cruciale s&rsquo;amorce : la pr\u00e9paration de la maquette pour la transition vers le d\u00e9veloppement. Cette \u00e9tape est essentielle pour assurer une continuit\u00e9 fluide entre la conception et la r\u00e9alisation du site final.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conversion de la maquette en guide pour les d\u00e9veloppeurs<\/h3>\n\n\n\n<p>La maquette, en tant qu&rsquo;expression visuelle de la conception, doit \u00eatre traduite en un guide technique pour les d\u00e9veloppeurs. Cette transformation implique de <strong>d\u00e9tailler minutieusement les \u00e9l\u00e9ments visuels en sp\u00e9cifications compr\u00e9hensibles et ex\u00e9cutables<\/strong>. Cela se traduit par la structuration des \u00e9l\u00e9ments en HTML et leur stylisation en CSS, afin de reproduire l&rsquo;aspect visuel avec pr\u00e9cision.<\/p>\n\n\n\n<p>Les \u00e9l\u00e9ments interactifs, tels que les boutons cliquables et les animations, doivent \u00eatre sp\u00e9cifi\u00e9s pour garantir leur fonctionnement conforme \u00e0 la maquette. L&rsquo;adaptabilit\u00e9 de la maquette aux <strong>diff\u00e9rentes r\u00e9solutions d&rsquo;\u00e9cran<\/strong> doit \u00e9galement \u00eatre d\u00e9finie \u00e0 travers des techniques de conception responsive. Les images et autres m\u00e9dias doivent \u00eatre d\u00e9taill\u00e9s en termes de dimensions, de formats et de r\u00e9solutions pour leur int\u00e9gration harmonieuse.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Assurer la compatibilit\u00e9<\/h3>\n\n\n\n<p>La maquette doit fonctionner de mani\u00e8re coh\u00e9rente sur divers navigateurs et appareils pour offrir une exp\u00e9rience utilisateur uniforme. Il est essentiel de mener des tests exhaustifs pour garantir cette compatibilit\u00e9. Les tests de navigateurs doivent \u00eatre r\u00e9alis\u00e9s sur des plateformes populaires telles que <strong>Chrome, Firefox, Safari et Edge<\/strong>.<\/p>\n\n\n\n<p>En outre, la maquette doit \u00eatre \u00e9valu\u00e9e sur une gamme d&rsquo;appareils allant des <strong>ordinateurs de bureau aux smartphones et tablettes<\/strong>. L&rsquo;optimisation des performances est un facteur crucial ; cela implique de veiller \u00e0 ce que la maquette soit con\u00e7ue pour des temps de chargement rapides en comprimant les images et en minimisant les ressources.<\/p>\n\n\n\n<p>En veillant \u00e0 convertir la maquette en un guide technique exhaustif et en assurant sa compatibilit\u00e9 avec divers environnements, vous jetez les bases pour une ex\u00e9cution r\u00e9ussie du d\u00e9veloppement. Une communication claire entre les concepteurs et les d\u00e9veloppeurs est ici primordiale pour garantir que la vision de conception se mat\u00e9rialise de mani\u00e8re fluide et fid\u00e8le.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quels outils pour faire une Maquette Site Web ?<\/h2>\n\n\n\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\n\n\n<h3 class=\"wp-block-heading\">Les solutions traditionnelles<\/h3>\n\n\n\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. <\/p>\n\n\n\n<p>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\n\n\n<ul class=\"wp-block-list\">\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\n\n\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\n\n\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\n\n\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\n\n\n<h3 class=\"wp-block-heading\">Les logiciels sp\u00e9cialis\u00e9s<\/h3>\n\n\n\n<p>Ces logiciels permettent de cr\u00e9er des <strong>maquettes fonctionnelles<\/strong> de sites web.<\/p>\n\n\n\n<p>De plus, contrairement \u00e0 Powerpoint, ils permettent de g\u00e9rer les proportions des diff\u00e9rents composants que vous allez utiliser.<\/p>\n\n\n\n<p>De nombreux logiciels de ce genre existent, en voici quelques-uns :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\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\n\n\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\n\n\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\n\n\n<p>Et la liste est encore longue, avec par exemple Sketch, Adobe XD, MockFlow, Moqups, WireframeCC, Wirefy, ou encore Pencil.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les logiciels de graphisme<\/h3>\n\n\n\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. <\/p>\n\n\n\n<p>Par cons\u00e9quent, les outils sont <strong>moins faciles \u00e0 prendre en main<\/strong> et peuvent demander un certain temps d&rsquo;apprentissage.<\/p>\n\n\n\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\n\n\n<h4 class=\"wp-block-heading\">Photoshop<\/h4>\n\n\n\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<strong> niveau professionnel<\/strong>, c&rsquo;est vers Photoshop qu&rsquo;il faudra vous tourner.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Illustrator<\/h4>\n\n\n\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\n\n\n<h2 class=\"wp-block-heading\">Maquette Site Web : Conclusion<\/h2>\n\n\n\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\n\n\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\n\n\n<p>Si vous souhaitez en savoir plus \u00e0 ce niveau-l\u00e0,&nbsp; je vous invite \u00e0 consulter notre <a href=\"https:\/\/www.sortlist.be\/fr\/blog\/simplifier-site-web-ux-design\/\">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\n\n\n<p>Vous pouvez \u00e9galement lire notre guide complet du <a href=\"https:\/\/www.sortlist.be\/fr\/site-internet\/belgique-be\">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":8401,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_sb_show_comment_boards":false,"content-type":"","om_disable_all_campaigns":false,"footnotes":""},"categories":[29],"class_list":["post-950","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developpement-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Cr\u00e9er la maquette de votre site web | Guide complet<\/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=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cr\u00e9er la maquette de votre site web | Guide complet\" \/>\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.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=\"2024-08-07T13:42:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2022\/03\/creation-site-web.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1748\" \/>\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=\"23 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/maquette-site-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/maquette-site-web\\\/\"},\"author\":{\"name\":\"Tancr\u00e8de d'Aspremont Lynden\",\"@id\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/#\\\/schema\\\/person\\\/3a09cba0494828940c49b550349b464b\"},\"headline\":\"Cr\u00e9er la maquette de votre site web | Guide complet\",\"datePublished\":\"2020-05-06T11:42:16+00:00\",\"dateModified\":\"2024-08-07T13:42:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/maquette-site-web\\\/\"},\"wordCount\":4652,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/maquette-site-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2022\\\/03\\\/creation-site-web.png\",\"articleSection\":[\"D\u00e9veloppement web\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/maquette-site-web\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/maquette-site-web\\\/\",\"url\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/maquette-site-web\\\/\",\"name\":\"Cr\u00e9er la maquette de votre site web | Guide complet\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/maquette-site-web\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/maquette-site-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2022\\\/03\\\/creation-site-web.png\",\"datePublished\":\"2020-05-06T11:42:16+00:00\",\"dateModified\":\"2024-08-07T13:42:53+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/#\\\/schema\\\/person\\\/3a09cba0494828940c49b550349b464b\"},\"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.be\\\/fr\\\/blog\\\/maquette-site-web\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/maquette-site-web\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/maquette-site-web\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2022\\\/03\\\/creation-site-web.png\",\"contentUrl\":\"https:\\\/\\\/cdn.blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2022\\\/03\\\/creation-site-web.png\",\"width\":1748,\"height\":1240,\"caption\":\"combien coute un site internet\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/maquette-site-web\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cr\u00e9er la maquette de votre site web | Guide complet\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.sortlist.be\\\/fr\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.sortlist.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.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.be\\\/fr\\\/blog\\\/#\\\/schema\\\/person\\\/3a09cba0494828940c49b550349b464b\",\"name\":\"Tancr\u00e8de d'Aspremont Lynden\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2022\\\/08\\\/avatar_user_17_1660044810-96x96.jpeg\",\"url\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2022\\\/08\\\/avatar_user_17_1660044810-96x96.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2022\\\/08\\\/avatar_user_17_1660044810-96x96.jpeg\",\"caption\":\"Tancr\u00e8de d'Aspremont Lynden\"},\"description\":\"Content Manager chez Sortlist. Son travail lui donne l'occasion 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.be\\\/fr\\\/blog\\\/author\\\/tancrede\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cr\u00e9er la maquette de votre site web | Guide complet","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":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/","og_locale":"fr_FR","og_type":"article","og_title":"Cr\u00e9er la maquette de votre site web | Guide complet","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.be\/fr\/blog\/maquette-site-web\/","og_site_name":"Sortlist Blog","article_published_time":"2020-05-06T11:42:16+00:00","article_modified_time":"2024-08-07T13:42:53+00:00","og_image":[{"width":1748,"height":1240,"url":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2022\/03\/creation-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":"23 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/#article","isPartOf":{"@id":"https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/"},"author":{"name":"Tancr\u00e8de d'Aspremont Lynden","@id":"https:\/\/www.sortlist.be\/fr\/blog\/#\/schema\/person\/3a09cba0494828940c49b550349b464b"},"headline":"Cr\u00e9er la maquette de votre site web | Guide complet","datePublished":"2020-05-06T11:42:16+00:00","dateModified":"2024-08-07T13:42:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/"},"wordCount":4652,"commentCount":0,"image":{"@id":"https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2022\/03\/creation-site-web.png","articleSection":["D\u00e9veloppement web"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/","url":"https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/","name":"Cr\u00e9er la maquette de votre site web | Guide complet","isPartOf":{"@id":"https:\/\/www.sortlist.be\/fr\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/#primaryimage"},"image":{"@id":"https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2022\/03\/creation-site-web.png","datePublished":"2020-05-06T11:42:16+00:00","dateModified":"2024-08-07T13:42:53+00:00","author":{"@id":"https:\/\/www.sortlist.be\/fr\/blog\/#\/schema\/person\/3a09cba0494828940c49b550349b464b"},"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.be\/fr\/blog\/maquette-site-web\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/#primaryimage","url":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2022\/03\/creation-site-web.png","contentUrl":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/8\/2022\/03\/creation-site-web.png","width":1748,"height":1240,"caption":"combien coute un site internet"},{"@type":"BreadcrumbList","@id":"https:\/\/www.sortlist.be\/fr\/blog\/maquette-site-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.sortlist.be\/fr\/blog\/"},{"@type":"ListItem","position":2,"name":"Cr\u00e9er la maquette de votre site web | Guide complet"}]},{"@type":"WebSite","@id":"https:\/\/www.sortlist.be\/fr\/blog\/#website","url":"https:\/\/www.sortlist.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.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.be\/fr\/blog\/#\/schema\/person\/3a09cba0494828940c49b550349b464b","name":"Tancr\u00e8de d'Aspremont Lynden","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2022\/08\/avatar_user_17_1660044810-96x96.jpeg","url":"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2022\/08\/avatar_user_17_1660044810-96x96.jpeg","contentUrl":"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2022\/08\/avatar_user_17_1660044810-96x96.jpeg","caption":"Tancr\u00e8de d'Aspremont Lynden"},"description":"Content Manager chez Sortlist. Son travail lui donne l'occasion 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.be\/fr\/blog\/author\/tancrede\/"}]}},"_links":{"self":[{"href":"https:\/\/www.sortlist.be\/fr\/blog\/wp-json\/wp\/v2\/posts\/950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sortlist.be\/fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sortlist.be\/fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sortlist.be\/fr\/blog\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sortlist.be\/fr\/blog\/wp-json\/wp\/v2\/comments?post=950"}],"version-history":[{"count":8,"href":"https:\/\/www.sortlist.be\/fr\/blog\/wp-json\/wp\/v2\/posts\/950\/revisions"}],"predecessor-version":[{"id":10693,"href":"https:\/\/www.sortlist.be\/fr\/blog\/wp-json\/wp\/v2\/posts\/950\/revisions\/10693"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sortlist.be\/fr\/blog\/wp-json\/wp\/v2\/media\/8401"}],"wp:attachment":[{"href":"https:\/\/www.sortlist.be\/fr\/blog\/wp-json\/wp\/v2\/media?parent=950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sortlist.be\/fr\/blog\/wp-json\/wp\/v2\/categories?post=950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}