Briefing du Directeur de Création Senior pour le Concept de Conception Web

**Concept créatif - ${company_name}** **1. Le concept (l'idée maîtresse)** Une expérience éditoriale lente et immersive qui traite chaque page comme une double page de magazine de luxe - où l'espace négatif est un outil de pouvoir, pas un vide. Le récit se déploie par couches : d'abord l'impact visuel brut, puis le détail, puis l'intention. Le site ne vend pas des services - il documente une philosophie. **2. Stratégie de mise en page par page** - **Accueil** : Défilement vertical lent avec sections plein écran. Grille asymétrique 12 colonnes cassée - le contenu s'aligne à 30/70 ou 70/30, jamais centré. Les transitions entre sections utilisent des fondus longs (800ms+). - **À propos** : Structure narrative en chapitres. Défilement horizontal sur desktop pour simuler la lecture d'un livre. Sur mobile, empilement vertical avec indicateurs de progression. - **Services/Projets** : Grille 2 colonnes avec images ratio 4:5. Au survol, l'image se dézoome légèrement (scale 1.02) et un texte descriptif apparaît en overlay avec un délai de 300ms. - **Contact** : Page quasi vide - un formulaire minimal centré en bas, précédé d'une déclaration forte en typographie géante. **3. Direction typographique et couleur** - **Typographie** : Serif display (ex. "Canela" ou "Tiempos Headline") pour les titres en tailles massives (clamp 3rem à 8rem). Sans-serif neutre (ex. "Neue Haas Grotesk" ou "Inter") pour le corps, en petite taille (14-16px) avec interlignage généreux (1.8). - **Couleur** : Fond ivoire (#F5F2EB) ou noir profond (#0A0A0A) selon la direction finale. Une seule couleur d'accent - terracotta (#C4552D) ou vert sauge (#7A8B6F). Pas de dégradés, pas d'ombres portées. **4. Interaction signature** Le "dévoilement différé" - au scroll, les éléments n'apparaissent pas immédiatement. Un délai de 200-400ms après l'entrée dans le viewport, puis une révélation par masque (clip-path) qui part du bas vers le haut sur 1.2s avec une courbe d'accélération personnalisée (cubic-bezier(0.19, 1, 0.22, 1)). Cette attente crée une tension qui récompense la patience - chaque apparition devient un événement. **5. Stack technique** - **Framework** : Next.js 14 (App Router) pour le SSR et les performances Core Web Vitals. - **Animations** : GSAP avec ScrollTrigger pour les révélations et le contrôle précis des timelines. Framer Motion pour les micro-interactions (hover, transitions de page). - **Images** : Next/Image avec format AVIF, chargement lazy avec blur-up placeholder personnalisé (pas de blur-up générique). - **Police** : Self-hosted via @font-face avec font-display: swap - pas de Google Fonts CDN pour éviter les requêtes tierces. - **Curseur personnalisé** : Implémenté en vanilla JS avec requestAnimationFrame pour éviter les lags - pas de bibliothèque externe. - **Raisonnement** : GSAP offre le contrôle le plus fin sur les timelines complexes nécessaires au "dévoilement différé". Next.js garantit un score Lighthouse élevé, essentiel pour un positionnement premium. Pas de Three.js ni WebGL - le luxe ici est dans la retenue, pas dans la démonstration technique. --- **Anti-références respectées** : Aucun layout SaaS générique (pas de hero centré avec CTA bouton), aucune photo stock (toutes les images seront des visuels sur mesure ou des typographies géantes), aucun effet Dribbble-bait (pas de tilt 3D, pas de grain animé, pas de marquee infini). **Prochaines étapes** : Validez ce concept ou indiquez les ajustements - puis je passerai au design system détaillé et au prototypage des interactions clés.