[{"data":1,"prerenderedAt":761},["ShallowReactive",2],{"site-nav":3,"article-maquette-prototype-design-system-etapes-du-webdesign":109,"article-linked-maquette-prototype-design-system-etapes-du-webdesign":589,"cta-service-webdesign-ux-ui-nantes":760},{"services":4,"rubriques":92},[5,13,20,27,34,41,47,55,61,67,74,80,86],{"path":6,"title":7,"navTitle":8,"summary":9,"color":10,"order":11,"category":12},"\u002Fservices\u002Fcreation-site-vitrine-nantes","Création de site vitrine à Nantes","Site vitrine","Un site sur mesure, rapide et accessible, qui présente votre activité et transforme les visites en demandes de contact.","jaune",1,"creation",{"path":14,"title":15,"navTitle":16,"summary":17,"color":18,"order":19,"category":12},"\u002Fservices\u002Fcreation-site-e-commerce-nantes","Création de site e-commerce à Nantes","Site e-commerce","Une boutique en ligne sur Shopify, WooCommerce ou PrestaShop, pensée pour vendre : catalogue, paiement, livraison et SEO.","vert",2,{"path":21,"title":22,"navTitle":23,"summary":24,"color":25,"order":26,"category":12},"\u002Fservices\u002Frefonte-site-internet-nantes","Refonte de site internet à Nantes","Refonte de site","Moderniser votre site sans perdre votre référencement : audit, plan de redirections, nouveau design et migration des contenus.","orange",3,{"path":28,"title":29,"navTitle":30,"summary":31,"color":32,"order":33,"category":12},"\u002Fservices\u002Fwebdesign-ux-ui-nantes","Agence UX\u002FUI design et webdesign à Nantes","Webdesign UX\u002FUI","Recherche utilisateur, parcours, maquettes, prototype testé et design system : des interfaces claires, accessibles et prêtes à développer.","rose",4,{"path":35,"title":36,"navTitle":37,"summary":38,"color":39,"order":40,"category":12},"\u002Fservices\u002Fdeveloppement-web-sur-mesure-nantes","Agence de développement web sur mesure à Nantes","Développement sur mesure","Applications métier, extranets, MVP SaaS, API et intégrations : du code sur mesure, testé, documenté et qui vous appartient.","chartreuse",5,{"path":42,"title":43,"navTitle":44,"summary":45,"color":18,"order":46,"category":12},"\u002Fservices\u002Feco-conception-web-nantes","Éco-conception de site web à Nantes","Éco-conception","Audit RGESN, pages allégées, compatibilité avec les anciens appareils et déclaration d’écoconception : un site plus sobre, mesuré, sans allégation invérifiable.",6,{"path":48,"title":49,"navTitle":50,"summary":51,"color":52,"order":53,"category":54},"\u002Fservices\u002Freferencement-naturel-seo-nantes","Agence SEO à Nantes : référencement naturel","Référencement SEO","Audit, contenus, maillage, référencement local et suivi Search Console : un SEO mesuré, sans promesse de position, pour être trouvé à Nantes et au-delà.","bleu",7,"visibilite",{"path":56,"title":57,"navTitle":58,"summary":59,"color":39,"order":60,"category":54},"\u002Fservices\u002Foptimisation-vitesse-site-web-nantes","Optimisation de la vitesse de site web à Nantes","Vitesse & Core Web Vitals","Mesure des Core Web Vitals, audit, plan d’action chiffré et correctifs sur votre technologie : des pages plus rapides, vérifiées sur les données réelles.",8,{"path":62,"title":63,"navTitle":64,"summary":65,"color":32,"order":66,"category":54},"\u002Fservices\u002Faccessibilite-numerique-nantes","Accessibilité numérique et audit RGAA à Nantes","Accessibilité (RGAA)","Audit RGAA, corrections, déclaration d’accessibilité et formation : rendre votre site utilisable par tous et répondre à vos obligations.",9,{"path":68,"title":69,"navTitle":70,"summary":71,"color":10,"order":72,"category":73},"\u002Fservices\u002Fmaintenance-site-internet-nantes","Maintenance de site internet à Nantes","Maintenance & hébergement","Mises à jour, sécurité, sauvegardes, hébergement en Europe et petites modifications : votre site reste rapide, sûr et à jour.",10,"exploitation",{"path":75,"title":76,"navTitle":77,"summary":78,"color":52,"order":79,"category":73},"\u002Fservices\u002Finfrastructure-cloud-nantes","Infrastructure cloud scalable à Nantes","Infrastructure cloud","Une architecture évolutive hébergée en Europe, décrite en code, qui monte en charge et se relève d’une panne : pour les boutiques et applications à fort trafic.",11,{"path":81,"title":82,"navTitle":83,"summary":84,"color":25,"order":85,"category":73},"\u002Fservices\u002Faudit-securite-site-web-nantes","Audit de sécurité de site web à Nantes","Audit de sécurité","HTTPS, extensions, comptes, sauvegardes et contrôles guidés par l’OWASP : un audit de sécurité priorisé, vérifié après corrections, et la remise en état d’un site piraté.",12,{"path":87,"title":88,"navTitle":89,"summary":90,"color":32,"order":91,"category":73},"\u002Fservices\u002Fautomatisation-processus-nantes","Agence d’automatisation des processus à Nantes","Automatisation & API","Vos outils reliés par des workflows n8n et des API — CRM, facturation, boutique, formulaires —, avec une IA qui propose et une personne qui valide.",13,[93,97,101,105],{"path":94,"title":95,"navTitle":96,"color":52,"order":11},"\u002Fjournal\u002Frubrique\u002Fseo-visibilite-locale","Être trouvé : SEO et visibilité locale","SEO & visibilité locale",{"path":98,"title":99,"navTitle":100,"color":32,"order":19},"\u002Fjournal\u002Frubrique\u002Fux-contenus-accessibilite","Être compris : UX, contenus et accessibilité","UX, contenus & accessibilité",{"path":102,"title":103,"navTitle":104,"color":18,"order":26},"\u002Fjournal\u002Frubrique\u002Fdesign-conversion-ecommerce","Être choisi : design, conversion et e-commerce","Design, conversion & e-commerce",{"path":106,"title":107,"navTitle":108,"color":10,"order":33},"\u002Fjournal\u002Frubrique\u002Fprojet-web-budget-methode","Durer : budget, méthode, performance et sécurité","Projet, sécurité & durée",{"id":110,"title":111,"author":112,"body":113,"cover":560,"coverAlt":560,"date":561,"dateModified":562,"description":563,"extension":564,"faq":565,"featured":575,"head":560,"keyword":576,"meta":577,"navigation":578,"ogImage":560,"path":579,"robots":560,"rubrique":580,"schemaOrg":560,"seo":581,"services":583,"sitemap":585,"stem":586,"summary":587,"__hash__":588},"journal\u002Fjournal\u002Fmaquette-prototype-design-system-etapes-du-webdesign.md","Zoning, wireframe, maquette de site web, prototype : les étapes du webdesign","equipe-fogg",{"type":114,"value":115,"toc":546},"minimark",[116,120,128,133,211,215,218,268,272,288,291,299,314,318,321,324,327,343,357,362,366,369,372,384,389,393,396,417,420,423,428,432,435,438,464,467,471,479,486,490,493,496,510,515,518,535],[117,118,119],"p",{},"Une maquette de site web est l’image fidèle d’une page avant son développement : sa mise en page, ses couleurs, ses typographies, ses images et ses vrais textes, sur ordinateur comme sur mobile. Elle n’est qu’une étape du webdesign d’un site internet, qui en compte cinq : le zoning et les wireframes fixent la structure ; les maquettes donnent l’apparence ; le prototype cliquable fait vivre le parcours ; le design system rassemble les règles ; la passation transmet le tout aux développeurs. Des tests utilisateurs s’intercalent entre ces étapes.",[117,121,122,123,127],{},"Chacune répond à une question précise et se valide séparément. C’est ce découpage qui permet de changer d’avis au moment où cela coûte encore peu. Voici à quoi sert chaque étape, ce que vous validez, et ce que vous évitez en ne la sautant pas. Ce guide s’inscrit dans ",[124,125,126],"a",{"href":98},"notre rubrique sur l’expérience utilisateur et l’accessibilité",".",[129,130,132],"h2",{"id":131},"les-étapes-en-un-coup-dœil","Les étapes en un coup d’œil",[134,135,136,152],"table",{},[137,138,139],"thead",{},[140,141,142,146,149],"tr",{},[143,144,145],"th",{},"Étape",[143,147,148],{},"La question posée",[143,150,151],{},"Ce que vous validez",[153,154,155,167,178,189,200],"tbody",{},[140,156,157,161,164],{},[158,159,160],"td",{},"Zoning et wireframes",[158,162,163],{},"Quoi, où, dans quel ordre ?",[158,165,166],{},"L’arborescence, les gabarits de pages, la hiérarchie des contenus",[140,168,169,172,175],{},[158,170,171],{},"Maquettes",[158,173,174],{},"À quoi cela ressemble-t-il ?",[158,176,177],{},"La direction visuelle, puis chaque gabarit sur ordinateur et sur mobile",[140,179,180,183,186],{},[158,181,182],{},"Prototype cliquable",[158,184,185],{},"Le parcours fonctionne-t-il ?",[158,187,188],{},"Les enchaînements d’écrans, les formulaires, les comportements",[140,190,191,194,197],{},[158,192,193],{},"Design system",[158,195,196],{},"Comment rester cohérent ?",[158,198,199],{},"Les composants et leurs règles d’usage",[140,201,202,205,208],{},[158,203,204],{},"Passation",[158,206,207],{},"Comment construire sans rien perdre ?",[158,209,210],{},"Le périmètre définitif avant le développement",[129,212,214],{"id":213},"wireframe-maquette-prototype-à-quoi-sert-chacun","Wireframe, maquette, prototype : à quoi sert chacun ?",[117,216,217],{},"Ces trois mots désignent trois états d’une même page, du plus schématique au plus réaliste. Chacun sert à trancher un type de question : les garder distincts évite de discuter des couleurs quand le contenu n’est pas encore décidé.",[134,219,220,233],{},[137,221,222],{},[140,223,224,227,230],{},[143,225,226],{},"Livrable",[143,228,229],{},"Ce qu’il montre",[143,231,232],{},"À quoi il sert",[153,234,235,246,257],{},[140,236,237,240,243],{},[158,238,239],{},"Wireframe, ou maquette fonctionnelle",[158,241,242],{},"La structure de la page, en noir et blanc : zones, titres, textes, boutons",[158,244,245],{},"Décider ce qui apparaît, et dans quel ordre",[140,247,248,251,254],{},[158,249,250],{},"Maquette, ou maquette graphique",[158,252,253],{},"La page telle qu’elle sera en ligne : couleurs, typographies, images",[158,255,256],{},"Valider l’apparence, sur ordinateur et sur mobile",[140,258,259,262,265],{},[158,260,261],{},"Prototype",[158,263,264],{},"Les maquettes reliées entre elles, que l’on peut cliquer",[158,266,267],{},"Tester les parcours avant de les développer",[129,269,271],{"id":270},"zoning-et-wireframes-la-structure-avant-le-style","Zoning et wireframes : la structure avant le style",[117,273,274,275,279,280,283,284,127],{},"Le ",[276,277,278],"strong",{},"zoning"," découpe chaque page en grandes zones : en-tête, promesse, services, preuves, appel à l’action, pied de page. Le ",[276,281,282],{},"wireframe"," précise ensuite chaque zone : vrais titres, longueur des textes, boutons, champs de formulaire. Les deux mots sont souvent employés l’un pour l’autre, comme le rappelle ",[124,285,287],{"href":286},"\u002Fglossaire#wireframe","l’entrée wireframe de notre glossaire",[117,289,290],{},"Le tout se dessine en noir et blanc, sans couleur ni image : on discute de ce qui doit apparaître et dans quel ordre, pas encore de goûts.",[117,292,293,294,298],{},"C’est aussi le bon moment pour écrire les contenus clés. Un wireframe rempli de faux texte, le fameux « lorem ipsum », promet une page qui n’existera jamais ; avec les vrais titres, on voit tout de suite ce qui déborde ou ce qui manque. Notre méthode pour ",[124,295,297],{"href":296},"\u002Fjournal\u002Frediger-les-textes-de-son-site-internet","rédiger des textes de site compris en cinq secondes"," commence justement là.",[117,300,301,303,304,308,309,313],{},[276,302,151],{}," : l’arborescence du site, la liste des gabarits (accueil, service, article, contact…) et la hiérarchie des informations sur chacun. Dans ",[124,305,307],{"href":306},"\u002Fmethode","l’itinéraire en cinq escales que suivent nos projets",", ce travail correspond à l’escale « Contenus et parcours », qui dure en général une à trois semaines. L’arborescence elle-même s’esquisse dès le cadrage, à partir des questions de vos clients : ",[124,310,312],{"href":311},"\u002Fjournal\u002Farborescence-site-web-methode-et-exemples","notre méthode pour construire l’arborescence d’un site web"," en détaille les étapes, exemples à l’appui.",[129,315,317],{"id":316},"les-maquettes-lapparence-gabarit-par-gabarit","Les maquettes : l’apparence, gabarit par gabarit",[117,319,320],{},"Les maquettes graphiques, ou maquettes UI (pour « interface utilisateur »), appliquent l’identité visuelle à la structure validée : typographies, couleurs, images, icônes, espacements. Nous les dessinons dans Figma, en version ordinateur et en version mobile. Le mobile n’est pas une réduction du grand écran : pour beaucoup de sites, c’est l’écran le plus utilisé, et il impose ses propres choix.",[117,322,323],{},"Le plus efficace est de procéder en deux temps. D’abord une direction visuelle sur un ou deux gabarits clés, par exemple l’accueil et une page de service. Ensuite, une fois cette direction validée, la déclinaison des autres pages. Cela évite de redessiner dix écrans pour une couleur qui ne convient pas.",[117,325,326],{},"L’accessibilité se joue déjà ici, et c’est pourquoi nous appliquons le RGAA dès la maquette :",[328,329,330,334,337,340],"ul",{},[331,332,333],"li",{},"des contrastes suffisants, soit 4,5:1 au minimum pour un texte courant selon les WCAG ;",[331,335,336],{},"une information jamais portée par la seule couleur ;",[331,338,339],{},"des zones cliquables assez grandes, au moins 24 × 24 pixels CSS selon les WCAG 2.2, sauf exceptions ;",[331,341,342],{},"un focus clavier visible et des libellés de formulaire toujours affichés.",[117,344,345,346,352,353,127],{},"Le W3C en propose une synthèse dans ses ",[124,347,351],{"href":348,"rel":349},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002Ftips\u002Fdesigning\u002Ffr",[350],"nofollow","conseils pour concevoir des sites accessibles",". Corriger un contraste sur une maquette prend une minute ; sur un site en ligne, il faut parfois revoir toute la charte. Pour de nombreux sites marchands, ce n’est d’ailleurs plus une simple bonne pratique, comme l’explique notre article sur ",[124,354,356],{"href":355},"\u002Fjournal\u002Feuropean-accessibility-act-ce-qui-change-pour-votre-site","les obligations de l’European Accessibility Act",[117,358,359,361],{},[276,360,151],{}," : la direction visuelle, puis chaque gabarit, sur ordinateur et sur mobile. Chez nous, la validation des maquettes est un jalon du projet : elle déclenche la deuxième échéance de paiement.",[129,363,365],{"id":364},"le-prototype-cliquable-tester-le-parcours-avant-de-le-coder","Le prototype cliquable : tester le parcours avant de le coder",[117,367,368],{},"Le prototype relie les maquettes entre elles. On clique sur un bouton et l’on arrive sur l’écran suivant ; un menu s’ouvre, un formulaire affiche une erreur, une confirmation apparaît. Il ne contient aucun code de production : il simule le site pour qu’on puisse le parcourir comme s’il existait.",[117,370,371],{},"Son intérêt est de rendre les problèmes visibles avant qu’ils ne coûtent cher. Sur une maquette statique, tout paraît logique ; en cliquant, on découvre qu’il faut quatre écrans pour demander un devis, ou qu’un message d’erreur ne dit pas quoi corriger.",[117,373,374,375,378,379,383],{},"Pour un site vitrine, un prototype léger suffit souvent : navigation principale, une page de service, le formulaire de contact. Pour une ",[124,376,377],{"href":35},"application métier sur mesure",", il devient l’outil central, celui sur lequel les futurs utilisateurs vérifient qu’ils retrouvent leurs gestes du quotidien. C’est typiquement le cas d’une application métier comme celle d’",[124,380,382],{"href":381},"\u002Frealisations\u002Fescadre-logistique","Escadre Logistique, notre étude de cas d’exemple"," : des écrans utilisés au quotidien, où chaque clic superflu finit par compter.",[117,385,386,388],{},[276,387,151],{}," : les parcours, de la page d’entrée jusqu’à la prise de contact ou à l’achat, et le comportement des éléments interactifs.",[129,390,392],{"id":391},"le-design-system-des-règles-plutôt-que-des-pages","Le design system : des règles plutôt que des pages",[117,394,395],{},"Un design system rassemble tout ce qui permet de construire une nouvelle page sans la redessiner :",[328,397,398,405,411],{},[331,399,400,401,404],{},"des ",[276,402,403],{},"jetons"," (design tokens) : couleurs, typographies, espacements, arrondis ;",[331,406,400,407,410],{},[276,408,409],{},"composants"," : boutons, cartes, champs, menus, avec leurs états — survol, focus, erreur, désactivé ;",[331,412,400,413,416],{},[276,414,415],{},"règles d’usage"," : quel bouton pour quelle action, combien d’appels à l’action par écran, comment écrire un message d’erreur.",[117,418,419],{},"Son intérêt est économique autant qu’esthétique. Un composant conçu une fois est développé une fois et testé une fois, accessibilité comprise, puis réutilisé partout. Le jour où vous ajoutez une page ou une offre, elle se monte avec des briques existantes.",[117,421,422],{},"Il se dimensionne selon le projet. Pour un site vitrine, une bibliothèque de composants légère suffit. Pour une boutique en ligne ou une application, le système devient plus complet et se documente, parce que plusieurs personnes le feront vivre.",[117,424,425,427],{},[276,426,151],{}," : la cohérence de l’ensemble et les règles que vos équipes suivront après la mise en ligne.",[129,429,431],{"id":430},"les-tests-utilisateurs-regarder-plutôt-que-demander","Les tests utilisateurs : regarder plutôt que demander",[117,433,434],{},"Un test utilisateur consiste à observer une personne réaliser une tâche — « trouvez le délai de livraison », « demandez un devis » — sur une maquette ou un prototype, sans l’aider. On ne lui demande pas si elle aime les couleurs : on regarde où elle hésite, où elle se trompe, ce qu’elle cherche sans le trouver.",[117,436,437],{},"Plusieurs formats existent, selon l’étape :",[328,439,440,446,452,458],{},[331,441,442,445],{},[276,443,444],{},"le tri de cartes",", avant le zoning, pour organiser le menu selon la logique de vos clients plutôt que selon votre organigramme ;",[331,447,448,451],{},[276,449,450],{},"le test des cinq secondes",", sur une maquette, pour vérifier que la promesse de la page est comprise ;",[331,453,454,457],{},[276,455,456],{},"le test de tâches",", sur le prototype, pour valider les parcours ;",[331,459,460,463],{},[276,461,462],{},"le test d’arborescence",", pour vérifier qu’on trouve une page à partir du seul menu.",[117,465,466],{},"Inutile de viser une grande étude. Quelques sessions avec des personnes proches de vos clients font déjà apparaître les blocages les plus importants. Mieux vaut un test modeste à chaque étape qu’une enquête ambitieuse jamais réalisée.",[129,468,470],{"id":469},"la-passation-aux-développeurs","La passation aux développeurs",[117,472,473,474,478],{},"La passation, ou handoff, transmet aux développeurs tout ce qu’une maquette ne montre pas : comportements au survol et au clic, adaptation entre mobile et grand écran, cas des contenus très longs ou absents, messages d’erreur, ordre de tabulation, textes alternatifs, rares animations prévues. Ces animations sont rares à dessein : nous ne gardons que celles qui aident le visiteur, selon la grille de décision de ",[124,475,477],{"href":476},"\u002Fjournal\u002Fanimations-site-web-utiles-ou-nuisibles","notre article sur les animations utiles ou nuisibles",". Les jetons du design system sont repris tels quels dans le code : les couleurs et les espacements restent identiques d’un écran à l’autre.",[117,480,481,482,127],{},"Chez FOGG, design et développement sont assurés par la même équipe, sans sous-traitance offshore : la passation se fait de vive voix, pas par un dossier envoyé à l’autre bout du monde. Le design reste suivi pendant toute la construction, et chaque semaine, « la démo du vendredi » permet de vérifier avec vous que le site construit correspond bien aux maquettes validées. Cette organisation est détaillée sur ",[124,483,485],{"href":484},"\u002Fstudio","la page consacrée au studio FOGG",[129,487,489],{"id":488},"pourquoi-chaque-étape-fait-faire-des-économies","Pourquoi chaque étape fait faire des économies",[117,491,492],{},"Le principe est simple : plus un changement arrive tard, plus il coûte. Déplacer un bloc sur un wireframe prend quelques minutes. Le même déplacement après validation des maquettes oblige à reprendre plusieurs écrans. Après le développement, il touche aussi les gabarits, les styles, parfois le CMS et les contenus déjà saisis.",[117,494,495],{},"Chaque validation fige donc une décision au moment où elle est la moins chère à prendre :",[328,497,498,501,504,507],{},[331,499,500],{},"le zoning fige la structure avant tout travail graphique ;",[331,502,503],{},"les maquettes figent l’apparence avant la première ligne de code ;",[331,505,506],{},"le prototype vérifie les parcours avant qu’ils soient développés ;",[331,508,509],{},"le design system évite de payer deux fois le même composant.",[511,512,514],"h3",{"id":513},"bien-valider-chaque-étape","Bien valider chaque étape",[117,516,517],{},"Une validation n’est utile que si elle est franche. Quelques habitudes facilitent les choses :",[328,519,520,523,526,529,532],{},[331,521,522],{},"désignez une seule personne qui tranche de votre côté, même si plusieurs donnent leur avis ;",[331,524,525],{},"regroupez vos retours par écrit plutôt que de les envoyer au fil de l’eau ;",[331,527,528],{},"regardez toujours la version mobile, sur votre propre téléphone si possible ;",[331,530,531],{},"jugez avec vos vrais contenus : un titre définitif change parfois toute une page ;",[331,533,534],{},"posez la question du but avant celle du goût : « cette page aide-t-elle le visiteur à agir ? ».",[117,536,537,538,541,542,127],{},"Zoning, maquettes, prototype et design system font partie de chacun de nos projets de site : c’est le cœur de ",[124,539,540],{"href":28},"notre offre de webdesign et de design UX\u002FUI à Nantes",". Sur un petit site, ces étapes sont simplement plus courtes. Durées et budget sont détaillés dans ",[124,543,545],{"href":544},"\u002Ftarifs#webdesign-ux-ui-nantes","les tarifs d’une mission de webdesign",{"title":547,"searchDepth":26,"depth":26,"links":548},"",[549,550,551,552,553,554,555,556,557],{"id":131,"depth":19,"text":132},{"id":213,"depth":19,"text":214},{"id":270,"depth":19,"text":271},{"id":316,"depth":19,"text":317},{"id":364,"depth":19,"text":365},{"id":391,"depth":19,"text":392},{"id":430,"depth":19,"text":431},{"id":469,"depth":19,"text":470},{"id":488,"depth":19,"text":489,"children":558},[559],{"id":513,"depth":26,"text":514},null,"2026-10-15","2026-11-04","Maquette de site web : zoning, wireframe, maquette graphique, prototype cliquable et design system. Les étapes du webdesign et ce que vous validez à chacune.","md",[566,569,572],{"question":567,"answer":568},"Quelle est la différence entre une maquette et un prototype ?","La maquette montre à quoi ressemble une page, de façon statique. Le prototype relie les maquettes entre elles pour simuler la navigation : on clique, un menu s’ouvre, un formulaire réagit. La maquette sert à valider l’apparence, le prototype à valider le parcours.",{"question":570,"answer":571},"Combien de temps dure la phase de webdesign d’un site internet ?","Dans notre méthode, l’étape contenus et parcours, avec le zoning, prend en général une à trois semaines, puis le design, avec les maquettes, le prototype et le design system, deux à trois semaines. Une mission de webdesign seule compte en général trois à six semaines, selon le nombre de gabarits et d’allers-retours.",{"question":573,"answer":574},"Un design system est-il utile pour un petit site vitrine ?","Oui, à sa mesure. Pour un site vitrine, il se limite à une palette, quelques styles de texte et une bibliothèque de composants réutilisables. Ce socle rend le site cohérent et permet d’ajouter des pages plus tard sans tout redessiner.",false,"maquette site web",{},true,"\u002Fjournal\u002Fmaquette-prototype-design-system-etapes-du-webdesign","ux-contenus-accessibilite",{"title":582,"description":563},"Maquette site web : du wireframe au prototype",[584],"webdesign-ux-ui-nantes",{"loc":579,"lastmod":562},"journal\u002Fmaquette-prototype-design-system-etapes-du-webdesign","Entre la première réunion et la mise en ligne, un site passe par plusieurs états : zoning, maquettes, prototype, design system. À quoi sert chaque étape, que validez-vous, et pourquoi c’est là que se font les vraies économies.","7u2pOoL0h9ih1fmT8HMiHThbKLsFo9C1z06ghz_V9Os",{"rubrique":590,"author":592,"articles":602,"surround":753},{"path":98,"title":99,"navTitle":100,"color":32,"promise":591,"service":584},"Des pages claires pour tout le monde, comprises en cinq secondes, sur tous les écrans.",{"id":593,"avatar":560,"bio":594,"extension":595,"kind":596,"linkedin":560,"meta":597,"name":598,"role":599,"stem":600,"__hash__":601},"auteurs\u002Fauteurs\u002Fequipe-fogg.yml","Nous concevons, développons et référençons des sites internet dans notre studio à Nantes : le design, le code et le SEO sont faits par la même équipe. Dans notre journal, nous partageons ce que nos projets nous apprennent, sans jargon ni recette miracle.","yml","Organization",{},"L’équipe FOGG","Designers et développeurs web à Nantes","auteurs\u002Fequipe-fogg","meeZrKeERqL_z9wDxs9-KEBQVU-S_fJG72JEtKhFKbQ",[603,608,613,621,626,633,641,646,653,659,664,669,674,680,686,692,697,703,709,715,717,723,729,735,741,747],{"path":476,"title":604,"summary":605,"date":562,"rubrique":580,"services":606},"Animations sur un site web : utiles ou nuisibles ?","Certaines animations guident vos visiteurs, d’autres ralentissent la page, les distraient ou leur donnent le vertige. Voici nos critères pour faire le tri, les règles d’accessibilité à connaître et la façon d’animer sans alourdir votre site.",[584,607],"optimisation-vitesse-site-web-nantes",{"path":311,"title":609,"summary":610,"date":562,"rubrique":580,"services":611},"Arborescence d’un site web : la méthode, avec des exemples","Avant de dessiner la moindre page, il faut décider lesquelles existent et comment elles s’emboîtent. Voici notre méthode pour construire l’arborescence d’un site, avec trois exemples commentés et deux façons simples de la tester.",[584,612],"creation-site-vitrine-nantes",{"path":614,"title":615,"summary":616,"date":562,"rubrique":617,"services":618},"\u002Fjournal\u002Fbaisse-de-trafic-google-trouver-la-cause","Baisse de trafic sur Google : comment en trouver la cause","Mesure faussée, erreur technique, mise à jour de Google, Aperçus IA ou simple saisonnalité : voici comment trouver la cause d’une baisse de trafic Google, dans l’ordre, et quoi faire ensuite.","seo-visibilite-locale",[619,620],"referencement-naturel-seo-nantes","maintenance-site-internet-nantes",{"path":622,"title":623,"summary":624,"date":562,"rubrique":580,"services":625},"\u002Fjournal\u002Fbandeau-cookies-regles-cnil","Bandeau cookies : les règles de la CNIL à respecter en 2026","Refuser aussi simplement qu’accepter, expliquer les finalités, conserver le choix : voici ce que la CNIL attend d’un bandeau cookies en 2026, ce qui a changé cette année et comment le rendre accessible sans ralentir votre site.",[620,584],{"path":627,"title":628,"summary":629,"date":562,"rubrique":630,"services":631},"\u002Fjournal\u002Fbouton-de-retractation-obligatoire","Bouton de rétractation obligatoire : ce qui change depuis le 19 juin 2026","Depuis le 19 juin 2026, une boutique en ligne doit permettre à ses clients particuliers d’exercer leur droit de rétractation depuis le site, par un bouton « renoncer au contrat ici ». Voici ce que disent les textes, qui est concerné et comment l’intégrer sans alourdir votre parcours.","design-conversion-ecommerce",[632,620],"creation-site-e-commerce-nantes",{"path":634,"title":635,"summary":636,"date":562,"rubrique":637,"services":638},"\u002Fjournal\u002Fci-cd-pipeline-de-deploiement","CI\u002FCD, c’est quoi ? Le pipeline de déploiement expliqué","Intégration continue, livraison ou déploiement continus : ce que recouvre la CI\u002FCD, à quoi ressemble un pipeline pour un site ou une application, ce que votre entreprise y gagne et comment le sécuriser.","projet-web-budget-methode",[639,640],"infrastructure-cloud-nantes","developpement-web-sur-mesure-nantes",{"path":642,"title":643,"summary":644,"date":562,"rubrique":617,"services":645},"\u002Fjournal\u002Fcore-web-vitals-lcp-inp-cls","Core Web Vitals : LCP, INP et CLS expliqués simplement","La page s’affiche-t-elle vite, réagit-elle tout de suite, reste-t-elle stable ? Le LCP, l’INP et le CLS répondent à ces trois questions : voici comment Google les mesure, comment les tester et par où commencer pour les améliorer.",[607,619],{"path":647,"title":648,"summary":649,"date":562,"rubrique":637,"services":650},"\u002Fjournal\u002Feco-conception-web-rgesn","Éco-conception web : ce que demande le RGESN","Le référentiel officiel de l’éco-conception web compte 78 critères, mais aucune loi n’oblige une entreprise à l’appliquer. Voici ce qu’il demande vraiment à un site vitrine ou à une boutique, et comment fixer un budget de poids, mesurer sans se tromper et publier sa déclaration.",[651,652],"eco-conception-web-nantes","refonte-site-internet-nantes",{"path":654,"title":655,"summary":656,"date":562,"rubrique":637,"services":657},"\u002Fjournal\u002Fn8n-make-zapier-quel-outil-d-automatisation","n8n, Make ou Zapier : quel outil pour automatiser vos tâches ?","Zapier pour démarrer sans technicien, Make pour les flux qui se ramifient, n8n pour garder la main sur vos données : ce qui distingue vraiment ces trois outils, de la facturation à la maintenance, prix relevés le 4 novembre 2026.",[658,640],"automatisation-processus-nantes",{"path":660,"title":661,"summary":662,"date":562,"rubrique":617,"services":663},"\u002Fjournal\u002Fpourquoi-mon-site-n-apparait-pas-sur-google","Pourquoi mon site n’apparaît pas sur Google ? Causes et solutions","Site trop récent, réglage qui bloque Google, page explorée mais non retenue, classement trop faible : voici comment trouver la cause avec deux outils gratuits, puis la corriger.",[619,612],{"path":665,"title":666,"summary":667,"date":562,"rubrique":637,"services":668},"\u002Fjournal\u002Fpreparer-son-site-au-black-friday","Préparer son site au Black Friday : tenir le pic de trafic","Estimer le pic, le simuler, mettre en cache, prévoir la montée en charge et organiser le jour J : la méthode pour que votre boutique tienne au moment où elle vend le plus, avec un plan sur trois semaines.",[639,632],{"path":670,"title":671,"summary":672,"date":562,"rubrique":630,"services":673},"\u002Fjournal\u002Fsite-vitrine-ou-site-e-commerce","Site vitrine ou site e-commerce : comment choisir ?","Un site vitrine prépare la vente, une boutique en ligne la conclut. Voici comment choisir selon votre offre, votre budget et votre temps, et quelles solutions existent entre les deux.",[612,632],{"path":675,"title":676,"summary":677,"date":562,"rubrique":637,"services":678},"\u002Fjournal\u002Fsite-wordpress-pirate-que-faire","Site WordPress piraté : que faire dans les premières heures ?","Redirections, pages de spam, alerte de Google : quand un site WordPress est piraté, les premières heures comptent. Voici quoi faire, dans l’ordre, et ce qu’il ne faut surtout pas effacer.",[679,620],"audit-securite-site-web-nantes",{"path":681,"title":682,"summary":683,"date":684,"rubrique":637,"services":685},"\u002Fjournal\u002Fchoisir-son-agence-web-a-nantes","Choisir son agence web à Nantes : 12 questions à poser avant de signer","Portfolio, prix, bon contact : ces critères ne suffisent pas. Douze questions révèlent comment une agence travaille vraiment et ce que vous posséderez à la fin.","2026-10-29",[612],{"path":687,"title":688,"summary":689,"date":690,"rubrique":630,"services":691},"\u002Fjournal\u002Fshopify-woocommerce-prestashop-quelle-solution-choisir","Shopify, WooCommerce ou PrestaShop : quelle solution choisir ?","Trois solutions sérieuses, trois logiques différentes : voici comment comparer coûts, souplesse et propriété des données pour choisir la vôtre sans regret.","2026-10-27",[632],{"path":296,"title":693,"summary":694,"date":695,"rubrique":580,"services":696},"Rédiger le contenu d’un site internet : être compris en cinq secondes","Un visiteur décide en quelques secondes s’il reste sur votre page. Voici la méthode que nous suivons pour écrire des textes de site clairs, utiles et bien référencés, avec un exemple avant\u002Faprès.","2026-10-24",[584,612],{"path":698,"title":699,"summary":700,"date":701,"rubrique":617,"services":702},"\u002Fjournal\u002Freferencement-local-nantes-google-business-profile","Référencement local à Nantes : guide pour apparaître dans Google Maps","Pertinence, distance, notoriété : Google classe les entreprises locales selon trois critères. Voici comment les travailler quand vos clients sont à Nantes.","2026-10-22",[619],{"path":704,"title":705,"summary":706,"date":707,"rubrique":637,"services":708},"\u002Fjournal\u002Fdevis-site-internet-comparer-deux-propositions","Devis de site internet : comment comparer deux propositions","Deux devis pour le même site, deux montants qui vont du simple au double : avant de choisir le moins cher, vérifiez qu’ils décrivent bien le même projet.","2026-10-20",[612,652],{"path":710,"title":711,"summary":712,"date":713,"rubrique":630,"services":714},"\u002Fjournal\u002Fsite-vitrine-elements-indispensables","Site vitrine efficace : les 10 éléments qui transforment une visite en contact","Un site vitrine n’a qu’une mission : donner envie de vous contacter. Voici les dix éléments qui font la différence, et comment vérifier ceux de votre site.","2026-10-17",[612,584],{"path":579,"title":111,"summary":587,"date":561,"rubrique":580,"services":716},[584],{"path":718,"title":719,"summary":720,"date":721,"rubrique":617,"services":722},"\u002Fjournal\u002Fseo-ia-etre-cite-par-les-moteurs-de-reponse","SEO et IA : comment apparaître dans ChatGPT et les Aperçus IA","Aperçus IA, Mode IA, ChatGPT ou Perplexity citent leurs sources. Voici ce qui aide vraiment un site à en faire partie, documentation officielle à l’appui.","2026-10-13",[619],{"path":724,"title":725,"summary":726,"date":727,"rubrique":637,"services":728},"\u002Fjournal\u002Fmaintenance-site-internet-que-prevoir","Maintenance de site internet : que prévoir après la mise en ligne ?","Un site n’est pas terminé le jour de sa mise en ligne. Voici ce qu’il faut prévoir pour qu’il reste sûr, rapide et bien référencé, et comment s’organiser.","2026-10-10",[620],{"path":355,"title":730,"summary":731,"date":732,"rubrique":580,"services":733},"European Accessibility Act : ce que la loi sur l’accessibilité numérique change pour votre site","Depuis le 28 juin 2025, l’accessibilité est obligatoire pour de nombreux services en ligne, à commencer par la vente aux particuliers. Qui est concerné, quelles règles appliquer, quels risques, et par où commencer.","2026-10-08",[734,632],"accessibilite-numerique-nantes",{"path":736,"title":737,"summary":738,"date":739,"rubrique":637,"services":740},"\u002Fjournal\u002Fcahier-des-charges-site-internet-en-une-page","Cahier des charges de site internet : un modèle en une page","Inutile d’écrire quarante pages : un cahier des charges d’une seule page, honnête et précis, suffit à cadrer un site vitrine et à obtenir des devis comparables.","2026-10-06",[612,640],{"path":742,"title":743,"summary":744,"date":745,"rubrique":630,"services":746},"\u002Fjournal\u002Ffiche-produit-e-commerce-qui-vend","Fiche produit e-commerce : l’anatomie d’une page qui vend","Titre, photos, prix, avis, bouton d’achat : chaque bloc d’une fiche produit répond à une question de l’acheteur. Voici comment les assembler pour qu’elle vende.","2026-10-03",[632,584],{"path":748,"title":749,"summary":750,"date":751,"rubrique":617,"services":752},"\u002Fjournal\u002Frefonte-site-sans-perdre-son-referencement","Refonte de site et SEO : comment ne pas perdre son référencement","Une refonte mal préparée peut faire perdre une bonne partie du trafic venu de Google. Inventaire, redirections, préproduction, suivi : la méthode pour l’éviter.","2026-10-01",[652,619],[754,757],{"title":711,"path":710,"stem":755,"description":756,"children":-1},"journal\u002Fsite-vitrine-elements-indispensables","Site vitrine efficace : promesse claire, pages services, preuves, appel à l’action, mobile, vitesse, infos locales, FAQ et RGPD. Les 10 éléments à vérifier.",{"title":719,"path":718,"stem":758,"description":759,"children":-1},"journal\u002Fseo-ia-etre-cite-par-les-moteurs-de-reponse","SEO et IA : ce que Google dit des Aperçus IA et du Mode IA, ce que vaut le GEO, et comment apparaître dans ChatGPT ou Perplexity, sans recette miracle.",{"path":28,"title":29,"summary":31,"color":32},1793879329105]