Brief Extraction

3. Formulaire Notion (si rempli)

• Secteur d'activité
• Concurrents identifiés
• Sites admirés (avec commentaires)
• Ton de communication souhaité
• Fonctionnalités prioritaires

4. Benchmark concurrentiel

• Résultats du competitor-benchmark si réalisé
• Opportunités visuelles identifiées

Production de la Direction Artistique

Structure du Document DA

# Direction Artistique — [Nom du Projet]
Date : [date]
Client : [Nom]
Secteur : [secteur]

## 1. Positionnement & Personnalité de Marque

### Mots-clés d'image
[3-5 mots qui définissent l'univers visuel]
Ex : Premium — Épuré — Confiance — Innovation — Chaleur

### Ton de communication
[Description du ton : formel/informel, tutoiement/vouvoiement,
technique/accessible, sérieux/décalé]

### Cible principale
[Description du persona principal : âge, profession, attentes,
niveau tech, device principal]

## 2. Palette de Couleurs

### Couleurs principales
- **Primaire** : #[HEX] — [Nom descriptif] — [Usage : CTAs, liens, accents]
- **Secondaire** : #[HEX] — [Nom descriptif] — [Usage : backgrounds, hover]

### Couleurs neutres
- **Texte principal** : #[HEX] — [Utilisation]
- **Texte secondaire** : #[HEX] — [Utilisation]
- **Background principal** : #[HEX]
- **Background secondaire** : #[HEX]
- **Bordures / Séparateurs** : #[HEX]

### Couleurs d'accent
- **Succès** : #[HEX]
- **Erreur** : #[HEX]
- **Warning** : #[HEX]

### Ratio de contraste
- Texte sur fond : minimum 4.5:1 (WCAG AA)
- Grands textes : minimum 3:1

### Exemples de palettes par secteur

**Restaurant / Food :**
- Tons chauds (terracotta, crème, olive)
- Noir profond + or pour le premium
- Vert + blanc pour le healthy

**Tech / SaaS :**
- Bleu électrique + violet (confiance + innovation)
- Fond sombre + accents néon
- Gradients subtils

**Immobilier :**
- Bleu marine + or (luxe)
- Vert sauge + beige (éco-responsable)
- Noir + blanc + bois

**Santé / Bien-être :**
- Vert doux + blanc + beige
- Bleu ciel + lavande
- Tons pastels apaisants

**Artisan / BTP :**
- Bleu foncé + jaune/orange (fiabilité + énergie)
- Gris anthracite + vert
- Tons terreux + accents vifs

## 3. Typographie

### Heading Font
- **Nom** : [Ex: "Space Grotesk"]
- **Source** : Google Fonts / Adobe Fonts / Variable font
- **Poids utilisés** : Bold (700), Medium (500)
- **Usage** : titres, sous-titres, éléments d'impact

### Body Font
- **Nom** : [Ex: "Inter"]
- **Source** : Google Fonts
- **Poids utilisés** : Regular (400), Medium (500), SemiBold (600)
- **Usage** : paragraphes, navigation, labels

### Échelle typographique
```css
--font-hero: clamp(3rem, 8vw, 6rem);     /* Hero headline */
--font-h1: clamp(2.5rem, 5vw, 4rem);     /* Page titles */
--font-h2: clamp(1.75rem, 3vw, 2.5rem);  /* Section titles */
--font-h3: clamp(1.25rem, 2vw, 1.75rem); /* Subsections */
--font-body: clamp(1rem, 1.2vw, 1.125rem); /* Body text */
--font-small: 0.875rem;                   /* Captions, labels */
--line-height-heading: 1.1;
--line-height-body: 1.6;

Recommandations typographiques par positionnement

Premium / Luxe : Serif élégante (Playfair Display, Cormorant) + Sans-serif clean (Inter, Outfit) Tech / Moderne : Géométrique (Space Grotesk, Syne) + Neutre (Inter, DM Sans) Créatif / Artistique : Display font forte (Clash Display, Cabinet Grotesk) + Readable body Traditionnel / Confiance : Serif classique (Lora, Source Serif) + Sans-serif neutre

4. Ambiance & Références Visuelles

Moodboard

[Description de l'ambiance générale : lumière, texture, espace, densité d'information, ratio texte/image]

Sites de référence

Pour chaque référence (3-5 sites) :

• URL : [lien]
• Ce qu'on retient : [élément spécifique à s'inspirer]
• Ce qu'on ne reprend pas : [si applicable]
• Screenshot annoté : [si possible]

Style photographique

• [Style : lifestyle, corporate, artistique, produit, etc.]
• [Traitement : lumineux, contrasté, désaturé, coloré, etc.]
• [Cadrage : plans larges, portraits, détails, etc.]
• Sources recommandées si photos stock : Unsplash, Pexels (collections spécifiques)

Iconographie

• Style : outlined / filled / duotone
• Épaisseur : 1.5px / 2px
• Source recommandée : Lucide Icons, Phosphor Icons, custom

5. Plan d'Animations

Philosophie d'animation

[Ex: "Animations subtiles et fluides qui guident l'oeil sans distraire. Chaque animation a un but : révéler du contenu, créer de la profondeur, ou guider l'interaction."]

Animations globales

• Smooth scroll : Lenis, vitesse [valeur], easing [type]
• Loader initial : [description si applicable]
• Transitions de page : [description si applicable]
• Cursor personnalisé : [oui/non, description si oui]

Animations par section

Homepage :
  Hero :
    - Titre : split text, reveal par mot, stagger 0.05s
    - Image/Vidéo : clip-path reveal ou scale-in
    - CTA : fade-up avec delay

  Section Services :
    - Cards : stagger fade-up au scroll
    - Icônes : draw SVG au scroll

  Section Références :
    - Galerie : horizontal scroll ou parallax
    - Images : reveal au scroll avec clip-path

  Section Témoignages :
    - Carousel auto ou scroll horizontal

  CTA Final :
    - Text reveal + animation background

  Footer :
    - Fade-in éléments au scroll

Paramètres techniques

Durée standard : 0.8s - 1.2s
Easing : cubic-bezier(0.25, 0.46, 0.45, 0.94) ou "power2.out"
Stagger : 0.05s - 0.1s entre éléments
ScrollTrigger start : "top 80%"
ScrollTrigger end : "bottom 20%"

6. Structure du Site (Sitemap)

/ (Homepage)
├── /a-propos (ou /about)
├── /services
│   ├── /services/[service-1]
│   └── /services/[service-2]
├── /realisations (ou /portfolio)
├── /contact
└── /mentions-legales

Pour chaque page, lister :

• Les sections prévues (dans l'ordre)
• Le contenu attendu par section
• Les CTAs de chaque page

## Processus d'Extraction

1. **Rassembler** toutes les sources (emails, notes, Notion, assets)
2. **Analyser** le logo pour en extraire des indices de style
3. **Croiser** les références du client avec les standards Awwwards
4. **Définir** la palette en partant du logo + secteur + positionnement
5. **Sélectionner** la typographie cohérente avec la personnalité
6. **Planifier** les animations adaptées au contenu et au secteur
7. **Documenter** le tout dans Notion (page dédiée au projet)
8. **Valider** en interne avant de commencer les maquettes

## Intégration

- Alimenté par **onboarding-email-sequence** (assets reçus) et **competitor-benchmark**
- Consulte **awwwards-standards** pour les références qualité
- Sert de base au travail de design dans **sprint-planning** (J1-J2)
- Les choix DA sont justifiés dans **maquette-presentation**