{"id":3516,"date":"2026-08-31T21:20:40","date_gmt":"2026-08-31T21:20:40","guid":{"rendered":"https:\/\/afannoudigitalconsulting.com\/?p=3516"},"modified":"2026-08-31T21:25:21","modified_gmt":"2026-08-31T21:25:21","slug":"comment-creer-une-direction-artistique-web-avec-lia","status":"publish","type":"post","link":"https:\/\/afannoudigitalconsulting.com\/en\/comment-creer-une-direction-artistique-web-avec-lia\/","title":{"rendered":"Comment cr\u00e9er une direction artistique web avec l\u2019IA ?"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"3516\" class=\"elementor elementor-3516\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-01f3c9b e-flex e-con-boxed e-con e-parent\" data-id=\"01f3c9b\" 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-29e3104 elementor-widget elementor-widget-html\" data-id=\"29e3104\" 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>Comment d\u00e9finir une direction artistique pour un site web avec l\u2019IA ?<\/h1>\n\n        <p class=\"article-intro\">\n            Apr\u00e8s avoir d\u00e9fini le cahier des charges, construit l\u2019arborescence\n            et organis\u00e9 chaque page sous forme de wireframe, notre site poss\u00e8de\n            d\u00e9sormais une structure solide.\n        <\/p>\n\n        <p>\n            Nous savons <strong>quelles pages cr\u00e9er<\/strong>,\n            <strong>quelles informations afficher<\/strong> et\n            <strong>dans quel ordre les pr\u00e9senter<\/strong>.\n            Mais visuellement, notre projet n\u2019existe pas encore r\u00e9ellement.\n        <\/p>\n\n        <p>\n            Il reste maintenant \u00e0 d\u00e9finir ses couleurs, ses typographies,\n            son style photographique, ses composants graphiques, ses espacements\n            et plus largement l\u2019atmosph\u00e8re que l\u2019interface doit transmettre.\n            C\u2019est le r\u00f4le de la <strong>direction artistique web<\/strong>.\n        <\/p>\n\n        <p>\n            Dans ce quatri\u00e8me article consacr\u00e9 \u00e0 la\n            <strong>cr\u00e9ation d\u2019un site web avec l\u2019IA<\/strong>,\n            nous allons voir comment utiliser l\u2019intelligence artificielle\n            pour construire une identit\u00e9 visuelle coh\u00e9rente sans tomber\n            dans le rendu g\u00e9n\u00e9rique de nombreux sites g\u00e9n\u00e9r\u00e9s automatiquement.\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\">Qu\u2019est-ce qu\u2019une direction artistique web ?<\/a><\/li>\n            <li><a href=\"#wireframe-da\">Wireframe et direction artistique<\/a><\/li>\n            <li><a href=\"#sites-ia\">Pourquoi les sites g\u00e9n\u00e9r\u00e9s par IA se ressemblent-ils ?<\/a><\/li>\n            <li><a href=\"#marque\">Commencer par la marque<\/a><\/li>\n            <li><a href=\"#emotions\">D\u00e9finir les \u00e9motions<\/a><\/li>\n            <li><a href=\"#moodboard\">Construire un moodboard<\/a><\/li>\n            <li><a href=\"#references\">Utiliser des r\u00e9f\u00e9rences sans copier<\/a><\/li>\n            <li><a href=\"#couleurs\">D\u00e9finir la palette de couleurs<\/a><\/li>\n            <li><a href=\"#typographies\">Choisir les typographies<\/a><\/li>\n            <li><a href=\"#photographie\">D\u00e9finir le style photographique<\/a><\/li>\n            <li><a href=\"#composants\">D\u00e9finir les composants UI<\/a><\/li>\n            <li><a href=\"#espacements\">Espacements et grille<\/a><\/li>\n            <li><a href=\"#animations\">D\u00e9finir les animations<\/a><\/li>\n            <li><a href=\"#design-system\">Construire un mini design system<\/a><\/li>\n            <li><a href=\"#prompt-da\">Prompt de direction artistique<\/a><\/li>\n            <li><a href=\"#pistes\">Cr\u00e9er plusieurs pistes cr\u00e9atives<\/a><\/li>\n            <li><a href=\"#responsive\">Direction artistique et responsive<\/a><\/li>\n            <li><a href=\"#accessibilite\">Direction artistique et accessibilit\u00e9<\/a><\/li>\n            <li><a href=\"#erreurs\">Les erreurs \u00e0 \u00e9viter<\/a><\/li>\n            <li><a href=\"#checklist\">Checklist<\/a><\/li>\n        <\/ol>\n\n    <\/nav>\n\n\n    <section id=\"definition\">\n\n        <h2>Qu\u2019est-ce qu\u2019une direction artistique web ?<\/h2>\n\n        <p>\n            La direction artistique, souvent appel\u00e9e <strong>DA<\/strong>,\n            d\u00e9finit l\u2019univers visuel d\u2019un projet.\n        <\/p>\n\n        <p>\n            Dans le cadre d\u2019un site web, elle d\u00e9termine notamment :\n        <\/p>\n\n        <ul>\n            <li>les couleurs ;<\/li>\n            <li>les typographies ;<\/li>\n            <li>le style photographique ;<\/li>\n            <li>les formes ;<\/li>\n            <li>les ic\u00f4nes ;<\/li>\n            <li>les boutons ;<\/li>\n            <li>les bordures ;<\/li>\n            <li>les espacements ;<\/li>\n            <li>la grille de mise en page ;<\/li>\n            <li>les animations ;<\/li>\n            <li>le traitement des images ;<\/li>\n            <li>l\u2019atmosph\u00e8re g\u00e9n\u00e9rale de l\u2019interface.<\/li>\n        <\/ul>\n\n        <p>\n            Une direction artistique ne consiste donc pas simplement\n            \u00e0 choisir une couleur principale et une police.\n        <\/p>\n\n        <p>\n            Elle doit traduire visuellement\n            <strong>la personnalit\u00e9 et le positionnement de la marque<\/strong>.\n        <\/p>\n\n        <p>\n            Une banque priv\u00e9e, un restaurant gastronomique,\n            une association sportive et une marque de streetwear\n            ne devraient \u00e9videmment pas produire la m\u00eame sensation visuelle.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"wireframe-da\">\n\n        <h2>Wireframe et direction artistique : quelle diff\u00e9rence ?<\/h2>\n\n        <p>\n            Lors de l\u2019\u00e9tape pr\u00e9c\u00e9dente, nous avons construit notre wireframe\n            sans nous pr\u00e9occuper du design.\n        <\/p>\n\n        <pre><code>HERO\n\u2502\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\nR\u00c9ALISATIONS\n\nT\u00c9MOIGNAGES\n\nFAQ\n\nCTA FINAL<\/code><\/pre>\n\n        <p>\n            Le wireframe r\u00e9pond essentiellement \u00e0 la question :\n        <\/p>\n\n        <blockquote>\n            <p><strong>Que doit contenir cette page ?<\/strong><\/p>\n        <\/blockquote>\n\n        <p>\n            La direction artistique r\u00e9pond maintenant \u00e0 une autre question :\n        <\/p>\n\n        <blockquote>\n            <p>\n                <strong>\n                    Comment ces \u00e9l\u00e9ments doivent-ils \u00eatre repr\u00e9sent\u00e9s visuellement ?\n                <\/strong>\n            <\/p>\n        <\/blockquote>\n\n        <pre><code>STRUCTURE\nWireframe\n\n        \u2193\n\nIDENTIT\u00c9\nDirection artistique\n\n        \u2193\n\nINTERFACE\nMaquette UI<\/code><\/pre>\n\n    <\/section>\n\n\n    <section id=\"sites-ia\">\n\n        <h2>Pourquoi les sites g\u00e9n\u00e9r\u00e9s par IA finissent-ils souvent par se ressembler ?<\/h2>\n\n        <p>\n            Une instruction comme\n            \u00ab cr\u00e9e un design moderne et premium pour une entreprise de r\u00e9novation \u00bb\n            peut produire une interface techniquement tr\u00e8s propre.\n        <\/p>\n\n        <p>\n            Mais sans v\u00e9ritable direction artistique,\n            l\u2019intelligence artificielle risque de utiliser des solutions\n            graphiques g\u00e9n\u00e9riques :\n        <\/p>\n\n        <pre><code>Grande Hero pleine largeur\n\nTitre tr\u00e8s imposant\n\nD\u00e9grad\u00e9s\n\nBoutons tr\u00e8s arrondis\n\nCartes flottantes\n\nOmbres l\u00e9g\u00e8res\n\nIc\u00f4nes minimalistes\n\nAnimations au scroll\n\nChiffres cl\u00e9s<\/code><\/pre>\n\n        <p>\n            Pris individuellement, ces choix ne sont pas n\u00e9cessairement mauvais.\n            Le probl\u00e8me appara\u00eet lorsqu\u2019ils sont utilis\u00e9s\n            <strong>sans justification li\u00e9e \u00e0 l\u2019identit\u00e9 de la marque<\/strong>.\n        <\/p>\n\n        <p>\n            Le site devient alors esth\u00e9tique mais interchangeable.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"marque\">\n\n        <h2>1. Commencer par la marque, pas par les couleurs<\/h2>\n\n        <p>\n            Avant de demander une palette de couleurs \u00e0 l\u2019IA,\n            int\u00e9ressons-nous \u00e0 la personnalit\u00e9 du projet.\n        <\/p>\n\n        <p>\n            Reprenons notre entreprise fictive de r\u00e9novation int\u00e9rieure.\n        <\/p>\n\n        <pre><code>ENTREPRISE\n\nEntreprise de r\u00e9novation int\u00e9rieure\nbas\u00e9e \u00e0 Toulouse.\n\nPOSITIONNEMENT\n\nHaut de gamme accessible.\n\nVALEURS\n\nSavoir-faire\nPr\u00e9cision\nConfiance\nProximit\u00e9\nDurabilit\u00e9\n\nPERSONNALIT\u00c9\n\n\u00c9l\u00e9gante\nSobre\nChaleureuse\nContemporaine\nHumaine\n\n\u00c0 \u00c9VITER\n\nUnivers industriel froid\nDesign startup\nCouleurs trop vives\nInterface futuriste\nEffets visuels excessifs<\/code><\/pre>\n\n        <p>\n            Nous n\u2019avons encore choisi aucune couleur,\n            mais nous avons d\u00e9j\u00e0 consid\u00e9rablement r\u00e9duit\n            le champ des possibilit\u00e9s graphiques.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"emotions\">\n\n        <h2>2. D\u00e9finir les \u00e9motions que le site doit transmettre<\/h2>\n\n        <p>\n            Une direction artistique efficace ne se r\u00e9sume pas \u00e0 dire :\n            \u00ab je veux un site beige et noir \u00bb.\n        <\/p>\n\n        <p>\n            Il est beaucoup plus int\u00e9ressant de se demander :\n        <\/p>\n\n        <blockquote>\n            <p>\n                <strong>\n                    Que doit ressentir l\u2019utilisateur lorsqu\u2019il d\u00e9couvre le site ?\n                <\/strong>\n            <\/p>\n        <\/blockquote>\n\n        <p>\n            Pour notre entreprise de r\u00e9novation, nous pouvons retenir :\n        <\/p>\n\n        <pre><code>CONFIANCE\n\nQUALIT\u00c9\n\nSAVOIR-FAIRE\n\nCALME\n\nPROXIMIT\u00c9\n\n\u00c9L\u00c9GANCE<\/code><\/pre>\n\n        <p>\n            Ces mots deviennent ensuite de v\u00e9ritables\n            <strong>crit\u00e8res de d\u00e9cision graphique<\/strong>.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"moodboard\">\n\n        <h2>3. Construire un moodboard pour d\u00e9finir l\u2019univers visuel<\/h2>\n\n        <p>\n            Avant de concevoir l\u2019interface,\n            nous pouvons cr\u00e9er un <strong>moodboard<\/strong>.\n        <\/p>\n\n        <p>\n            Il s\u2019agit d\u2019un ensemble de r\u00e9f\u00e9rences permettant\n            de mat\u00e9rialiser l\u2019univers visuel recherch\u00e9.\n        <\/p>\n\n        <p>Un moodboard peut contenir :<\/p>\n\n        <ul>\n            <li>des photographies ;<\/li>\n            <li>des mati\u00e8res ;<\/li>\n            <li>de l\u2019architecture ;<\/li>\n            <li>des interfaces web ;<\/li>\n            <li>des compositions \u00e9ditoriales ;<\/li>\n            <li>des typographies ;<\/li>\n            <li>des objets ;<\/li>\n            <li>des palettes de couleurs ;<\/li>\n            <li>des r\u00e9f\u00e9rences issues du print.<\/li>\n        <\/ul>\n\n        <p>\n            Pour notre projet, nous pourrions rechercher des r\u00e9f\u00e9rences autour de :\n        <\/p>\n\n        <pre><code>Architecture contemporaine\n\nPierre naturelle\n\nBois clair\n\nB\u00e9ton brut\n\nInt\u00e9rieurs lumineux\n\nMagazines d'architecture\n\nPhotographies de mati\u00e8res\n\nArtisanat haut de gamme\n\nMise en page \u00e9ditoriale minimaliste<\/code><\/pre>\n\n        <p>\n            Le moodboard permet de donner une\n            <strong>traduction visuelle concr\u00e8te<\/strong>\n            \u00e0 des notions abstraites comme \u00ab \u00e9l\u00e9gant \u00bb,\n            \u00ab premium \u00bb ou \u00ab chaleureux \u00bb.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"references\">\n\n        <h2>4. Utiliser des r\u00e9f\u00e9rences visuelles sans copier<\/h2>\n\n        <p>\n            Les r\u00e9f\u00e9rences sont particuli\u00e8rement utiles lorsqu\u2019on travaille\n            avec une intelligence artificielle.\n        <\/p>\n\n        <p>\n            Mais il existe une diff\u00e9rence importante entre reproduire\n            une interface et comprendre les principes qui la rendent int\u00e9ressante.\n        <\/p>\n\n        <pre><code>Site A\n\u2192 grandes photographies\n\nSite B\n\u2192 typographie \u00e9ditoriale\n\nSite C\n\u2192 utilisation importante de l'espace blanc\n\nSite D\n\u2192 navigation minimaliste\n\nMagazine\n\u2192 composition asym\u00e9trique<\/code><\/pre>\n\n        <p>\n            La direction artistique peut ensuite combiner certains de ces principes\n            afin de construire une identit\u00e9 diff\u00e9rente.\n        <\/p>\n\n        <p>\n            L\u2019objectif n\u2019est pas de copier une r\u00e9f\u00e9rence,\n            mais de comprendre <strong>pourquoi elle fonctionne<\/strong>.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"couleurs\">\n\n        <h2>5. D\u00e9finir une palette de couleurs coh\u00e9rente<\/h2>\n\n        <p>\n            Nous pouvons maintenant commencer \u00e0 traduire\n            notre positionnement en choix graphiques.\n        <\/p>\n\n        <p>\n            Pour notre entreprise fictive, nous pourrions imaginer :\n        <\/p>\n\n        <pre><code>COULEUR PRINCIPALE\nBrun profond\n#302B27\n\nFOND PRINCIPAL\nIvoire chaud\n#F4F0E8\n\nFOND SECONDAIRE\nBeige min\u00e9ral\n#DDD3C4\n\nCOULEUR D'ACCENT\nTerracotta\n#A86245\n\nTEXTE PRINCIPAL\nAnthracite\n#222222\n\nTEXTE SECONDAIRE\nGris chaud\n#6D6862<\/code><\/pre>\n\n        <p>\n            Une palette devient r\u00e9ellement utile lorsque chaque couleur\n            poss\u00e8de une fonction pr\u00e9cise.\n        <\/p>\n\n        <pre><code>Ivoire\n\u2192 fond principal\n\nAnthracite\n\u2192 textes\n\nBrun\n\u2192 footer et sections fortes\n\nTerracotta\n\u2192 CTA et \u00e9l\u00e9ments d'accentuation\n\nBeige\n\u2192 cartes et sections secondaires<\/code><\/pre>\n\n        <h3>Ne pas demander simplement \u00ab une palette moderne \u00bb<\/h3>\n\n        <p>\n            Plus le contexte donn\u00e9 \u00e0 l\u2019IA est pr\u00e9cis,\n            plus ses propositions pourront \u00eatre pertinentes.\n        <\/p>\n\n        <pre><code>Propose trois palettes pour une entreprise\nde r\u00e9novation int\u00e9rieure haut de gamme accessible.\n\nL'univers doit transmettre :\n\n- confiance ;\n- savoir-faire ;\n- chaleur ;\n- \u00e9l\u00e9gance ;\n- durabilit\u00e9.\n\n\u00c9vite :\n\n- les couleurs tr\u00e8s satur\u00e9es ;\n- les d\u00e9grad\u00e9s ;\n- les couleurs typiques des startups technologiques ;\n- le bleu corporate ;\n- les associations noir\/or trop luxueuses.\n\nPour chaque palette indique :\n\n- couleur principale ;\n- fond principal ;\n- fond secondaire ;\n- couleur d'accent ;\n- couleur du texte ;\n- usage recommand\u00e9 de chaque couleur ;\n- contraste et accessibilit\u00e9.<\/code><\/pre>\n\n    <\/section>\n\n\n    <section id=\"typographies\">\n\n        <h2>6. Choisir les typographies du site<\/h2>\n\n        <p>\n            La typographie influence fortement la perception d\u2019une interface.\n        <\/p>\n\n        <p>\n            Pour notre projet, nous pourrions d\u00e9finir :\n        <\/p>\n\n        <pre><code>TITRES\n\nSerif contemporaine\n\n\u00c9l\u00e9gante\n\u00c9ditoriale\nAvec du caract\u00e8re\n\n\nTEXTES\n\nSans-serif\n\nTr\u00e8s lisible\nSobre\nNeutre\n\n\nBOUTONS \/ NAVIGATION\n\nSans-serif\n\nMedium\nL\u00e9g\u00e8rement espac\u00e9e<\/code><\/pre>\n\n        <h3>Limiter le nombre de typographies<\/h3>\n\n        <p>\n            Dans la majorit\u00e9 des projets web,\n            deux familles typographiques sont largement suffisantes.\n        <\/p>\n\n        <pre><code>TYPOGRAPHIE A\nTitres\n\n+\n\nTYPOGRAPHIE B\nTextes \/ Interface<\/code><\/pre>\n\n        <p>\n            Nous pouvons ensuite utiliser diff\u00e9rentes graisses :\n        <\/p>\n\n        <pre><code>Regular\nMedium\nSemibold\nBold\nItalic<\/code><\/pre>\n\n        <h3>D\u00e9finir une \u00e9chelle typographique<\/h3>\n\n        <pre><code>DISPLAY\n64 px \/ 1.05\n\nH1\n56 px \/ 1.1\n\nH2\n40 px \/ 1.15\n\nH3\n28 px \/ 1.25\n\nBODY LARGE\n20 px \/ 1.5\n\nBODY\n16 px \/ 1.6\n\nSMALL\n14 px \/ 1.5<\/code><\/pre>\n\n        <p>\n            Cette \u00e9chelle devra ensuite \u00eatre adapt\u00e9e\n            aux diff\u00e9rents formats d\u2019\u00e9cran.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"photographie\">\n\n        <h2>7. D\u00e9finir le style photographique<\/h2>\n\n        <p>\n            La photographie joue un r\u00f4le majeur\n            dans la perception de la qualit\u00e9 d\u2019un site.\n        <\/p>\n\n        <p>\n            Pour notre projet, nous pourrions d\u00e9finir les r\u00e8gles suivantes :\n        <\/p>\n\n        <pre><code>STYLE PHOTOGRAPHIQUE\n\nPhotographie r\u00e9aliste\n\nLumi\u00e8re naturelle\n\nTons l\u00e9g\u00e8rement chauds\n\nArchitecture r\u00e9ellement habit\u00e9e\n\nPr\u00e9sence humaine occasionnelle\n\nTextures naturelles visibles\n\nPlans larges + d\u00e9tails\n\nPas de poses artificielles\n\nPas d'images trop parfaites<\/code><\/pre>\n\n        <h3>Les images \u00e0 \u00e9viter<\/h3>\n\n        <pre><code>Photos corporate\n\nPoign\u00e9es de main\n\nPersonnes regardant syst\u00e9matiquement la cam\u00e9ra\n\nInt\u00e9rieurs irr\u00e9alistes\n\nHDR excessif\n\nSaturation forte\n\nRendus 3D trop parfaits<\/code><\/pre>\n\n        <p>\n            La coh\u00e9rence photographique peut avoir autant d\u2019impact\n            sur la qualit\u00e9 per\u00e7ue du site que les composants graphiques.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"composants\">\n\n        <h2>8. D\u00e9finir les composants UI<\/h2>\n\n        <p>\n            Nous pouvons maintenant pr\u00e9ciser la mani\u00e8re\n            dont les principaux \u00e9l\u00e9ments d\u2019interface seront repr\u00e9sent\u00e9s.\n        <\/p>\n\n        <h3>Les boutons<\/h3>\n\n        <pre><code>BOUTON PRINCIPAL\n\nFond terracotta\nTexte clair\nHauteur 52 px\nPadding horizontal g\u00e9n\u00e9reux\nBorder-radius l\u00e9ger\nPas d'ombre\n\n\nBOUTON SECONDAIRE\n\nFond transparent\nBordure fine\nTexte sombre<\/code><\/pre>\n\n        <h3>Les cartes<\/h3>\n\n        <pre><code>CARTES\n\nFond identique au site\nou l\u00e9g\u00e8rement contrast\u00e9\n\nTr\u00e8s peu d'ombre\n\nBordure fine \u00e9ventuelle\n\nCoins l\u00e9g\u00e8rement arrondis\n\nGrande photographie\n\nTypographie \u00e9ditoriale\n\nEspacement g\u00e9n\u00e9reux\n\nPas d'effet glassmorphism<\/code><\/pre>\n\n        <p>\n            Nous commen\u00e7ons ainsi \u00e0 d\u00e9finir\n            <strong>le langage graphique du site<\/strong>.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"espacements\">\n\n        <h2>9. D\u00e9finir les espacements et la grille<\/h2>\n\n        <p>\n            Une interface coh\u00e9rente ne d\u00e9pend pas uniquement\n            de ses couleurs ou de ses composants.\n        <\/p>\n\n        <p>\n            Les espacements jouent \u00e9galement un r\u00f4le essentiel.\n        <\/p>\n\n        <pre><code>4 px\n8 px\n16 px\n24 px\n32 px\n48 px\n64 px\n96 px\n128 px<\/code><\/pre>\n\n        <p>\n            Nous pouvons ensuite d\u00e9finir quelques r\u00e8gles :\n        <\/p>\n\n        <pre><code>Entre label et titre\n16 px\n\nEntre titre et texte\n24 px\n\nEntre paragraphes\n16 px\n\nEntre blocs d'une section\n32 \u00e0 48 px\n\nEntre grandes sections\n96 \u00e0 128 px<\/code><\/pre>\n\n        <h3>D\u00e9finir une grille<\/h3>\n\n        <pre><code>DESKTOP\n\nLargeur maximale :\n1280 px\n\nGrille :\n12 colonnes\n\nGoutti\u00e8res :\n24 px\n\n\nTABLETTE\n\n8 colonnes\n\n\nMOBILE\n\n4 colonnes\n\nMarges :\n20 px<\/code><\/pre>\n\n        <p>\n            Ces r\u00e8gles \u00e9vitent que chaque section\n            soit construite avec des proportions diff\u00e9rentes sans justification.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"animations\">\n\n        <h2>10. D\u00e9finir les animations et interactions<\/h2>\n\n        <p>\n            Les animations participent \u00e9galement \u00e0 la direction artistique,\n            mais elles doivent soutenir l\u2019exp\u00e9rience utilisateur.\n        <\/p>\n\n        <pre><code>ANIMATIONS\n\nTransitions discr\u00e8tes\n\nFade + l\u00e9ger d\u00e9placement vertical\n\nDur\u00e9e :\n300 \u00e0 600 ms\n\nImages :\nzoom tr\u00e8s l\u00e9ger au survol\n\nBoutons :\ntransition rapide\n\nNavigation :\napparition fluide<\/code><\/pre>\n\n        <h3>Les effets \u00e0 \u00e9viter<\/h3>\n\n        <pre><code>Parallax excessif\n\nTexte qui vole dans l'\u00e9cran\n\nRotation 3D\n\nCurseur personnalis\u00e9 inutile\n\nAnimations sur chaque \u00e9l\u00e9ment\n\nScroll hijacking<\/code><\/pre>\n\n        <blockquote>\n            <p>\n                <strong>\n                    Une animation doit soutenir l\u2019exp\u00e9rience.\n                    Elle ne doit pas devenir l\u2019exp\u00e9rience.\n                <\/strong>\n            <\/p>\n        <\/blockquote>\n\n    <\/section>\n\n\n    <section id=\"design-system\">\n\n        <h2>11. Construire un mini design system<\/h2>\n\n        <p>\n            Toutes les d\u00e9cisions pr\u00e9c\u00e9dentes peuvent maintenant\n            \u00eatre regroup\u00e9es dans un premier syst\u00e8me graphique.\n        <\/p>\n\n        <pre><code>DESIGN SYSTEM\n\n01 \u2014 COULEURS\nBrun profond\nIvoire\nBeige min\u00e9ral\nTerracotta\nAnthracite\n\n02 \u2014 TYPOGRAPHIES\nSerif \u2192 titres\nSans-serif \u2192 textes\n\n03 \u2014 BOUTONS\nPrimary\nSecondary\nText link\n\n04 \u2014 FORMULAIRES\nInput\nTextarea\nSelect\nCheckbox\n\n05 \u2014 CARTES\nService\nProjet\nT\u00e9moignage\n\n06 \u2014 ESPACEMENTS\n4 \/ 8 \/ 16 \/ 24 \/ 32 \/ 48 \/ 64 \/ 96 \/ 128\n\n07 \u2014 GRILLE\n12 colonnes desktop\n8 tablette\n4 mobile\n\n08 \u2014 IMAGES\nNaturelles\nChaudes\nArchitecturales\n\n09 \u2014 ANIMATIONS\nSubtiles\n300\u2013600 ms<\/code><\/pre>\n\n        <p>\n            Nous n\u2019avons toujours pas construit une maquette compl\u00e8te,\n            mais nous disposons maintenant\n            <strong>des r\u00e8gles qui permettront de la concevoir<\/strong>.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"prompt-da\">\n\n        <h2>12. Quel prompt utiliser pour cr\u00e9er une direction artistique avec l\u2019IA ?<\/h2>\n\n        <p>\n            Nous pouvons maintenant regrouper ces informations\n            dans un prompt beaucoup plus pr\u00e9cis.\n        <\/p>\n\n        <pre><code>Tu es directeur artistique et UI Designer\nsp\u00e9cialis\u00e9 dans les interfaces web.\n\nJe souhaite d\u00e9finir la direction artistique\nd'un site avant de cr\u00e9er ses maquettes.\n\nCONTEXTE\n\nL'entreprise est sp\u00e9cialis\u00e9e dans la r\u00e9novation\nint\u00e9rieure de maisons et appartements\n\u00e0 Toulouse et dans sa r\u00e9gion.\n\nPOSITIONNEMENT\n\nHaut de gamme accessible.\n\nVALEURS\n\n- savoir-faire ;\n- pr\u00e9cision ;\n- confiance ;\n- proximit\u00e9 ;\n- durabilit\u00e9.\n\nPERSONNALIT\u00c9 DE MARQUE\n\n- \u00e9l\u00e9gante ;\n- sobre ;\n- chaleureuse ;\n- contemporaine ;\n- humaine.\n\n\u00c9MOTIONS \u00c0 TRANSMETTRE\n\n- confiance ;\n- qualit\u00e9 ;\n- calme ;\n- proximit\u00e9 ;\n- \u00e9l\u00e9gance.\n\n\u00c0 \u00c9VITER\n\n- univers startup ;\n- design futuriste ;\n- couleurs tr\u00e8s satur\u00e9es ;\n- d\u00e9grad\u00e9s technologiques ;\n- glassmorphism ;\n- effets 3D ;\n- interface trop corporate ;\n- design noir\/or trop luxueux ;\n- boutons syst\u00e9matiquement tr\u00e8s arrondis.\n\nUTILISATEURS\n\nPropri\u00e9taires de maisons ou appartements\nsouhaitant r\u00e9aliser des travaux de r\u00e9novation.\n\nOBJECTIF\n\nCr\u00e9er une identit\u00e9 visuelle distinctive,\nprofessionnelle et contemporaine.\n\nLe site ne doit pas donner l'impression\nd'avoir \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9 automatiquement.\n\nMISSION\n\nPropose une direction artistique compl\u00e8te.\n\nD\u00e9finis :\n\n1. le concept cr\u00e9atif ;\n2. l'ambiance g\u00e9n\u00e9rale ;\n3. une palette de couleurs ;\n4. l'usage pr\u00e9cis de chaque couleur ;\n5. les typographies recommand\u00e9es ;\n6. la hi\u00e9rarchie typographique ;\n7. le style photographique ;\n8. le traitement des images ;\n9. le style des boutons ;\n10. le style des cartes ;\n11. les formulaires ;\n12. les ic\u00f4nes ;\n13. la grille ;\n14. les espacements ;\n15. les bordures ;\n16. les ombres ;\n17. les animations ;\n18. le comportement responsive.\n\nPour chaque d\u00e9cision,\nexplique bri\u00e8vement pourquoi elle correspond\nau positionnement de la marque.\n\nNe cr\u00e9e pas encore la maquette du site.\n\nL'objectif est uniquement de construire\nun syst\u00e8me graphique coh\u00e9rent\nqui servira ensuite \u00e0 r\u00e9aliser les interfaces.<\/code><\/pre>\n\n    <\/section>\n\n\n    <section id=\"pistes\">\n\n        <h2>13. Demander plusieurs pistes cr\u00e9atives \u00e0 l\u2019IA<\/h2>\n\n        <p>\n            La premi\u00e8re proposition de l\u2019intelligence artificielle\n            ne doit pas n\u00e9cessairement devenir la direction d\u00e9finitive.\n        <\/p>\n\n        <p>\n            Nous pouvons lui demander d\u2019explorer plusieurs concepts :\n        <\/p>\n\n        <pre><code>\u00c0 partir du brief pr\u00e9c\u00e9dent,\npropose trois directions artistiques diff\u00e9rentes.\n\nPISTE A \u2014 \u00c9DITORIALE\n\nInspir\u00e9e des magazines d'architecture\net du design int\u00e9rieur.\n\nPISTE B \u2014 ARTISANALE CONTEMPORAINE\n\nDavantage centr\u00e9e sur les mati\u00e8res,\nle savoir-faire et l'humain.\n\nPISTE C \u2014 MINIMALISME ARCHITECTURAL\n\nTr\u00e8s sobre,\navec une forte utilisation des espaces\net de grandes photographies.\n\nPour chaque piste indique :\n\n- concept ;\n- palette ;\n- typographies ;\n- photographie ;\n- composants ;\n- mise en page ;\n- avantages ;\n- limites.\n\nLes trois propositions doivent r\u00e9ellement\n\u00eatre diff\u00e9rentes.\n\nNe cr\u00e9e pas simplement trois variantes\nde couleurs du m\u00eame design.<\/code><\/pre>\n\n        <p>\n            Nous pouvons ensuite comparer les diff\u00e9rentes directions\n            selon leur identit\u00e9, leur lisibilit\u00e9, leur accessibilit\u00e9,\n            leur adaptation mobile et leur coh\u00e9rence avec la cible.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"responsive\">\n\n        <h2>14. Adapter la direction artistique au responsive<\/h2>\n\n        <p>\n            Une direction artistique doit fonctionner\n            sur desktop, tablette et mobile.\n        <\/p>\n\n        <pre><code>DESKTOP\n\nGrande typographie\nCompositions asym\u00e9triques\nPhotographies larges\nEspacements importants\n\n\nMOBILE\n\n\u00c9chelle typographique r\u00e9duite\nComposition verticale\nMarges r\u00e9duites\nCTA accessibles\nD\u00e9corations simplifi\u00e9es<\/code><\/pre>\n\n        <p>\n            Le responsive ne doit pas d\u00e9truire la direction artistique.\n            Il doit <strong>l\u2019adapter au contexte d\u2019utilisation<\/strong>.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"accessibilite\">\n\n        <h2>15. Int\u00e9grer l\u2019accessibilit\u00e9 \u00e0 la direction artistique<\/h2>\n\n        <p>\n            Une interface esth\u00e9tique n\u2019est pas n\u00e9cessairement\n            une interface accessible.\n        <\/p>\n\n        <p>Il faut notamment contr\u00f4ler :<\/p>\n\n        <ul>\n            <li>le contraste entre le texte et le fond ;<\/li>\n            <li>la taille des textes ;<\/li>\n            <li>la lisibilit\u00e9 des typographies ;<\/li>\n            <li>les \u00e9tats de focus ;<\/li>\n            <li>l\u2019identification des boutons et des liens ;<\/li>\n            <li>les formulaires ;<\/li>\n            <li>les informations transmises uniquement par couleur ;<\/li>\n            <li>les animations.<\/li>\n        <\/ul>\n\n        <p>\n            Une palette parfaitement esth\u00e9tique dans un moodboard\n            peut devenir probl\u00e9matique lorsqu\u2019elle est utilis\u00e9e\n            pour afficher de v\u00e9ritables contenus.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"erreurs\">\n\n        <h2>Les erreurs \u00e0 \u00e9viter avec une direction artistique g\u00e9n\u00e9r\u00e9e par IA<\/h2>\n\n        <h3>Demander simplement un design \u00ab moderne \u00bb<\/h3>\n\n        <p>\n            Le terme est trop vague et conduit facilement\n            \u00e0 une interface g\u00e9n\u00e9rique.\n        <\/p>\n\n        <h3>Choisir les couleurs avant de d\u00e9finir la marque<\/h3>\n\n        <p>\n            La palette doit d\u00e9couler du positionnement et non l\u2019inverse.\n        <\/p>\n\n        <h3>Copier une r\u00e9f\u00e9rence<\/h3>\n\n        <p>\n            Une r\u00e9f\u00e9rence doit permettre d\u2019identifier des principes visuels,\n            pas de reproduire une interface existante.\n        <\/p>\n\n        <h3>Utiliser trop de styles diff\u00e9rents<\/h3>\n\n        <p>\n            Une interface coh\u00e9rente repose sur un ensemble limit\u00e9\n            de r\u00e8gles r\u00e9utilisables.\n        <\/p>\n\n        <h3>Ajouter des effets pour rendre le site \u00ab premium \u00bb<\/h3>\n\n        <p>\n            D\u00e9grad\u00e9s, animations, glassmorphism et effets 3D\n            ne rendent pas automatiquement une interface haut de gamme.\n        <\/p>\n\n        <h3>N\u00e9gliger les photographies<\/h3>\n\n        <p>\n            Une excellente interface associ\u00e9e \u00e0 de mauvaises images\n            perd imm\u00e9diatement une grande partie de sa qualit\u00e9 per\u00e7ue.\n        <\/p>\n\n        <h3>Utiliser trop de typographies<\/h3>\n\n        <p>\n            Une ou deux familles bien utilis\u00e9es\n            sont g\u00e9n\u00e9ralement plus efficaces.\n        <\/p>\n\n        <h3>Oublier l\u2019accessibilit\u00e9<\/h3>\n\n        <p>\n            Une direction artistique doit rester lisible et utilisable.\n        <\/p>\n\n        <h3>Laisser l\u2019IA prendre toutes les d\u00e9cisions<\/h3>\n\n        <p>\n            L\u2019intelligence artificielle peut acc\u00e9l\u00e9rer l\u2019exploration,\n            mais les choix doivent rester coh\u00e9rents avec\n            le positionnement r\u00e9el du projet.\n        <\/p>\n\n    <\/section>\n\n\n    <section id=\"checklist\">\n\n        <h2>Checklist : votre direction artistique est-elle pr\u00eate ?<\/h2>\n\n        <h3>Marque<\/h3>\n\n        <ul>\n            <li>Le positionnement est clairement d\u00e9fini.<\/li>\n            <li>Les valeurs de la marque sont identifi\u00e9es.<\/li>\n            <li>Les \u00e9motions \u00e0 transmettre sont connues.<\/li>\n            <li>Les \u00e9l\u00e9ments \u00e0 \u00e9viter sont d\u00e9finis.<\/li>\n        <\/ul>\n\n        <h3>Couleurs<\/h3>\n\n        <ul>\n            <li>La palette principale est d\u00e9finie.<\/li>\n            <li>Chaque couleur poss\u00e8de un r\u00f4le pr\u00e9cis.<\/li>\n            <li>Les contrastes sont suffisants.<\/li>\n        <\/ul>\n\n        <h3>Typographie<\/h3>\n\n        <ul>\n            <li>Les typographies principales sont s\u00e9lectionn\u00e9es.<\/li>\n            <li>La hi\u00e9rarchie typographique est d\u00e9finie.<\/li>\n            <li>Les tailles mobiles sont anticip\u00e9es.<\/li>\n        <\/ul>\n\n        <h3>Photographie<\/h3>\n\n        <ul>\n            <li>Le style photographique est clairement d\u00e9fini.<\/li>\n            <li>Les traitements sont coh\u00e9rents.<\/li>\n            <li>Les types d\u2019images \u00e0 \u00e9viter sont identifi\u00e9s.<\/li>\n        <\/ul>\n\n        <h3>Interface<\/h3>\n\n        <ul>\n            <li>Les boutons poss\u00e8dent des r\u00e8gles communes.<\/li>\n            <li>Les cartes utilisent le m\u00eame langage graphique.<\/li>\n            <li>Les formulaires sont d\u00e9finis.<\/li>\n            <li>Les ic\u00f4nes utilisent un style coh\u00e9rent.<\/li>\n        <\/ul>\n\n        <h3>Mise en page<\/h3>\n\n        <ul>\n            <li>Une grille est d\u00e9finie.<\/li>\n            <li>Une \u00e9chelle d\u2019espacement est utilis\u00e9e.<\/li>\n            <li>Les largeurs maximales sont d\u00e9finies.<\/li>\n        <\/ul>\n\n        <h3>Responsive et accessibilit\u00e9<\/h3>\n\n        <ul>\n            <li>La direction fonctionne sur desktop, tablette et mobile.<\/li>\n            <li>Les textes restent lisibles.<\/li>\n            <li>Les contrastes sont suffisants.<\/li>\n            <li>Les interactions restent facilement identifiables.<\/li>\n        <\/ul>\n\n    <\/section>\n\n\n    <section id=\"maquette-ui\">\n\n        <h2>De la direction artistique \u00e0 la maquette UI<\/h2>\n\n        <p>\n            Notre m\u00e9thodologie commence maintenant\n            \u00e0 prendre une forme tr\u00e8s concr\u00e8te.\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 des pages\n\n        \u2193\n\n04\nDIRECTION ARTISTIQUE\nD\u00e9finir l'identit\u00e9 visuelle<\/code><\/pre>\n\n        <p>\n            Nous disposons d\u00e9sormais d\u2019une\n            <strong>structure UX<\/strong> gr\u00e2ce au wireframe\n            et d\u2019un <strong>syst\u00e8me graphique<\/strong>\n            gr\u00e2ce \u00e0 la direction artistique.\n        <\/p>\n\n        <pre><code>WIREFRAME\nStructure\n\n        +\n\nDIRECTION ARTISTIQUE\nIdentit\u00e9\n\n        \u2193\n\nMAQUETTE UI\nInterface<\/code><\/pre>\n\n        <p>\n            Nous pouvons donc enfin commencer\n            \u00e0 r\u00e9unir ces diff\u00e9rents \u00e9l\u00e9ments pour concevoir\n            une v\u00e9ritable interface.\n        <\/p>\n\n        <p>\n            Dans le prochain article, nous verrons\n            <strong>\n                comment cr\u00e9er la maquette UI d\u2019un site web avec l\u2019IA\n                \u00e0 partir d\u2019un wireframe\n            <\/strong>,\n            comparer plusieurs propositions et corriger\n            les d\u00e9fauts typiques des interfaces g\u00e9n\u00e9r\u00e9es automatiquement.\n        <\/p>\n\n    <\/section>\n\n\n    <section class=\"article-faq\" id=\"faq\">\n\n        <h2>Questions fr\u00e9quentes sur la direction artistique web et l\u2019IA<\/h2>\n\n        <details>\n            <summary>\n                <strong>Qu\u2019est-ce qu\u2019une direction artistique pour un site web ?<\/strong>\n            <\/summary>\n\n            <p>\n                La direction artistique web d\u00e9finit l\u2019univers visuel d\u2019un site :\n                couleurs, typographies, photographies, composants,\n                espacements, mise en page et animations.\n                Elle permet de traduire l\u2019identit\u00e9 d\u2019une marque\n                dans son interface num\u00e9rique.\n            <\/p>\n        <\/details>\n\n        <details>\n            <summary>\n                <strong>Peut-on cr\u00e9er une direction artistique avec l\u2019IA ?<\/strong>\n            <\/summary>\n\n            <p>\n                Oui. L\u2019intelligence artificielle peut aider \u00e0 explorer\n                des concepts cr\u00e9atifs, des palettes, des associations typographiques\n                et des principes graphiques. Elle doit cependant disposer\n                d\u2019un brief pr\u00e9cis sur la marque, sa cible et son positionnement.\n            <\/p>\n        <\/details>\n\n        <details>\n            <summary>\n                <strong>Quelle est la diff\u00e9rence entre un wireframe et une direction artistique ?<\/strong>\n            <\/summary>\n\n            <p>\n                Le wireframe d\u00e9finit la structure et la hi\u00e9rarchie\n                des informations d\u2019une page.\n                La direction artistique d\u00e9finit ensuite\n                la mani\u00e8re dont ces \u00e9l\u00e9ments seront repr\u00e9sent\u00e9s visuellement.\n            <\/p>\n        <\/details>\n\n        <details>\n            <summary>\n                <strong>Comment \u00e9viter un design g\u00e9n\u00e9rique g\u00e9n\u00e9r\u00e9 par IA ?<\/strong>\n            <\/summary>\n\n            <p>\n                Il faut \u00e9viter les instructions trop g\u00e9n\u00e9rales\n                et fournir \u00e0 l\u2019IA un v\u00e9ritable cadre cr\u00e9atif :\n                positionnement, valeurs, \u00e9motions, r\u00e9f\u00e9rences,\n                \u00e9l\u00e9ments \u00e0 \u00e9viter, palette, typographies,\n                style photographique et r\u00e8gles d\u2019interface.\n            <\/p>\n        <\/details>\n\n        <details>\n            <summary>\n                <strong>Qu\u2019est-ce qu\u2019un design system ?<\/strong>\n            <\/summary>\n\n            <p>\n                Un design system rassemble les r\u00e8gles et composants\n                utilis\u00e9s pour maintenir la coh\u00e9rence d\u2019une interface :\n                couleurs, typographies, espacements, boutons,\n                formulaires, cartes, ic\u00f4nes et autres composants r\u00e9utilisables.\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>","protected":false},"excerpt":{"rendered":"<p>Intelligence artificielle &amp; cr\u00e9ation web Comment d\u00e9finir une direction artistique pour un site web avec l\u2019IA ? Apr\u00e8s avoir d\u00e9fini le cahier des charges, construit l\u2019arborescence et organis\u00e9 chaque page sous forme de wireframe, notre site poss\u00e8de d\u00e9sormais une structure solide. Nous savons quelles pages cr\u00e9er, quelles informations afficher et dans quel ordre les pr\u00e9senter. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3523,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[44,5,24],"tags":[],"class_list":["post-3516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ia","category-visual","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 direction artistique 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-direction-artistique-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 direction artistique web avec l\u2019IA ? - afannou digital consulting\" \/>\n<meta property=\"og:description\" content=\"Intelligence artificielle &amp; cr\u00e9ation web Comment d\u00e9finir une direction artistique pour un site web avec l\u2019IA ? Apr\u00e8s avoir d\u00e9fini le cahier des charges, construit l\u2019arborescence et organis\u00e9 chaque page sous forme de wireframe, notre site poss\u00e8de d\u00e9sormais une structure solide. Nous savons quelles pages cr\u00e9er, quelles informations afficher et dans quel ordre les pr\u00e9senter. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/afannoudigitalconsulting.com\/en\/comment-creer-une-direction-artistique-web-avec-lia\/\" \/>\n<meta property=\"og:site_name\" content=\"afannou digital consulting\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-31T21:20:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-31T21:25:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/afannoudigitalconsulting.com\/wp-content\/uploads\/2026\/08\/DA-1024x683.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\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-direction-artistique-web-avec-lia\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-direction-artistique-web-avec-lia\\\/\"},\"author\":{\"name\":\"kevine\",\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/#\\\/schema\\\/person\\\/54ab4c35294b3cf98a9189780b62624c\"},\"headline\":\"Comment cr\u00e9er une direction artistique web avec l\u2019IA ?\",\"datePublished\":\"2026-08-31T21:20:40+00:00\",\"dateModified\":\"2026-08-31T21:25:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-direction-artistique-web-avec-lia\\\/\"},\"wordCount\":2105,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-direction-artistique-web-avec-lia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/DA.png\",\"articleSection\":[\"IA\",\"Visual\",\"Web\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-direction-artistique-web-avec-lia\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-direction-artistique-web-avec-lia\\\/\",\"url\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-direction-artistique-web-avec-lia\\\/\",\"name\":\"Comment cr\u00e9er une direction artistique web avec l\u2019IA ? - afannou digital consulting\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-direction-artistique-web-avec-lia\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-direction-artistique-web-avec-lia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/DA.png\",\"datePublished\":\"2026-08-31T21:20:40+00:00\",\"dateModified\":\"2026-08-31T21:25:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-direction-artistique-web-avec-lia\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-direction-artistique-web-avec-lia\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-direction-artistique-web-avec-lia\\\/#primaryimage\",\"url\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/DA.png\",\"contentUrl\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/DA.png\",\"width\":1536,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/comment-creer-une-direction-artistique-web-avec-lia\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/afannoudigitalconsulting.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comment cr\u00e9er une direction artistique 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 direction artistique 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-direction-artistique-web-avec-lia\/","og_locale":"en_GB","og_type":"article","og_title":"Comment cr\u00e9er une direction artistique web avec l\u2019IA ? - afannou digital consulting","og_description":"Intelligence artificielle &amp; cr\u00e9ation web Comment d\u00e9finir une direction artistique pour un site web avec l\u2019IA ? Apr\u00e8s avoir d\u00e9fini le cahier des charges, construit l\u2019arborescence et organis\u00e9 chaque page sous forme de wireframe, notre site poss\u00e8de d\u00e9sormais une structure solide. Nous savons quelles pages cr\u00e9er, quelles informations afficher et dans quel ordre les pr\u00e9senter. [&hellip;]","og_url":"https:\/\/afannoudigitalconsulting.com\/en\/comment-creer-une-direction-artistique-web-avec-lia\/","og_site_name":"afannou digital consulting","article_published_time":"2026-08-31T21:20:40+00:00","article_modified_time":"2026-08-31T21:25:21+00:00","og_image":[{"width":1024,"height":683,"url":"https:\/\/afannoudigitalconsulting.com\/wp-content\/uploads\/2026\/08\/DA-1024x683.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-direction-artistique-web-avec-lia\/#article","isPartOf":{"@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-direction-artistique-web-avec-lia\/"},"author":{"name":"kevine","@id":"https:\/\/afannoudigitalconsulting.com\/#\/schema\/person\/54ab4c35294b3cf98a9189780b62624c"},"headline":"Comment cr\u00e9er une direction artistique web avec l\u2019IA ?","datePublished":"2026-08-31T21:20:40+00:00","dateModified":"2026-08-31T21:25:21+00:00","mainEntityOfPage":{"@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-direction-artistique-web-avec-lia\/"},"wordCount":2105,"commentCount":0,"publisher":{"@id":"https:\/\/afannoudigitalconsulting.com\/#organization"},"image":{"@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-direction-artistique-web-avec-lia\/#primaryimage"},"thumbnailUrl":"https:\/\/afannoudigitalconsulting.com\/wp-content\/uploads\/2026\/08\/DA.png","articleSection":["IA","Visual","Web"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/afannoudigitalconsulting.com\/comment-creer-une-direction-artistique-web-avec-lia\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-direction-artistique-web-avec-lia\/","url":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-direction-artistique-web-avec-lia\/","name":"Comment cr\u00e9er une direction artistique web avec l\u2019IA ? - afannou digital consulting","isPartOf":{"@id":"https:\/\/afannoudigitalconsulting.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-direction-artistique-web-avec-lia\/#primaryimage"},"image":{"@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-direction-artistique-web-avec-lia\/#primaryimage"},"thumbnailUrl":"https:\/\/afannoudigitalconsulting.com\/wp-content\/uploads\/2026\/08\/DA.png","datePublished":"2026-08-31T21:20:40+00:00","dateModified":"2026-08-31T21:25:21+00:00","breadcrumb":{"@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-direction-artistique-web-avec-lia\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/afannoudigitalconsulting.com\/comment-creer-une-direction-artistique-web-avec-lia\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-direction-artistique-web-avec-lia\/#primaryimage","url":"https:\/\/afannoudigitalconsulting.com\/wp-content\/uploads\/2026\/08\/DA.png","contentUrl":"https:\/\/afannoudigitalconsulting.com\/wp-content\/uploads\/2026\/08\/DA.png","width":1536,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/afannoudigitalconsulting.com\/comment-creer-une-direction-artistique-web-avec-lia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/afannoudigitalconsulting.com\/"},{"@type":"ListItem","position":2,"name":"Comment cr\u00e9er une direction artistique 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\/3516","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=3516"}],"version-history":[{"count":6,"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/posts\/3516\/revisions"}],"predecessor-version":[{"id":3522,"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/posts\/3516\/revisions\/3522"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/media\/3523"}],"wp:attachment":[{"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/media?parent=3516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/categories?post=3516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/afannoudigitalconsulting.com\/en\/wp-json\/wp\/v2\/tags?post=3516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}