[partie 2/3] Création d’un cahier des charges : Charte graphique et maquette

Pour l’architecture du site, vous devez réfléchir à ce que vous souhaitez avant de commencer :

Dans cette partie, vous transformez votre intention en structure visuelle : identité, maquettes, contenus et arborescence.

1. La charte graphique :

Si vous débutez, retenez ceci : la charte graphique sert à garder un site cohérent et professionnel. Elle évite de changer de style d’une page à l’autre et facilite le travail de toute l’équipe.

Construisez votre charte en 5 étapes simples.

1. Choisissez 2 à 3 couleurs principales (et 1 couleur d’accent) avec leurs codes HEX #FF6E65.
2. Définissez les typographies : une police pour les titres, une pour le texte courant.
3. Précisez les logos à utiliser : version principale, version inversée, favicon, marges de sécurité.
4. Fixez les règles visuelles : style des boutons, icônes, blocs, images, bordures, espacements.
5. Ajoutez des exemples concrets : une section d’accueil type, une carte service type, un appel à l’action type.

Pour être vraiment exploitable, votre charte doit aussi indiquer le ton rédactionnel (vouvoiement/tutoiement, niveau de langage), les règles d’usage des visuels (photos, pictogrammes, illustrations IA), et les interdits de marque (couleurs, expressions ou styles à éviter).

• Livrables minimaux : logo principal + variantes, palette couleurs, typographies, règles d’usage, exemples de mise en page.
• Repères marketing : image de marque attendue, promesse client, éléments différenciant à faire ressortir.
• Repères opérationnels : qui valide la charte, à quelle date, et avec quelle version finale.

Ressources utiles : Canva | Adobe | exemples de chartes.

Pour choisir les polices : Google Fonts (intégré à WordPress et elementor), Adobe Fonts, DaFont, MyFonts. Pour les couleurs : Adobe Color, Canva.

2. Wireframe et maquettage :

Ajoutez à votre cahier des charges toutes les maquettes et prototypes de vos idées concernant le résultat que vous aimeriez obtenir avec ce site internet.

Les maquettes contiennent :

L’arborescence du site (les rubriques, sous-rubriques, types d’URL etc…), L’architecture des informations concernant l’ensemble de ces pages

Une maquette utile ne montre pas seulement le design : elle montre aussi le parcours. Pensez à prévoir les versions desktop et mobile, les zones de conversion (CTA), les emplacements de preuves de confiance (avis, références, garanties), et la hiérarchie visuelle de chaque écran.

• Pages à maquetter en priorité : accueil, service, à propos, contact, page article, page catégorie, pages légales.
• Pour un site commercial : ajouter panier, tunnel de commande, page confirmation et e-mails clés.
• Validation technique : faisabilité WordPress/constructeur, poids des médias, lisibilité mobile.

https://www.sitew.com/Comment-designer-un-site-web/maquette-site

Si vous souhaitez utiliser le logiciel Figma, https://www.figma.com je vous renvoie vers le cours OpenClassrooms pour des conseils de prise en main et connaître les possibilités du logiciel :  https://openclassrooms.com/fr/courses/7342806-creez-une-maquette-web-avec-figma/7458079-prenez-en-main-figma

Exemple 2, mock-up pour site web

Ces 2 exemples ont été glanés sur freepik.

3. Spécificités, contenu et arborescence :

Cette partie est souvent la plus difficile quand on débute. L’objectif est simple : expliquer, page par page, ce que le visiteur doit trouver et ce qu’il doit faire.

Méthode guidée : commencez par une arborescence minimale, puis enrichissez-la. Ne cherchez pas à tout faire d’un coup.

1. Listez les pages indispensables : Accueil, À propos, Services, Contact, Mentions légales/Confidentialité.
2. Ajoutez les pages liées à votre activité : Blog, Boutique, FAQ, Réservations, Portfolio, etc.
3. Pour chaque page, notez en une phrase son objectif principal (informer, rassurer, faire contacter, vendre).
4. Définissez l’action attendue sur chaque page (CTA) : appeler, envoyer un formulaire, demander un devis, acheter.
5. Organisez le menu de navigation : 5 à 7 entrées maximum pour rester lisible.
6. Vérifiez le parcours utilisateur : en 3 clics, un visiteur doit trouver l’information qu’il cherche.

Contenu minimum à préciser dans le cahier des charges pour chaque page : titre de page, objectif, public visé, blocs de contenu prévus, médias nécessaires, appel à l’action et contraintes SEO (H1, intention, mots-clés principaux).

• Page d’accueil + pages de présentation de l’entreprise.
• Page blog et/ou boutique selon votre modèle.
• Page de contact (formulaire, e-mail, téléphone, horaires, zone d’intervention).
• Détail de chaque page pour justifier son utilité dans le parcours client.

Exemple de propositions à partir de modèles (freepik)

https://www.freepik.com/search?format=search&last_filter=type&last_value=mockup&query=wireframe&type=mockup

Le nouveau venu dans la création de wireframes : Google Stitch https://stitch.withgoogle.com/.

Google Stitch peut vous aider à générer rapidement des idées de maquette, même si vous n’êtes pas designer. Le bon réflexe : l’utiliser pour explorer, puis sélectionner une version claire à intégrer dans votre cahier des charges.

1. Commencez par un écran à la fois (exemple : page d’accueil), pas tout le site en une seule demande.
2. Décrivez l’objectif de l’écran : informer, rassurer, faire cliquer, vendre, etc.
3. Donnez le contexte : cible, secteur, ton souhaité, style visuel, contraintes de marque (couleurs, typographies).
4. Demandez 2 à 3 variantes pour comparer les structures et choisir la plus lisible.
5. Ajustez par courtes itérations : « plus simple », « plus aéré », « CTA plus visible », « version mobile ».
6. Validez avec votre grille : clarté du message, hiérarchie visuelle, CTA, cohérence avec la charte.

Exemple de prompt : « Crée une maquette de page d’accueil pour une entreprise de formation WordPress destinée au grand public. Style clair, professionnel et pédagogique. Prévois un titre fort, un bloc bénéfices, une section preuves (avis/chiffres), et un bouton d’action « Demander un accompagnement ». Propose aussi une version mobile. »

Conseil pratique : ne validez jamais une proposition juste parce qu’elle est jolie. Vérifiez toujours si elle aide vraiment l’utilisateur à comprendre l’offre et à passer à l’action.

4. Points de validation avant passage en partie 3

Avant de passer au budget et au prévisionnel, vérifiez que votre partie 2 est réellement exploitable par un prestataire, un correcteur ou une équipe interne.

• Marketing : les cibles comprennent-elles immédiatement l’offre et la proposition de valeur ?
• Technique : l’arborescence et les gabarits sont-ils réalisables sans blocage majeur ?
• Opérationnel : les responsabilités, délais et validations intermédiaires sont-ils clairement définis ?
• SEO éditorial : chaque type de page prévoit-il un H1, une intention de recherche, et un contenu attendu ?
• Juridique minimum : pages obligatoires, mentions, politique de confidentialité et gestion des formulaires.

Si ces points sont validés, votre partie 2 est suffisamment complète pour lancer la planification technique et financière de la partie 3.

Votre projet est cadré : vous pouvez passer à la suite, dédiée au budget, aux fonctions et à la temporalité.

Conclusion

Vous avez défini le cadre visuel et structurel du projet : charte, maquettes, arborescence et contenus attendus. Cette étape réduit fortement les malentendus au moment de la production.

Navigation : Partie 1 — Votre projet et vous | Partie 3 — Contraintes techniques et prévisionnel.