Explorer
SITE-SPEC-001

SITE-SPEC Template — ADN d'un site

Domaine
web-uiux
Type
site-spec
Priorité
P2

Parent : [[INDEX-WEB-UIUX]]

SITE-SPEC Template — ADN d'un site

Ce template rassemble les décisions nécessaires avant de construire un site. Les exemples ne sont jamais des valeurs par défaut : une valeur non justifiée reste vide jusqu'au brief, à l'audit du contenu ou à une référence validée.

1. Cible

  • Nom / identité :
  • Objectif : landing / saas / vitrine / e-commerce / blog / portfolio
  • Audience :
  • Références : []
  • Inspirations : []

2. Tokens visuels

Token Valeur
Background primary À définir depuis l'identité et le contraste requis
Text primary À définir avec un ratio vérifié
Accent À réserver aux actions et états utiles
Font heading À choisir selon la voix et les contraintes de chargement
Font body À choisir d'abord pour la lecture
Border radius À dériver du langage formel, pas d'un preset
Grid À définir selon contenu, largeur et rythme
Shadows Aucune par défaut ; ajouter seulement si elles expliquent la profondeur

3. Layout & Sections

  • Navigation : architecture, libellés et comportement mobile
  • Entrée de page : contenu prioritaire et action correspondant au besoin réel
  • Preuves : uniquement éléments vérifiables et contextualisés
  • Corps de page : ordre narratif défini par les questions de l'utilisateur
  • Conversion : prochaine étape proportionnée, sans pression artificielle
  • Pied de page : contact, navigation secondaire et obligations applicables

Ne pas ajouter automatiquement hero plein écran, grille de trois cartes, témoignages, tarification ou FAQ. Chaque section doit répondre à une question documentée.

4. Motion & Interactions

  • Rôle de chaque mouvement : orientation, causalité, feedback ou continuité
  • Durée et easing : mesurés dans le contexte, jamais copiés comme signature automatique
  • Interaction : aucun déplacement de mise en page au survol ou au focus
  • Scroll : natif par défaut ; effet spécial seulement s'il conserve clavier, mobile et mouvement réduit
  • Repli : comportement complet avec prefers-reduced-motion

5. Composants clés

  • Inventaire dérivé des tâches et du contenu, avec états vide, chargement, erreur, succès et désactivé.
  • Contrats clavier, focus, lecteur d'écran et responsive renseignés pour chaque composant interactif.
  • Aucun composant décoratif ajouté uniquement pour remplir une grille.

6. Contenu

  • Tone :
  • Headlines : []
  • CTAs : []
  • Images : []
  • Liens : []

7. Tech Stack

  • Framework : à décider depuis le rendu, les données, l'équipe et la maintenance
  • Styles : CSS, utilitaires ou composants selon le système existant
  • UI kit : optionnel ; licence, accessibilité et coût d'adaptation vérifiés
  • Animation : CSS natif avant une dépendance, sauf séquences réellement complexes
  • Hébergement : compatible avec l'infrastructure cible, notamment VPS/Nginx lorsque retenu
  • Mesure : seulement avec finalité, minimisation et obligations applicables
  • Contenu : format choisi selon fréquence, contributeurs et besoin de prévisualisation

8. Prod Requirements

  • SEO : meta, OG, sitemap, schema.org
  • Performance : images WebP/AVIF, lazy, edge cache
  • Accessibilité : WCAG 2.1 AA
  • Sécurité : HTTPS, CSP, headers
  • i18n : fr / en
  • Légal : classification complétée ci-dessous
  • CI/CD : preview + tests (Lighthouse, Axe)
  • Monitoring : uptime, Sentry

8.1 Classification légale du projet

Référence détaillée : KNOW-PAT-210. Ne jamais ajouter automatiquement CGV, bannière cookies ou médiateur sans condition applicable.

Obligatoire pour ce projet

  • Mentions légales et hébergeur
  • Propriété intellectuelle, licences et crédits
  • Confidentialité/RGPD si traitement de données personnelles
  • Information au niveau de chaque formulaire
  • Sécurité, minimisation et durées de conservation
  • Liens juridiques accessibles depuis toutes les pages
  • Autres obligations déclenchées :

Conditions à examiner

  • Traceurs non essentiels → consentement cookies
  • Vente B2C → CGV, rétractation, garanties, médiateur
  • Abonnement → durée, renouvellement et résiliation électronique
  • Newsletter/prospection → consentement ou opposition selon le destinataire
  • Compte utilisateur → règles, export, suppression et conservation
  • Avis/comparateur/marketplace → transparence spécifique
  • Contenus utilisateurs → modération, signalement et DSA
  • Mineurs → protections renforcées
  • Activité réglementée → mentions professionnelles
  • Service dans le champ accessibilité → déclaration et conformité
  • API/données/téléchargement → licence et conditions d'usage
  • International → droit, fiscalité et transferts adaptés

Non applicable — justification obligatoire

  • CGV :
  • CGU :
  • Bandeau cookies :
  • Médiateur :
  • Accessibilité réglementaire :
  • Autre :

Recommandé retenu

  • Contact, security.txt et canal de vulnérabilité
  • Licence claire, date de mise à jour et historique
  • Accessibilité de base même hors obligation formelle
  • Page de statut et politique de disponibilité si service/API

9. KPIs

  • Budgets Web Vitals définis par type de page et appareil cible.
  • Zéro erreur bloquante aux tests automatisés d'accessibilité, complétés par clavier et lecteur d'écran.
  • Aucun déplacement de layout ou mouvement involontaire dans les interactions critiques.
  • Taux de réussite de la tâche principale et erreurs de formulaire suivis si mesurables légalement.