4. Définir votre cahier des charges graphique & technique

Objectif : lister les fonctionnalités techniques et l'allure graphique de votre projet, sous une forme qu'un agent IA peut exécuter sans ambiguïté.

Ce document ne sert pas seulement à cadrer le projet : c'est lui qui construit le site. L'agent appliquera ce qui est écrit, et rien d'autre. Tout ce que vous laissez flou, l'IA le comblera à sa manière, généralement par la solution la plus banale.

L'allure du site / partie graphique

Voici les questions que vous devez vous poser à ce stade :

Allez-vous utiliser un logo ? Si oui, il faudra en créer un ou en trouver un prêt à l'emploi, au format SVG ou PNG. Sinon, une belle typo suffit pour donner du poids au nom de votre site.

Quelles couleurs et typographies ? Après vos recherches aux étapes 1 et 2, c'est le moment de faire des choix et de vous fixer ! En général, une palette de 5 ou 6 couleurs suffit, avec 2 typos maximum.

Nouveau : pour l'agent, une couleur se donne en code hexadécimal (ex. #1F3A5F) avec son rôle : fond, texte, titres, liens, boutons, survol… « Un bleu dynamique » ne veut rien dire pour une IA. Même chose pour les typos : leur nom exact dans Google Fonts, et à quoi sert chacune (titres, texte courant).

Quelles images utiliser ? Photos libres de droits sur Pixabay, illustrations gratuites sur unDraw (le petit plus : vous choisissez la couleur des illustrations !) ou Flexiple.

Lecture recommandée : les palettes de couleurs pour site web (99designs).

Les fonctionnalités

Quelles fonctionnalités votre site doit-il proposer en plus de pages et d'articles ? Listez-les. Restez simples, il ne s'agit que d'un site personnel !

Exemples : formulaire de contact, boutons de partage, mesure d'audience, galerie photo, téléchargement du CV en PDF…

NB : seules les mentions légales et la page de confidentialité sont obligatoires (cf. étape 9). Le formulaire de contact et la mesure d'audience sont facultatifs.

Pas de sécurité ni de mises à jour à gérer. Votre site sera « statique » : de simples pages HTML, sans interface d'administration, sans base de données, sans PHP. Il n'y a donc pratiquement rien à pirater, et rien à mettre à jour.

N'hésitez pas à venir me poser des questions si vous avez des besoins particuliers : j'aurai certainement une solution à vous proposer ! (ou je peux aussi vous dire que votre idée n'est pas réalisable…)

Rédiger le cahier des charges

Rassemblez tout ce travail dans un seul document, en suivant le modèle ci-dessous. Rédigez-le dans une IA conversationnelle (Gemini, etc.), pas dans Antigravity : vous économiserez votre quota d'agent pour la construction.

# Cahier des charges – [Nom du site]

## 1. Contexte et objectif
Le sujet du site, à qui il s'adresse, ce qu'il doit accomplir, en 3 à 5 phrases.

## 2. Cible
Mon persona principal : qui il est, ce qu'il cherche sur mon site.

## 3. Ton
Le ton choisi + 2 ou 3 phrases d'exemple écrites « à la manière du site ».

## 4. Arborescence
Chaque page avec son adresse : /, /a-propos, /[categorie], /[categorie]/[page]…
Pour chaque page : son type (pilier, fille, catégorie, statique)
et sa requête cible (carte des mots-clés de la séance 2).

## 5. Modèles de pages
Pour chaque maquette (accueil, page d'article, liste d'une catégorie) :
les zones dans l'ordre, de haut en bas, et ce que contient chacune.
(Les maquettes sont jointes en image.)

## 6. Charte graphique
Couleurs : code hexa + rôle de chacune.
Typos : nom Google Fonts + usage.
Style général : coins arrondis ou non, ombres ou non, aéré ou dense…
Sites de référence : liens ou captures + ce que je veux en reprendre.

## 7. Fonctionnalités
La liste, avec pour chacune ce qu'elle doit faire concrètement.

## 8. SEO
Pour chaque page : title, meta description, titre H1.
Liens internes : chaque page fille renvoie vers sa page pilier, et inversement.
Données structurées souhaitées (article, FAQ, fil d'Ariane…).

## 9. Ce que je ne veux pas
Ce qu'il faut éviter (animations, carrousels, couleurs, formulations…).

## 10. Critères de validation
Ce que je vérifierai pour valider chaque page : affichage mobile,
un seul H1, aucun texte provisoire, score PageSpeed…

Conseil : une fois votre cahier des charges terminé, demandez à l'IA conversationnelle : « Relis ce cahier des charges comme si tu devais construire le site. Liste toutes les questions que tu te poserais et tous les points ambigus. » Corrigez, puis recommencez jusqu'à ce qu'elle n'ait plus de question sérieuse. Gardez chaque version : elles feront partie de votre compte-rendu.

Le fichier de règles de l'agent

Le projet de départ que je vous fournis (le « starter », cf. étape 5) contient un fichier de règles que l'agent lit automatiquement avant chaque tâche. Il fixe le cadre technique : la technologie utilisée, l'organisation des fichiers, les interdits.

Vous n'y touchez pas, sauf à une section, « Identité du projet », que vous compléterez avec un résumé de votre cahier des charges : nom du site, cible, ton, couleurs, typos. L'agent aura ainsi ces informations sous les yeux à chaque demande, sans que vous ayez à les répéter.

← 3. Maquettage · 5. Installer votre environnement et prendre en main l'agent →