{"id":853,"date":"2020-11-16T09:00:00","date_gmt":"2020-11-16T08:00:00","guid":{"rendered":"https:\/\/www.letest.studiocarmine.fr\/230\/?p=853"},"modified":"2021-11-16T14:53:17","modified_gmt":"2021-11-16T13:53:17","slug":"creation-maquette-site-web","status":"publish","type":"post","link":"https:\/\/www.letest.studiocarmine.fr\/230\/2020\/11\/16\/creation-maquette-site-web\/","title":{"rendered":"Cr\u00e9er un site web professionnel : La maquette #3"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Dans ce troisi\u00e8me article, nous allons nous pencher sur l'aspect visuel du site web : La <strong>maquette<\/strong>. Si vous n'avez pas lu les premiers articles de cette s\u00e9rie rendez-vous ici :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.letest.studiocarmine.fr\/230\/2020\/10\/21\/site-web-professionnel-objectifs\/\">D\u00e9finir ses objectifs<\/a><\/li><li><a href=\"https:\/\/www.letest.studiocarmine.fr\/230\/2020\/11\/04\/site-web-arborescence\/\">L'arborescence<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Au programme de cet article sur la maquette <\/strong><\/p>\n\n\n<div class=\"ub_table-of-contents\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" id=\"ub_table-of-contents-f9c08758-470d-4a48-897a-d3bd27ce88cc\" data-initiallyhideonmobile=\"false\"\n                    data-initiallyshow=\"true\"><div class=\"ub_table-of-contents-extra-container\"><div class=\"ub_table-of-contents-container ub_table-of-contents-1-column \"><ul><li><a href=https:\/\/www.letest.studiocarmine.fr\/230\/2020\/11\/16\/creation-maquette-site-web\/#0-1%EF%B8%8F%E2%83%A3-la-maquette->1\ufe0f\u20e3  La maquette ?<\/a><\/li><li><a href=https:\/\/www.letest.studiocarmine.fr\/230\/2020\/11\/16\/creation-maquette-site-web\/#1-2%EF%B8%8F%E2%83%A3-comment-faire-une-maquette-de-site-web->2\ufe0f\u20e3 Comment faire une maquette de site web ?<\/a><\/li><li><a href=https:\/\/www.letest.studiocarmine.fr\/230\/2020\/11\/16\/creation-maquette-site-web\/#2-3%EF%B8%8F%E2%83%A3-les-%C3%A9l%C3%A9ments-%C3%A0-ne-pas-n%C3%A9gliger-dans-la-conception-de-la-maquette>3\ufe0f\u20e3 Les \u00e9l\u00e9ments \u00e0 ne pas n\u00e9gliger dans la conception de la maquette<\/a><\/li><li><a href=https:\/\/www.letest.studiocarmine.fr\/230\/2020\/11\/16\/creation-maquette-site-web\/#3-4%EF%B8%8F%E2%83%A3-une-fois-la-maquette-du-site-internet-fini->4\ufe0f\u20e3 Une fois la maquette du site internet fini ?<\/a><\/li><\/ul><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"0-1%EF%B8%8F%E2%83%A3-la-maquette-\">1\ufe0f\u20e3  La maquette ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ce que l'on nomme \"maquette\" en design de site web est le visuel du futur site web. On distingue 2 types de maquettes :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Le wireframe<\/strong> qui est une maquette simple, parfois r\u00e9alis\u00e9 sur papier qui reprend l'organisation des blocs et de leur emplacement. Cela donne une id\u00e9e de la taille du contenu textuel et des images \u00e0 fournir ou produire.<\/li><li><strong>Le webdesign<\/strong> est lui, la maquette graphique compl\u00e8te. Elle prend en compte les images et l'identit\u00e9 visuelle de l'entreprise. Mais \u00e9galement les contenus visuels et textuels. Ce webdesign servira pour l'\u00e9tape suivante : l'int\u00e9gration du site internet.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.letest.studiocarmine.fr\/230\/wp-content\/uploads\/2020\/08\/Capture-d\u2019e\u0301cran-2020-08-24-a\u0300-17.14.40.png\" alt=\"\" class=\"wp-image-854\" width=\"279\" height=\"172\"\/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Wireframe pour \"<a href=\"https:\/\/www.letest.studiocarmine.fr\/230\/portfolio\/coco-bongo\/\">Coco Bongo<\/a>\"<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.letest.studiocarmine.fr\/230\/wp-content\/uploads\/2020\/08\/DESKTOP-1--1024x743.png\" alt=\"\" class=\"wp-image-855\" width=\"230\" height=\"166\"\/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Maquette finale du projet<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-2%EF%B8%8F%E2%83%A3-comment-faire-une-maquette-de-site-web-\">2\ufe0f\u20e3 Comment faire une maquette de site web ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mon premier et meilleur conseil : Faite de la veille sur <strong>Pinterest<\/strong>, chez les concurrents, sur des sites tel que <a href=\"https:\/\/www.awwwards.com\/\" target=\"_blank\" rel=\"noopener\">Awwward<\/a> ou <a href=\"https:\/\/www.cssdesignawards.com\/\" target=\"_blank\" rel=\"noopener\">CSS design Awards<\/a> ! <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Apr\u00e8s la r\u00e9alisation d'un moodboard, <em>ou d'une planche tendance<\/em>, est une bonne id\u00e9e, d'ailleurs je vous offre une mini-formation pour vous apprendre \u00e0 la cr\u00e9er. C'est gratuit et t\u00e9l\u00e9chargeable juste ici \u2b07\ufe0f<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Avec ce travail d'inspiration, une id\u00e9e globale de l'univers graphique du site ressort. Avec l'arborescence, un premier wireframe est facilement \u00e9tabli. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Apr\u00e8s validation, c'est le lancement du grand chantier : La cr\u00e9ation de la maquette finale gr\u00e2ce \u00e0 des logiciels sp\u00e9cialis\u00e9s comme Sketch ou AdobeXd, que les webdesigners ma\u00eetrisent sur le bout des doigts ! <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-3%EF%B8%8F%E2%83%A3-les-%C3%A9l%C3%A9ments-%C3%A0-ne-pas-n%C3%A9gliger-dans-la-conception-de-la-maquette\">3\ufe0f\u20e3 Les \u00e9l\u00e9ments \u00e0 ne pas n\u00e9gliger dans la conception de la maquette<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">C'est parfois excitant de cr\u00e9er une maquette, on a tout de suite envie de passer \u00e0 la cr\u00e9ation du design, mais de nombreux \u00e9l\u00e9ments sont \u00e0 ne pas oublier :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>S'appuyer la charte graphique<\/strong> pour que l'image de marque soit parfaitement coh\u00e9rente sur les supports num\u00e9riques et physiques.<\/li><li>Ne pas oublier <strong>les \u00e9l\u00e9ments l\u00e9gaux <\/strong>: Mentions l\u00e9gales, bandeau RGPD ainsi que les conditions g\u00e9n\u00e9rales de ventes si besoin !<\/li><li><strong>Fixer une taille de contenu<\/strong>. Si vous n'avez pas encore r\u00e9dig\u00e9 vos contenus, essayer d'avoir une id\u00e9e globale du nombre de mots par paragraphe.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Le chiffre \u00e0 retenir : <strong>2 minutes 17 secondes ! <\/strong>C'est le temps moyen qu'un utilisateur passe sur un site web, c'est court pour convaincre. Soign\u00e9 et \u00e9tudier le design permet de retenir la personne plus longtemps ! <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-4%EF%B8%8F%E2%83%A3-une-fois-la-maquette-du-site-internet-fini-\">4\ufe0f\u20e3 Une fois la maquette du site internet fini ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Apr\u00e8s <strong>la validation de la maquette<\/strong> du site web et ses d\u00e9clinaisons en format mobile et tablette, il s'agit de la <strong>phase d'int\u00e9gration<\/strong> web front-end en HTML, CSS, JS... Ses termes techniques parleront forc\u00e9ment \u00e0 un <strong><a href=\"https:\/\/www.letest.studiocarmine.fr\/230\/nos-services-site-web-graphisme\/\">d\u00e9veloppeur front-end<\/a><\/strong> ! Promis, c'est le sujet du prochain article.<\/p>\n\n\n\n<h4 class=\"has-text-align-center wp-block-heading\" id=\"4-tout-compris-sur-la-maquette-regroupe-toutes-tes-id%C3%A9es-pour-ton-futur-site-web-dans-un-workbook-con%C3%A7u-sur-mesure-pour-r%C3%A9ussir-ton-site-web-en-remplissant-le-formulaire-tu-le-recevras-sous-5-minutes-dans-ta-bo%C3%AEte-mail-\">Tout compris sur la maquette ? Regroupe toutes tes id\u00e9es pour ton futur site web dans un workbook con\u00e7u sur-mesure pour r\u00e9ussir ton site web. En remplissant le formulaire, tu le recevras sous 5 minutes dans ta bo\u00eete mail !<\/h4>\n\n\n\n<div class=\"ml-form-embed\" data-account=\"2608058:s1z4b7k2g8\" data-form=\"4432675:h7t9w1\">\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans ce troisi\u00e8me article, nous allons nous pencher sur l'aspect visuel du site web : La maquette. Si vous n'avez pas lu les premiers articles de cette s\u00e9rie rendez-vous ici : D\u00e9finir ses objectifs L'arborescence Au programme de cet article sur la maquette 1\ufe0f\u20e3 La maquette ? Ce que l'on nomme \"maquette\" en design de [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1851,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"ub_ctt_via":"","footnotes":""},"categories":[30],"tags":[],"class_list":["post-853","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creer-un-site-web"],"acf":[],"featured_image_src":"https:\/\/www.letest.studiocarmine.fr\/230\/wp-content\/uploads\/2021\/07\/maquette.jpeg","author_info":{"display_name":"Carmine","author_link":"https:\/\/www.letest.studiocarmine.fr\/230\/author\/carmine\/"},"_links":{"self":[{"href":"https:\/\/www.letest.studiocarmine.fr\/230\/wp-json\/wp\/v2\/posts\/853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.letest.studiocarmine.fr\/230\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.letest.studiocarmine.fr\/230\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.letest.studiocarmine.fr\/230\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.letest.studiocarmine.fr\/230\/wp-json\/wp\/v2\/comments?post=853"}],"version-history":[{"count":0,"href":"https:\/\/www.letest.studiocarmine.fr\/230\/wp-json\/wp\/v2\/posts\/853\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.letest.studiocarmine.fr\/230\/wp-json\/wp\/v2\/media\/1851"}],"wp:attachment":[{"href":"https:\/\/www.letest.studiocarmine.fr\/230\/wp-json\/wp\/v2\/media?parent=853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.letest.studiocarmine.fr\/230\/wp-json\/wp\/v2\/categories?post=853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.letest.studiocarmine.fr\/230\/wp-json\/wp\/v2\/tags?post=853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}