{"id":3524,"date":"2026-08-31T21:57:28","date_gmt":"2026-08-31T21:57:28","guid":{"rendered":"https:\/\/afannoudigitalconsulting.com\/?p=3524"},"modified":"2026-08-31T21:59:46","modified_gmt":"2026-08-31T21:59:46","slug":"comment-creer-une-maquette-ui-de-site-web-avec-lia","status":"publish","type":"post","link":"https:\/\/afannoudigitalconsulting.com\/en\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/","title":{"rendered":"Comment cr\u00e9er une maquette UI de site web avec l\u2019IA ?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3524\" class=\"elementor elementor-3524\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-11edc18 e-flex e-con-boxed e-con e-parent\" data-id=\"11edc18\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f95860b elementor-widget elementor-widget-html\" data-id=\"f95860b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<article class=\"article-content\">\n\n    <header class=\"article-header\">\n\n        <p class=\"article-category\">\n            Intelligence artificielle &amp; cr\u00e9ation web\n        <\/p>\n\n        <h1>\n            Comment cr\u00e9er une maquette UI de site web avec l\u2019IA \u00e0 partir d\u2019un wireframe ?\n        <\/h1>\n\n        <p class=\"article-intro\">\n            Apr\u00e8s avoir d\u00e9fini le projet, construit son arborescence,\n            organis\u00e9 le contenu de chaque page et \u00e9tabli une direction artistique,\n            nous arrivons enfin \u00e0 l\u2019une des \u00e9tapes les plus visuelles de la conception :\n            <strong>la cr\u00e9ation de la maquette UI<\/strong>.\n        <\/p>\n\n        <p>\n            Jusqu\u2019ici, nous avons volontairement \u00e9vit\u00e9 de demander \u00e0\n            l\u2019intelligence artificielle de \u00ab cr\u00e9er le site \u00bb.\n            Nous avons d\u2019abord construit un cadre pr\u00e9cis :\n            cahier des charges, arborescence, wireframe et direction artistique.\n        <\/p>\n\n        <p>\n            Dans ce cinqui\u00e8me article consacr\u00e9 \u00e0 la\n            <strong>cr\u00e9ation d\u2019un site web avec l\u2019IA<\/strong>,\n            nous allons voir comment r\u00e9unir toutes ces \u00e9tapes pour\n            transformer un wireframe en v\u00e9ritable maquette UI exploitable.\n        <\/p>\n\n    <\/header>\n\n\n    <nav class=\"article-summary\" aria-label=\"Sommaire de l'article\">\n\n        <h2>Sommaire<\/h2>\n\n        <ol>\n            <li><a href=\"#definition-maquette-ui\">Qu\u2019est-ce qu\u2019une maquette UI ?<\/a><\/li>\n            <li><a href=\"#pourquoi-ne-pas-commencer-maquette\">Pourquoi ne pas commencer directement par la maquette ?<\/a><\/li>\n            <li><a href=\"#elements-necessaires\">R\u00e9unir les \u00e9l\u00e9ments n\u00e9cessaires<\/a><\/li>\n            <li><a href=\"#vrais-contenus\">Utiliser de vrais contenus<\/a><\/li>\n            <li><a href=\"#respect-wireframe\">Faire respecter le wireframe \u00e0 l\u2019IA<\/a><\/li>\n            <li><a href=\"#desktop\">Commencer par la version desktop<\/a><\/li>\n            <li><a href=\"#hierarchie-visuelle\">Cr\u00e9er une hi\u00e9rarchie visuelle<\/a><\/li>\n            <li><a href=\"#coherence-sections\">Concevoir les sections comme un ensemble<\/a><\/li>\n            <li><a href=\"#composants\">Travailler les composants UI<\/a><\/li>\n            <li><a href=\"#variations\">Explorer plusieurs compositions<\/a><\/li>\n            <li><a href=\"#prompt-maquette\">Prompt pour g\u00e9n\u00e9rer une maquette UI avec l\u2019IA<\/a><\/li>\n            <li><a href=\"#evaluation\">\u00c9valuer une maquette g\u00e9n\u00e9r\u00e9e par IA<\/a><\/li>\n            <li><a href=\"#defauts\">Rep\u00e9rer les d\u00e9fauts typiques<\/a><\/li>\n            <li><a href=\"#contenus\">Tester les vrais contenus<\/a><\/li>\n            <li><a href=\"#cas-extremes\">Tester les cas extr\u00eames<\/a><\/li>\n            <li><a href=\"#mobile\">Cr\u00e9er la version mobile<\/a><\/li>\n            <li><a href=\"#responsive\">Donner des r\u00e8gles responsive \u00e0 l\u2019IA<\/a><\/li>\n            <li><a href=\"#accessibilite\">V\u00e9rifier l\u2019accessibilit\u00e9<\/a><\/li>\n            <li><a href=\"#systeme-reutilisable\">Transformer la maquette en syst\u00e8me r\u00e9utilisable<\/a><\/li>\n            <li><a href=\"#checklist\">Checklist de validation<\/a><\/li>\n        <\/ol>\n\n    <\/nav>\n\n\n    <section id=\"definition-maquette-ui\">\n\n        <h2>Qu\u2019est-ce qu\u2019une maquette UI de site web ?<\/h2>\n\n        <p>\n            Une maquette UI, pour <strong>User Interface<\/strong>,\n            est une repr\u00e9sentation visuelle d\u00e9taill\u00e9e d\u2019une interface\n            avant son d\u00e9veloppement.\n        <\/p>\n\n        <p>\n            Contrairement au wireframe, elle int\u00e8gre r\u00e9ellement\n            la direction artistique du projet.\n        <\/p>\n\n        <p>Elle permet notamment de visualiser :<\/p>\n\n        <ul>\n            <li>les couleurs ;<\/li>\n            <li>les typographies ;<\/li>\n            <li>les photographies ;<\/li>\n            <li>les boutons ;<\/li>\n            <li>les cartes ;<\/li>\n            <li>les formulaires ;<\/li>\n            <li>les ic\u00f4nes ;<\/li>\n            <li>les espacements ;<\/li>\n            <li>la navigation ;<\/li>\n            <li>la hi\u00e9rarchie visuelle ;<\/li>\n            <li>la coh\u00e9rence entre les diff\u00e9rentes sections.<\/li>\n        <\/ul>\n\n        <p>\n            Nous passons donc d\u2019une structure tr\u00e8s simple :\n        <\/p>\n\n        <pre><code>HERO\n\nH1\nIntroduction\nCTA\nImage\n\nSERVICES\n\nR\u00c9ALISATIONS\n\nT\u00c9MOIGNAGES\n\nFAQ<\/code><\/pre>\n\n        <p>\n            \u00e0 une v\u00e9ritable interface graphique.\n        <\/p>\n\n        <blockquote>\n            <p>\n                <strong>Le wireframe d\u00e9finit o\u00f9 placer les \u00e9l\u00e9ments.<\/strong><br>\n                <strong>La direction artistique d\u00e9finit leur langage visuel.<\/strong><br>\n                <strong>La maquette UI r\u00e9unit les deux.<\/strong>\n            <\/p>\n        <\/blockquote>\n\n    <\/section>\n\n\n    <section id=\"pourquoi-ne-pas-commencer-maquette\">\n\n        <h2>Pourquoi ne pas commencer directement par la maquette ?<\/h2>\n\n        <p>\n            C\u2019est pourtant la m\u00e9thode la plus fr\u00e9quente lorsqu\u2019on utilise\n            un g\u00e9n\u00e9rateur de site avec l\u2019intelligence artificielle.\n        <\/p>\n\n        <blockquote>\n            <p>\n                Cr\u00e9e-moi un site moderne et premium\n                pour une entreprise de r\u00e9novation \u00e0 Toulouse.\n            <\/p>\n        <\/blockquote>\n\n        <p>\n            Quelques secondes plus tard, une interface peut appara\u00eetre.\n            Le r\u00e9sultat peut sembler impressionnant, mais l\u2019IA a alors d\u00fb\n            prendre presque toutes les d\u00e9cisions \u00e0 notre place.\n        <\/p>\n\n        <pre><code>Architecture\n+\nSections\n+\nHi\u00e9rarchie\n+\nCouleurs\n+\nTypographies\n+\nImages\n+\nComposants\n+\nCTA\n+\nAnimations\n+\nResponsive<\/code><\/pre>\n\n        <p>\n            Elle ne se contente donc pas de produire une maquette :\n            elle invente \u00e9galement une grande partie du projet.\n        <\/p>\n\n        <p>\n            Dans notre m\u00e9thodologie, l\u2019objectif est diff\u00e9rent.\n            \u00c0 cette \u00e9tape, <strong>l\u2019IA ne doit plus d\u00e9cider de l\u2019architecture<\/strong>.\n            Elle doit traduire visuellement des d\u00e9cisions d\u00e9j\u00e0 valid\u00e9es.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"elements-necessaires\">\n\n        <h2>1. R\u00e9unir les \u00e9l\u00e9ments n\u00e9cessaires \u00e0 la cr\u00e9ation de la maquette<\/h2>\n\n        <p>\n            Avant de g\u00e9n\u00e9rer une premi\u00e8re proposition graphique,\n            r\u00e9unissons les \u00e9l\u00e9ments cr\u00e9\u00e9s lors des \u00e9tapes pr\u00e9c\u00e9dentes.\n        <\/p>\n\n        <h3>Le wireframe<\/h3>\n\n        <pre><code>HEADER\n\nHERO\n\u251c\u2500\u2500 H1\n\u251c\u2500\u2500 Introduction\n\u251c\u2500\u2500 CTA principal\n\u251c\u2500\u2500 CTA secondaire\n\u2514\u2500\u2500 Image\n\nPR\u00c9SENTATION\n\nPRESTATIONS\n\nM\u00c9THODE\n\nR\u00c9ALISATIONS\n\nCHIFFRES CL\u00c9S\n\nT\u00c9MOIGNAGES\n\nFAQ\n\nCTA FINAL\n\nFOOTER<\/code><\/pre>\n\n        <h3>La direction artistique<\/h3>\n\n        <pre><code>POSITIONNEMENT\n\nHaut de gamme accessible\n\n\nCOULEURS\n\nIvoire chaud\nBrun profond\nBeige min\u00e9ral\nTerracotta\nAnthracite\n\n\nTYPOGRAPHIES\n\nSerif contemporaine \u2192 titres\nSans-serif \u2192 textes\n\n\nPHOTOGRAPHIES\n\nNaturelles\nArchitecturales\nLumi\u00e8re naturelle\nTons l\u00e9g\u00e8rement chauds\n\n\nINTERFACE\n\nSobre\n\u00c9ditoriale\nPeu d'ombres\nCoins l\u00e9g\u00e8rement arrondis\nPas de glassmorphism\n\n\nANIMATIONS\n\nSubtiles\n300 \u00e0 600 ms<\/code><\/pre>\n\n        <p>\n            Nous avons \u00e9galement le contenu de notre page.\n        <\/p>\n\n        <pre><code>WIREFRAME\nStructure\n\n        +\n\nDIRECTION ARTISTIQUE\nIdentit\u00e9\n\n        +\n\nCONTENU\nInformations\n\n        \u2193\n\nMAQUETTE UI<\/code><\/pre>\n\n    <\/section>\n\n\n    <section id=\"vrais-contenus\">\n\n        <h2>2. Utiliser de vrais contenus d\u00e8s que possible<\/h2>\n\n        <p>\n            Le contenu influence directement la conception visuelle.\n        <\/p>\n\n        <p>\n            Un titre de trois mots et un titre de quinze mots\n            n\u2019occupent pas le m\u00eame espace.\n        <\/p>\n\n        <p>\n            Une description de deux lignes et une description de huit lignes\n            ne produisent pas la m\u00eame carte.\n        <\/p>\n\n        <p>\n            Il est donc pr\u00e9f\u00e9rable d\u2019\u00e9viter le Lorem Ipsum lorsque\n            les contenus r\u00e9els sont d\u00e9j\u00e0 disponibles.\n        <\/p>\n\n        <h3>Exemple de contenu fictif<\/h3>\n\n        <pre><code>Titre principal\n\nLorem ipsum dolor sit amet,\nconsectetur adipiscing elit.\n\n[BOUTON]<\/code><\/pre>\n\n        <h3>Exemple avec un contenu r\u00e9aliste<\/h3>\n\n        <pre><code>R\u00e9novation int\u00e9rieure \u00e0 Toulouse\n\nTransformons votre int\u00e9rieur\nen un espace qui vous ressemble.\n\nDe la conception aux finitions,\nnous accompagnons votre projet\nde r\u00e9novation \u00e0 Toulouse\net dans ses environs.\n\n[Demander un devis]\n\n[D\u00e9couvrir nos r\u00e9alisations]<\/code><\/pre>\n\n        <p>\n            La maquette peut alors \u00eatre r\u00e9ellement test\u00e9e\n            avec le type de contenu qu\u2019elle devra accueillir.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"respect-wireframe\">\n\n        <h2>3. Ne pas laisser l\u2019IA modifier le wireframe<\/h2>\n\n        <p>\n            \u00c0 cette \u00e9tape, la structure UX a d\u00e9j\u00e0 \u00e9t\u00e9 valid\u00e9e.\n        <\/p>\n\n        <p>\n            Il est donc utile de pr\u00e9ciser clairement\n            les limites de la g\u00e9n\u00e9ration.\n        <\/p>\n\n        <pre><code>Respecte strictement le wireframe fourni.\n\nNe cr\u00e9e aucune nouvelle section.\n\nNe supprime aucune section.\n\nTu peux travailler la composition interne\ndes sections mais tu ne dois pas\nmodifier l'architecture de la page.<\/code><\/pre>\n\n        <p>\n            Sans cette instruction, l\u2019IA peut facilement ajouter\n            des sections simplement parce qu\u2019elles sont fr\u00e9quentes\n            sur des sites similaires.\n        <\/p>\n\n        <pre><code>Partenaires\n\nNewsletter\n\nStatistiques\n\n\u00c9quipe\n\nBlog\n\nCertifications<\/code><\/pre>\n\n        <p>\n            L\u2019objectif est maintenant de\n            <strong>contr\u00f4ler la conception plut\u00f4t que de la subir<\/strong>.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"desktop\">\n\n        <h2>4. Commencer par la maquette desktop<\/h2>\n\n        <p>\n            Pour la premi\u00e8re exploration visuelle,\n            nous pouvons commencer par la version desktop.\n        <\/p>\n\n        <p>\n            Notre Hero contient :\n        <\/p>\n\n        <pre><code>H1\nIntroduction\nCTA principal\nCTA secondaire\nImage<\/code><\/pre>\n\n        <p>\n            Et notre direction artistique pr\u00e9cise :\n        <\/p>\n\n        <pre><code>\u00c9ditorial\nSobre\nArchitecture\nGrande photographie\nIvoire\nBrun\nTerracotta<\/code><\/pre>\n\n        <p>\n            Nous pouvons alors imaginer une composition telle que :\n        <\/p>\n\n        <pre><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 LOGO        NAVIGATION            DEVIS    \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502                      \u2502                     \u2502\n\u2502 R\u00c9NOVATION           \u2502                     \u2502\n\u2502 INT\u00c9RIEURE            \u2502    PHOTOGRAPHIE     \u2502\n\u2502 \u00c0 TOULOUSE            \u2502                     \u2502\n\u2502                      \u2502                     \u2502\n\u2502 Introduction         \u2502                     \u2502\n\u2502                      \u2502                     \u2502\n\u2502 [DEVIS] R\u00e9alisations \u2502                     \u2502\n\u2502                      \u2502                     \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/code><\/pre>\n\n    <\/section>\n\n\n    <section id=\"hierarchie-visuelle\">\n\n        <h2>5. Cr\u00e9er une v\u00e9ritable hi\u00e9rarchie visuelle<\/h2>\n\n        <p>\n            Une bonne maquette ne consiste pas simplement \u00e0 appliquer\n            des couleurs \u00e0 un wireframe.\n        <\/p>\n\n        <p>\n            Elle doit guider le regard de l\u2019utilisateur.\n        <\/p>\n\n        <pre><code>01\nH1\n\u00c9l\u00e9ment dominant\n\n02\nPhotographie\n\u00c9l\u00e9ment visuel fort\n\n03\nIntroduction\nInformation secondaire\n\n04\nCTA principal\nAction\n\n05\nCTA secondaire\nAlternative<\/code><\/pre>\n\n        <p>\n            Plusieurs \u00e9l\u00e9ments permettent de cr\u00e9er cette hi\u00e9rarchie :\n        <\/p>\n\n        <ul>\n            <li>la taille ;<\/li>\n            <li>le contraste ;<\/li>\n            <li>la graisse typographique ;<\/li>\n            <li>la position ;<\/li>\n            <li>les espacements ;<\/li>\n            <li>la couleur ;<\/li>\n            <li>les proportions.<\/li>\n        <\/ul>\n\n        <p>\n            L\u2019utilisateur ne doit pas avoir \u00e0 chercher\n            ce qui est important.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"coherence-sections\">\n\n        <h2>6. Concevoir les sections comme un ensemble coh\u00e9rent<\/h2>\n\n        <p>\n            Une erreur fr\u00e9quente consiste \u00e0 concevoir\n            chaque section ind\u00e9pendamment.\n        <\/p>\n\n        <pre><code>Hero tr\u00e8s \u00e9ditorial\n\n\u2193\n\nServices sous forme de cartes SaaS\n\n\u2193\n\nR\u00e9alisations fa\u00e7on portfolio\n\n\u2193\n\nAvis fa\u00e7on marketplace\n\n\u2193\n\nFAQ avec un style diff\u00e9rent<\/code><\/pre>\n\n        <p>\n            Chaque section peut fonctionner individuellement,\n            mais l\u2019ensemble manque alors de coh\u00e9rence.\n        <\/p>\n\n        <p>\n            Le design system permet de r\u00e9p\u00e9ter certaines r\u00e8gles :\n        <\/p>\n\n        <pre><code>LABEL\nPetite capitale terracotta\n\nH2\nSerif\n\nTEXTE\nSans-serif\n\nLIEN\nFl\u00e8che simple\n\nESPACEMENT\n96 px\n\nBORDURE\n1 px beige\n\nRADIUS\n8 px<\/code><\/pre>\n\n        <p>\n            Ce sont ces r\u00e9p\u00e9titions ma\u00eetris\u00e9es qui permettent\n            de construire progressivement une identit\u00e9 graphique.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"composants\">\n\n        <h2>7. Travailler les composants UI avant de multiplier les pages<\/h2>\n\n        <p>\n            Avant de g\u00e9n\u00e9rer toutes les pages du site,\n            il est pr\u00e9f\u00e9rable de valider les principaux composants.\n        <\/p>\n\n        <ul>\n            <li>header ;<\/li>\n            <li>bouton principal ;<\/li>\n            <li>bouton secondaire ;<\/li>\n            <li>carte service ;<\/li>\n            <li>carte r\u00e9alisation ;<\/li>\n            <li>t\u00e9moignage ;<\/li>\n            <li>accord\u00e9on FAQ ;<\/li>\n            <li>champ de formulaire ;<\/li>\n            <li>footer.<\/li>\n        <\/ul>\n\n        <h3>Pr\u00e9voir les \u00e9tats des boutons<\/h3>\n\n        <pre><code>DEFAULT\n\nHOVER\n\nFOCUS\n\nACTIVE\n\nDISABLED<\/code><\/pre>\n\n        <h3>Pr\u00e9voir les \u00e9tats des formulaires<\/h3>\n\n        <pre><code>VIDE\n\nFOCUS\n\nREMPLI\n\nERREUR\n\nVALID\u00c9\n\nD\u00c9SACTIV\u00c9<\/code><\/pre>\n\n        <p>\n            Une maquette r\u00e9ellement exploitable doit anticiper\n            ces diff\u00e9rents comportements.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"variations\">\n\n        <h2>8. Utiliser l\u2019IA pour explorer plusieurs compositions<\/h2>\n\n        <p>\n            M\u00eame avec un wireframe pr\u00e9cis,\n            plusieurs choix de composition restent possibles.\n        <\/p>\n\n        <h3>Version A : grille classique<\/h3>\n\n        <pre><code>PROJET 1    PROJET 2\n\nPROJET 3    PROJET 4<\/code><\/pre>\n\n        <h3>Version B : composition \u00e9ditoriale<\/h3>\n\n        <pre><code>GRANDE IMAGE\n\n        PETITE IMAGE\n\nPETITE IMAGE\n\n        GRANDE IMAGE<\/code><\/pre>\n\n        <h3>Version C : pr\u00e9sentation horizontale<\/h3>\n\n        <pre><code>\u2190  PROJET 1  PROJET 2  PROJET 3  \u2192<\/code><\/pre>\n\n        <p>\n            L\u2019intelligence artificielle devient particuli\u00e8rement utile\n            pour explorer rapidement ces alternatives\n            sans remettre en question l\u2019architecture g\u00e9n\u00e9rale.\n        <\/p>\n\n        <h3>Demander des variations cibl\u00e9es<\/h3>\n\n        <pre><code>Conserve exactement :\n\n- le contenu ;\n- la palette ;\n- les typographies ;\n- les composants ;\n- le wireframe.\n\nPropose trois compositions diff\u00e9rentes\nuniquement pour la section R\u00e9alisations.\n\nVERSION A\nTr\u00e8s \u00e9ditoriale.\n\nVERSION B\nMinimaliste.\n\nVERSION C\nPlus immersive avec davantage\nde place accord\u00e9e aux photographies.\n\nNe modifie aucune autre section.<\/code><\/pre>\n\n    <\/section>\n\n\n    <section id=\"prompt-maquette\">\n\n        <h2>9. Quel prompt utiliser pour g\u00e9n\u00e9rer une maquette UI avec l\u2019IA ?<\/h2>\n\n        <p>\n            Voici une structure de prompt compl\u00e8te\n            pour transformer un wireframe valid\u00e9\n            en maquette UI haute fid\u00e9lit\u00e9.\n        <\/p>\n\n        <pre><code>Tu es UI Designer senior sp\u00e9cialis\u00e9\ndans la conception d'interfaces web.\n\nJe souhaite transformer un wireframe valid\u00e9\nen maquette UI haute fid\u00e9lit\u00e9.\n\nIMPORTANT\n\nL'architecture UX a d\u00e9j\u00e0 \u00e9t\u00e9 valid\u00e9e.\n\nTu ne dois :\n\n- ajouter aucune section ;\n- supprimer aucune section ;\n- modifier aucun objectif fonctionnel ;\n- inventer aucune fonctionnalit\u00e9.\n\nTu dois traduire visuellement\nle syst\u00e8me fourni.\n\n\nCONTEXTE\n\nEntreprise de r\u00e9novation int\u00e9rieure\nbas\u00e9e \u00e0 Toulouse.\n\nPOSITIONNEMENT\n\nHaut de gamme accessible.\n\nPERSONNALIT\u00c9\n\n\u00c9l\u00e9gante\nSobre\nChaleureuse\nContemporaine\nHumaine\n\n\nWIREFRAME\n\nHEADER\n\nHERO\n- H1\n- introduction\n- CTA principal\n- CTA secondaire\n- photographie\n\nPR\u00c9SENTATION\n\nPRESTATIONS\n\nM\u00c9THODE\n\nR\u00c9ALISATIONS\n\nCHIFFRES CL\u00c9S\n\nT\u00c9MOIGNAGES\n\nFAQ\n\nCTA FINAL\n\nFOOTER\n\n\nDIRECTION ARTISTIQUE\n\nPalette :\n\n#302B27\nBrun profond\n\n#F4F0E8\nIvoire chaud\n\n#DDD3C4\nBeige min\u00e9ral\n\n#A86245\nTerracotta\n\n#222222\nAnthracite\n\n\nTYPOGRAPHIE\n\nTitres :\nSerif contemporaine et \u00e9ditoriale.\n\nTextes :\nSans-serif sobre et tr\u00e8s lisible.\n\n\nSTYLE PHOTOGRAPHIQUE\n\nPhotographies r\u00e9alistes.\n\nArchitecture int\u00e9rieure.\n\nLumi\u00e8re naturelle.\n\nTons l\u00e9g\u00e8rement chauds.\n\nTextures naturelles.\n\n\u00c9viter les images trop parfaites\nou visiblement artificielles.\n\n\nCOMPOSANTS\n\nBoutons l\u00e9g\u00e8rement arrondis.\n\nPas de boutons pill syst\u00e9matiques.\n\nPeu d'ombres.\n\nPas de glassmorphism.\n\nBordures fines.\n\nEspacements g\u00e9n\u00e9reux.\n\nInterface \u00e9ditoriale.\n\n\nGRILLE\n\nDesktop :\n12 colonnes.\n\nLargeur maximale :\n1280 px.\n\nGoutti\u00e8res :\n24 px.\n\n\nOBJECTIF\n\nCr\u00e9er une maquette desktop haute fid\u00e9lit\u00e9\ncoh\u00e9rente avec cette direction artistique.\n\nLa page doit transmettre :\n\n- confiance ;\n- savoir-faire ;\n- qualit\u00e9 ;\n- proximit\u00e9 ;\n- \u00e9l\u00e9gance.\n\n\nCONTRAINTES\n\n\u00c9vite les codes visuels typiques\ndes interfaces g\u00e9n\u00e9r\u00e9es automatiquement :\n\n- d\u00e9grad\u00e9s technologiques ;\n- cartes flottantes inutiles ;\n- effets lumineux ;\n- glassmorphism ;\n- accumulation d'ic\u00f4nes ;\n- textes d\u00e9mesur\u00e9s sans justification ;\n- animations d\u00e9coratives ;\n- composants SaaS ;\n- mise en page g\u00e9n\u00e9rique.\n\n\nMISSION\n\nTransforme le wireframe fourni\nen interface graphique.\n\nRespecte strictement :\n\n- la structure ;\n- le contenu ;\n- la direction artistique ;\n- la hi\u00e9rarchie ;\n- le design system.\n\nTravaille particuli\u00e8rement :\n\n- la hi\u00e9rarchie visuelle ;\n- les proportions ;\n- les espacements ;\n- les photographies ;\n- la coh\u00e9rence entre les sections.\n\nNe d\u00e9veloppe pas encore le site.\n\nNe g\u00e9n\u00e8re pas de code.\n\nL'objectif est uniquement\nde produire la maquette UI.<\/code><\/pre>\n\n    <\/section>\n\n\n    <section id=\"evaluation\">\n\n        <h2>10. Comment \u00e9valuer une maquette g\u00e9n\u00e9r\u00e9e par IA ?<\/h2>\n\n        <p>\n            Une maquette impressionnante visuellement\n            n\u2019est pas n\u00e9cessairement une bonne maquette.\n        <\/p>\n\n        <h3>Hi\u00e9rarchie<\/h3>\n\n        <ul>\n            <li>Le H1 est-il imm\u00e9diatement identifiable ?<\/li>\n            <li>Le CTA principal ressort-il suffisamment ?<\/li>\n            <li>Les titres de section sont-ils diff\u00e9renci\u00e9s ?<\/li>\n        <\/ul>\n\n        <h3>Lisibilit\u00e9<\/h3>\n\n        <ul>\n            <li>Les textes sont-ils suffisamment grands ?<\/li>\n            <li>Les paragraphes sont-ils correctement dimensionn\u00e9s ?<\/li>\n            <li>Les contrastes sont-ils suffisants ?<\/li>\n        <\/ul>\n\n        <h3>Coh\u00e9rence<\/h3>\n\n        <ul>\n            <li>Les m\u00eames composants sont-ils utilis\u00e9s de mani\u00e8re constante ?<\/li>\n            <li>Les espacements suivent-ils une logique commune ?<\/li>\n            <li>Les bordures et arrondis sont-ils coh\u00e9rents ?<\/li>\n        <\/ul>\n\n        <h3>Exp\u00e9rience utilisateur<\/h3>\n\n        <p>\n            Le parcours d\u00e9fini dans le wireframe\n            doit rester visible dans la maquette.\n        <\/p>\n\n        <h3>Identit\u00e9<\/h3>\n\n        <p>\n            Le site doit conserver une personnalit\u00e9 visuelle\n            suffisamment forte pour ne pas sembler interchangeable.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"defauts\">\n\n        <h2>11. Les d\u00e9fauts typiques des maquettes g\u00e9n\u00e9r\u00e9es par IA<\/h2>\n\n        <h3>Des titres disproportionn\u00e9s<\/h3>\n\n        <p>\n            Les g\u00e9n\u00e9rateurs IA utilisent fr\u00e9quemment\n            de tr\u00e8s grands titres dans les Hero.\n            Cette approche peut fonctionner, mais elle ne doit pas\n            devenir une r\u00e8gle syst\u00e9matique.\n        <\/p>\n\n        <h3>Trop de cartes<\/h3>\n\n        <pre><code>Service \u2192 carte\n\nAvis \u2192 carte\n\nChiffre \u2192 carte\n\nFAQ \u2192 carte\n\nCTA \u2192 carte\n\nTexte \u2192 carte<\/code><\/pre>\n\n        <p>\n            L\u2019espace blanc et la typographie peuvent parfois\n            suffire pour organiser le contenu.\n        <\/p>\n\n        <h3>Trop d\u2019arrondis<\/h3>\n\n        <p>\n            Des border-radius importants partout peuvent produire\n            une esth\u00e9tique tr\u00e8s g\u00e9n\u00e9rique.\n        <\/p>\n\n        <h3>Trop de d\u00e9grad\u00e9s<\/h3>\n\n        <p>\n            Un d\u00e9grad\u00e9 doit \u00eatre un choix de direction artistique,\n            pas un automatisme.\n        <\/p>\n\n        <h3>Des images trop parfaites<\/h3>\n\n        <p>\n            Des images trop lisses, trop sym\u00e9triques ou trop spectaculaires\n            peuvent donner au projet un rendu artificiel.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"contenus\">\n\n        <h2>12. Tester la maquette avec des contenus r\u00e9alistes<\/h2>\n\n        <p>\n            L\u2019intelligence artificielle peut produire une tr\u00e8s belle composition\n            \u00e0 partir de textes extr\u00eamement courts.\n        <\/p>\n\n        <p>\n            Mais le contenu r\u00e9el peut ensuite \u00eatre beaucoup plus long.\n        <\/p>\n\n        <h3>Contenu court<\/h3>\n\n        <pre><code>Nos services\n\nNous cr\u00e9ons des espaces uniques.<\/code><\/pre>\n\n        <h3>Contenu r\u00e9el<\/h3>\n\n        <pre><code>Nos prestations de r\u00e9novation int\u00e9rieure\n\nNous accompagnons les propri\u00e9taires\ndans leurs projets de r\u00e9novation compl\u00e8te\nou partielle de maisons et appartements\n\u00e0 Toulouse et dans toute la r\u00e9gion.<\/code><\/pre>\n\n        <p>\n            La maquette doit fonctionner\n            avec les contenus r\u00e9els du projet.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"cas-extremes\">\n\n        <h2>13. Tester les cas extr\u00eames<\/h2>\n\n        <p>\n            Une interface doit \u00e9galement fonctionner\n            lorsque le contenu n\u2019est pas parfaitement calibr\u00e9.\n        <\/p>\n\n        <ul>\n            <li>titre tr\u00e8s court ;<\/li>\n            <li>titre tr\u00e8s long ;<\/li>\n            <li>description sur deux lignes ;<\/li>\n            <li>description sur six lignes ;<\/li>\n            <li>carte avec image ;<\/li>\n            <li>carte sans image ;<\/li>\n            <li>trois r\u00e9alisations ;<\/li>\n            <li>sept r\u00e9alisations ;<\/li>\n            <li>FAQ avec r\u00e9ponse courte ;<\/li>\n            <li>FAQ avec r\u00e9ponse longue.<\/li>\n        <\/ul>\n\n        <p>\n            Cette \u00e9tape devient particuli\u00e8rement importante\n            lorsque les contenus seront administrables par le client.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"mobile\">\n\n        <h2>14. Cr\u00e9er une v\u00e9ritable maquette mobile<\/h2>\n\n        <p>\n            Une fois la direction desktop valid\u00e9e,\n            il faut r\u00e9ellement concevoir la version mobile.\n        <\/p>\n\n        <h3>Exemple desktop<\/h3>\n\n        <pre><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 TEXTE             PHOTOGRAPHIE   \u2502\n\u2502                                  \u2502\n\u2502 H1                               \u2502\n\u2502 Introduction                     \u2502\n\u2502 CTA + CTA                        \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/code><\/pre>\n\n        <h3>Exemple mobile<\/h3>\n\n        <pre><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502                 \u2502\n\u2502 H1              \u2502\n\u2502                 \u2502\n\u2502 Introduction    \u2502\n\u2502                 \u2502\n\u2502 CTA             \u2502\n\u2502                 \u2502\n\u2502 CTA secondaire  \u2502\n\u2502                 \u2502\n\u2502 PHOTOGRAPHIE    \u2502\n\u2502                 \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/code><\/pre>\n\n        <p>\n            Le mobile ne doit pas \u00eatre consid\u00e9r\u00e9\n            comme une simple r\u00e9duction du desktop.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"responsive\">\n\n        <h2>15. Donner des r\u00e8gles responsive \u00e0 l\u2019intelligence artificielle<\/h2>\n\n        <p>\n            Nous pouvons demander explicitement\n            \u00e0 l\u2019IA d\u2019adapter la composition.\n        <\/p>\n\n        <pre><code>Cr\u00e9e maintenant la version mobile\nde cette maquette.\n\nLargeur de r\u00e9f\u00e9rence :\n390 px.\n\nNe te contente pas\nde r\u00e9duire proportionnellement\nla version desktop.\n\nAdapte r\u00e9ellement la composition.\n\nR\u00c8GLES\n\n- conserver la hi\u00e9rarchie du contenu ;\n- une seule colonne lorsque n\u00e9cessaire ;\n- marges lat\u00e9rales de 20 px ;\n- boutons tactiles suffisamment grands ;\n- pas de texte inf\u00e9rieur \u00e0 16 px pour le corps ;\n- r\u00e9duire les titres sans perdre leur hi\u00e9rarchie ;\n- supprimer les \u00e9l\u00e9ments purement d\u00e9coratifs s'ils g\u00eanent ;\n- conserver les CTA importants accessibles ;\n- adapter les galeries ;\n- \u00e9viter le scroll horizontal ;\n- simplifier la navigation.\n\nPour chaque modification importante,\nexplique la d\u00e9cision responsive.<\/code><\/pre>\n\n    <\/section>\n\n\n    <section id=\"accessibilite\">\n\n        <h2>16. V\u00e9rifier l\u2019accessibilit\u00e9 de la maquette<\/h2>\n\n        <p>\n            Une partie de l\u2019accessibilit\u00e9 peut \u00eatre contr\u00f4l\u00e9e\n            avant m\u00eame de commencer le d\u00e9veloppement.\n        <\/p>\n\n        <h3>Contrastes<\/h3>\n\n        <p>\n            Les textes doivent rester lisibles\n            sur tous leurs arri\u00e8re-plans.\n        <\/p>\n\n        <h3>Taille des textes<\/h3>\n\n        <p>\n            Les contenus secondaires ne doivent pas devenir minuscules\n            uniquement pour pr\u00e9server une composition.\n        <\/p>\n\n        <h3>Liens et boutons<\/h3>\n\n        <p>\n            Les interactions doivent rester clairement identifiables.\n        <\/p>\n\n        <h3>Formulaires<\/h3>\n\n        <p>\n            Les labels et les \u00e9tats d\u2019erreur doivent \u00eatre anticip\u00e9s.\n        <\/p>\n\n        <h3>Focus clavier<\/h3>\n\n        <p>\n            Les \u00e9tats de focus doivent \u00eatre pr\u00e9vus\n            dans le design system.\n        <\/p>\n\n        <h3>Couleur<\/h3>\n\n        <p>\n            Une information importante ne doit pas d\u00e9pendre\n            uniquement d\u2019une diff\u00e9rence de couleur.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"systeme-reutilisable\">\n\n        <h2>17. Transformer la maquette en syst\u00e8me r\u00e9utilisable<\/h2>\n\n        <p>\n            Une fois la premi\u00e8re page valid\u00e9e,\n            il est pr\u00e9f\u00e9rable d\u2019identifier les \u00e9l\u00e9ments\n            qui peuvent \u00eatre r\u00e9utilis\u00e9s sur les autres pages.\n        <\/p>\n\n        <pre><code>GLOBAL\n\nHeader\nFooter\nNavigation\nBoutons\nFormulaires\n\n\nTYPOGRAPHIE\n\nDisplay\nH1\nH2\nH3\nBody\nSmall\n\n\nCOMPOSANTS\n\nService Card\nProject Card\nTestimonial\nFAQ\nCTA\n\n\nSECTIONS\n\nHero\nIntroduction\nServices\nProjects\nTestimonials\nCTA<\/code><\/pre>\n\n        <p>\n            Cette logique am\u00e9liore :\n        <\/p>\n\n        <ul>\n            <li>la coh\u00e9rence ;<\/li>\n            <li>la vitesse de conception ;<\/li>\n            <li>la maintenabilit\u00e9 ;<\/li>\n            <li>la future phase de d\u00e9veloppement.<\/li>\n        <\/ul>\n\n    <\/section>\n\n\n    <section id=\"checklist\">\n\n        <h2>Checklist : votre maquette UI est-elle pr\u00eate ?<\/h2>\n\n        <h3>Structure<\/h3>\n\n        <ul>\n            <li>Le wireframe initial est respect\u00e9.<\/li>\n            <li>Aucune section inutile n\u2019a \u00e9t\u00e9 ajout\u00e9e.<\/li>\n            <li>La hi\u00e9rarchie de l\u2019information est conserv\u00e9e.<\/li>\n        <\/ul>\n\n        <h3>Direction artistique<\/h3>\n\n        <ul>\n            <li>Les couleurs respectent le syst\u00e8me d\u00e9fini.<\/li>\n            <li>Les typographies sont coh\u00e9rentes.<\/li>\n            <li>Le style photographique est homog\u00e8ne.<\/li>\n            <li>Les composants partagent le m\u00eame langage graphique.<\/li>\n        <\/ul>\n\n        <h3>Contenu<\/h3>\n\n        <ul>\n            <li>Les vrais contenus sont utilis\u00e9s lorsque possible.<\/li>\n            <li>Les textes longs ont \u00e9t\u00e9 test\u00e9s.<\/li>\n            <li>Les contenus courts ont \u00e9t\u00e9 test\u00e9s.<\/li>\n            <li>Les images correspondent au projet.<\/li>\n        <\/ul>\n\n        <h3>Interface<\/h3>\n\n        <ul>\n            <li>Les boutons poss\u00e8dent plusieurs \u00e9tats.<\/li>\n            <li>Les formulaires sont pr\u00e9vus.<\/li>\n            <li>Les cartes fonctionnent avec diff\u00e9rents contenus.<\/li>\n            <li>Les espacements suivent une \u00e9chelle coh\u00e9rente.<\/li>\n        <\/ul>\n\n        <h3>UX<\/h3>\n\n        <ul>\n            <li>L\u2019action principale reste identifiable.<\/li>\n            <li>Le parcours utilisateur reste logique.<\/li>\n            <li>Les informations importantes ressortent visuellement.<\/li>\n        <\/ul>\n\n        <h3>Responsive<\/h3>\n\n        <ul>\n            <li>Une maquette desktop existe.<\/li>\n            <li>Une v\u00e9ritable version mobile existe.<\/li>\n            <li>Les composants peuvent s\u2019adapter aux diff\u00e9rentes largeurs.<\/li>\n        <\/ul>\n\n        <h3>Accessibilit\u00e9<\/h3>\n\n        <ul>\n            <li>Les contrastes sont suffisants.<\/li>\n            <li>Les textes sont lisibles.<\/li>\n            <li>Les boutons sont suffisamment grands.<\/li>\n            <li>Les formulaires poss\u00e8dent des labels.<\/li>\n            <li>Les \u00e9tats de focus sont anticip\u00e9s.<\/li>\n        <\/ul>\n\n    <\/section>\n\n\n    <section id=\"suite-responsive\">\n\n        <h2>De la maquette UI au responsive design<\/h2>\n\n        <p>\n            Notre m\u00e9thodologie comprend d\u00e9sormais cinq \u00e9tapes.\n        <\/p>\n\n        <pre><code>01\nCAHIER DES CHARGES \/ PROMPT\nD\u00e9finir le projet\n\n        \u2193\n\n02\nARBORESCENCE\nD\u00e9finir les pages\n\n        \u2193\n\n03\nWIREFRAME\nD\u00e9finir la structure\n\n        \u2193\n\n04\nDIRECTION ARTISTIQUE\nD\u00e9finir l'identit\u00e9 visuelle\n\n        \u2193\n\n05\nMAQUETTE UI\nConstruire l'interface<\/code><\/pre>\n\n        <p>\n            Au fur et \u00e0 mesure que le projet avance,\n            nous r\u00e9duisons la libert\u00e9 laiss\u00e9e \u00e0 l\u2019intelligence artificielle\n            et augmentons la pr\u00e9cision de nos contraintes.\n        <\/p>\n\n        <p>\n            L\u2019objectif n\u2019est donc pas n\u00e9cessairement de demander \u00e0 l\u2019IA\n            de concevoir un site \u00e0 notre place.\n        <\/p>\n\n        <p>\n            Il s\u2019agit plut\u00f4t de lui fournir suffisamment de contexte\n            pour <strong>acc\u00e9l\u00e9rer notre propre processus de conception<\/strong>.\n        <\/p>\n\n        <p>\n            Dans le prochain \u00e9pisode,\n            nous verrons\n            <strong>comment cr\u00e9er un site parfaitement responsive avec l\u2019IA<\/strong> :\n            breakpoints, composants adaptatifs, typographies fluides,\n            gestion du mobile, tablette et \u00e9crans interm\u00e9diaires.\n        <\/p>\n\n    <\/section>\n\n\n    <section class=\"article-faq\" id=\"faq\">\n\n        <h2>Questions fr\u00e9quentes sur les maquettes UI et l\u2019IA<\/h2>\n\n        <details>\n            <summary>\n                <strong>Qu\u2019est-ce qu\u2019une maquette UI de site web ?<\/strong>\n            <\/summary>\n\n            <p>\n                Une maquette UI est une repr\u00e9sentation graphique d\u00e9taill\u00e9e\n                d\u2019une interface avant son d\u00e9veloppement.\n                Elle combine le wireframe, la direction artistique,\n                les contenus et les composants graphiques.\n            <\/p>\n        <\/details>\n\n\n        <details>\n            <summary>\n                <strong>Peut-on cr\u00e9er une maquette UI avec l\u2019IA ?<\/strong>\n            <\/summary>\n\n            <p>\n                Oui. L\u2019intelligence artificielle peut acc\u00e9l\u00e9rer\n                la cr\u00e9ation de maquettes et l\u2019exploration de diff\u00e9rentes compositions,\n                \u00e0 condition de lui fournir un wireframe,\n                une direction artistique et des contraintes pr\u00e9cises.\n            <\/p>\n        <\/details>\n\n\n        <details>\n            <summary>\n                <strong>Quelle est la diff\u00e9rence entre wireframe et maquette UI ?<\/strong>\n            <\/summary>\n\n            <p>\n                Le wireframe d\u00e9finit la structure et l\u2019ordre des informations.\n                La maquette UI ajoute ensuite les couleurs, typographies,\n                images, composants et autres \u00e9l\u00e9ments graphiques.\n            <\/p>\n        <\/details>\n\n\n        <details>\n            <summary>\n                <strong>Faut-il utiliser de vrais textes dans une maquette ?<\/strong>\n            <\/summary>\n\n            <p>\n                Oui, lorsque cela est possible.\n                La longueur r\u00e9elle des titres, paragraphes et CTA\n                influence directement la composition et permet\n                de tester plus efficacement la robustesse du design.\n            <\/p>\n        <\/details>\n\n\n        <details>\n            <summary>\n                <strong>Comment \u00e9viter une maquette g\u00e9n\u00e9rique g\u00e9n\u00e9r\u00e9e par IA ?<\/strong>\n            <\/summary>\n\n            <p>\n                Il faut fournir \u00e0 l\u2019IA un cadre pr\u00e9cis :\n                wireframe, direction artistique, palette,\n                typographies, composants, contenus,\n                r\u00e8gles d\u2019espacement et contraintes graphiques.\n            <\/p>\n        <\/details>\n\n\n        <details>\n            <summary>\n                <strong>Faut-il cr\u00e9er une maquette mobile s\u00e9par\u00e9e ?<\/strong>\n            <\/summary>\n\n            <p>\n                Oui. Une version mobile ne doit pas \u00eatre une simple r\u00e9duction\n                du desktop. Elle doit adapter l\u2019ordre des contenus,\n                les composants, les espacements et les interactions\n                aux contraintes des petits \u00e9crans.\n            <\/p>\n        <\/details>\n\n    <\/section>\n\n<\/article>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Intelligence artificielle &amp; cr\u00e9ation web Comment cr\u00e9er une maquette UI de site web avec l\u2019IA \u00e0 partir d\u2019un wireframe ? Apr\u00e8s avoir d\u00e9fini le projet, construit son arborescence, organis\u00e9 le contenu de chaque page et \u00e9tabli une direction artistique, nous arrivons enfin \u00e0 l\u2019une des \u00e9tapes les plus visuelles de la conception : la cr\u00e9ation [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3531,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[44,24],"tags":[],"class_list":["post-3524","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ia","category-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Comment cr\u00e9er une maquette UI de site web avec l\u2019IA ? - afannou digital consulting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/afannoudigitalconsulting.com\/en\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment cr\u00e9er une maquette UI de site web avec l\u2019IA ? - afannou digital consulting\" \/>\n<meta property=\"og:description\" content=\"Intelligence artificielle &amp; cr\u00e9ation web Comment cr\u00e9er une maquette UI de site web avec l\u2019IA \u00e0 partir d\u2019un wireframe ? Apr\u00e8s avoir d\u00e9fini le projet, construit son arborescence, organis\u00e9 le contenu de chaque page et \u00e9tabli une direction artistique, nous arrivons enfin \u00e0 l\u2019une des \u00e9tapes les plus visuelles de la conception : la cr\u00e9ation [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/afannoudigitalconsulting.com\/en\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/\" \/>\n<meta property=\"og:site_name\" content=\"afannou digital consulting\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-31T21:57:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-31T21:59:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/afannoudigitalconsulting.com\/wp-content\/uploads\/2026\/08\/Sujet-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"kevine\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"kevine\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-maquette-ui-de-site-web-avec-lia\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-maquette-ui-de-site-web-avec-lia\\\/\"},\"author\":{\"name\":\"kevine\",\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/#\\\/schema\\\/person\\\/54ab4c35294b3cf98a9189780b62624c\"},\"headline\":\"Comment cr\u00e9er une maquette UI de site web avec l\u2019IA ?\",\"datePublished\":\"2026-08-31T21:57:28+00:00\",\"dateModified\":\"2026-08-31T21:59:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-maquette-ui-de-site-web-avec-lia\\\/\"},\"wordCount\":2140,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-maquette-ui-de-site-web-avec-lia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/Sujet-4.png\",\"articleSection\":[\"IA\",\"Web\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-maquette-ui-de-site-web-avec-lia\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-maquette-ui-de-site-web-avec-lia\\\/\",\"url\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-maquette-ui-de-site-web-avec-lia\\\/\",\"name\":\"Comment cr\u00e9er une maquette UI de site web avec l\u2019IA ? - afannou digital consulting\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-maquette-ui-de-site-web-avec-lia\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-maquette-ui-de-site-web-avec-lia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/Sujet-4.png\",\"datePublished\":\"2026-08-31T21:57:28+00:00\",\"dateModified\":\"2026-08-31T21:59:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-maquette-ui-de-site-web-avec-lia\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-maquette-ui-de-site-web-avec-lia\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-maquette-ui-de-site-web-avec-lia\\\/#primaryimage\",\"url\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/Sujet-4.png\",\"contentUrl\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/Sujet-4.png\",\"width\":1536,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-maquette-ui-de-site-web-avec-lia\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comment cr\u00e9er une maquette UI de site web avec l\u2019IA ?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/#website\",\"url\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/\",\"name\":\"afannou digital consulting\",\"description\":\"D\u00e9veloppons votre site web &amp; gagnez en autonomie\",\"publisher\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/#organization\",\"name\":\"afannou digital consulting\",\"url\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Logo-blanc-sans-fond-1.png\",\"contentUrl\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Logo-blanc-sans-fond-1.png\",\"width\":3205,\"height\":511,\"caption\":\"afannou digital consulting\"},\"image\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/#\\\/schema\\\/person\\\/54ab4c35294b3cf98a9189780b62624c\",\"name\":\"kevine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9ec571018ddea6fde11e78651f6860d1357612ce69b06bd1073e874ccb9c24fe?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9ec571018ddea6fde11e78651f6860d1357612ce69b06bd1073e874ccb9c24fe?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9ec571018ddea6fde11e78651f6860d1357612ce69b06bd1073e874ccb9c24fe?s=96&d=mm&r=g\",\"caption\":\"kevine\"},\"sameAs\":[\"https:\\\/\\\/afannoudigitalconsulting.com\"],\"url\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/en\\\/author\\\/kevine\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comment cr\u00e9er une maquette UI de site web avec l\u2019IA ? - afannou digital consulting","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:\/\/afannoudigitalconsulting.com\/en\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/","og_locale":"en_GB","og_type":"article","og_title":"Comment cr\u00e9er une maquette UI de site web avec l\u2019IA ? - afannou digital consulting","og_description":"Intelligence artificielle &amp; cr\u00e9ation web Comment cr\u00e9er une maquette UI de site web avec l\u2019IA \u00e0 partir d\u2019un wireframe ? Apr\u00e8s avoir d\u00e9fini le projet, construit son arborescence, organis\u00e9 le contenu de chaque page et \u00e9tabli une direction artistique, nous arrivons enfin \u00e0 l\u2019une des \u00e9tapes les plus visuelles de la conception : la cr\u00e9ation [&hellip;]","og_url":"https:\/\/afannoudigitalconsulting.com\/en\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/","og_site_name":"afannou digital consulting","article_published_time":"2026-08-31T21:57:28+00:00","article_modified_time":"2026-08-31T21:59:46+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/afannoudigitalconsulting.com\/wp-content\/uploads\/2026\/08\/Sujet-4.png","type":"image\/png"}],"author":"kevine","twitter_card":"summary_large_image","twitter_misc":{"Written by":"kevine","Estimated reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/#article","isPartOf":{"@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/"},"author":{"name":"kevine","@id":"https:\/\/afannoudigitalconsulting.com\/#\/schema\/person\/54ab4c35294b3cf98a9189780b62624c"},"headline":"Comment cr\u00e9er une maquette UI de site web avec l\u2019IA ?","datePublished":"2026-08-31T21:57:28+00:00","dateModified":"2026-08-31T21:59:46+00:00","mainEntityOfPage":{"@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/"},"wordCount":2140,"commentCount":0,"publisher":{"@id":"https:\/\/afannoudigitalconsulting.com\/#organization"},"image":{"@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/#primaryimage"},"thumbnailUrl":"https:\/\/afannoudigitalconsulting.com\/wp-content\/uploads\/2026\/08\/Sujet-4.png","articleSection":["IA","Web"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/afannoudigitalconsulting.com\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/","url":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/","name":"Comment cr\u00e9er une maquette UI de site web avec l\u2019IA ? - afannou digital consulting","isPartOf":{"@id":"https:\/\/afannoudigitalconsulting.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/#primaryimage"},"image":{"@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/#primaryimage"},"thumbnailUrl":"https:\/\/afannoudigitalconsulting.com\/wp-content\/uploads\/2026\/08\/Sujet-4.png","datePublished":"2026-08-31T21:57:28+00:00","dateModified":"2026-08-31T21:59:46+00:00","breadcrumb":{"@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/afannoudigitalconsulting.com\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/#primaryimage","url":"https:\/\/afannoudigitalconsulting.com\/wp-content\/uploads\/2026\/08\/Sujet-4.png","contentUrl":"https:\/\/afannoudigitalconsulting.com\/wp-content\/uploads\/2026\/08\/Sujet-4.png","width":1536,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-maquette-ui-de-site-web-avec-lia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/afannoudigitalconsulting.com\/"},{"@type":"ListItem","position":2,"name":"Comment cr\u00e9er une maquette UI de site web avec l\u2019IA ?"}]},{"@type":"WebSite","@id":"https:\/\/afannoudigitalconsulting.com\/#website","url":"https:\/\/afannoudigitalconsulting.com\/","name":"afannou digital consulting","description":"D\u00e9veloppons votre site web &amp; gagnez en autonomie","publisher":{"@id":"https:\/\/afannoudigitalconsulting.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/afannoudigitalconsulting.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/afannoudigitalconsulting.com\/#organization","name":"afannou digital consulting","url":"https:\/\/afannoudigitalconsulting.com\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/afannoudigitalconsulting.com\/#\/schema\/logo\/image\/","url":"https:\/\/afannoudigitalconsulting.com\/wp-content\/uploads\/2025\/03\/Logo-blanc-sans-fond-1.png","contentUrl":"https:\/\/afannoudigitalconsulting.com\/wp-content\/uploads\/2025\/03\/Logo-blanc-sans-fond-1.png","width":3205,"height":511,"caption":"afannou digital consulting"},"image":{"@id":"https:\/\/afannoudigitalconsulting.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/afannoudigitalconsulting.com\/#\/schema\/person\/54ab4c35294b3cf98a9189780b62624c","name":"kevine","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/9ec571018ddea6fde11e78651f6860d1357612ce69b06bd1073e874ccb9c24fe?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9ec571018ddea6fde11e78651f6860d1357612ce69b06bd1073e874ccb9c24fe?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9ec571018ddea6fde11e78651f6860d1357612ce69b06bd1073e874ccb9c24fe?s=96&d=mm&r=g","caption":"kevine"},"sameAs":["https:\/\/afannoudigitalconsulting.com"],"url":"https:\/\/afannoudigitalconsulting.com\/en\/author\/kevine\/"}]}},"_links":{"self":[{"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/posts\/3524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/comments?post=3524"}],"version-history":[{"count":6,"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/posts\/3524\/revisions"}],"predecessor-version":[{"id":3530,"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/posts\/3524\/revisions\/3530"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/media\/3531"}],"wp:attachment":[{"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/media?parent=3524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/categories?post=3524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/tags?post=3524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}