Cachier des charges design web & DA

1. Vision & Architechture Design

1.1 Approche atomic design

Le système de design doit être conçu selon une approche Atomic Design (Atomes, Molécules, Organismes). L’objectif est de garantir une cohérence visuelle absolue : chaque élément (bouton, input, carte) doit être un composant réutilisable avec des variantes définies. Cette modularité doit permettre de limiter la dette technique et de faciliter l’intégration via des composants Vue/React.

1.2 Light et Dark mode

Contrairement aux tendances actuelles, le projet ne proposera pas de Dark Mode. L’énergie créative doit être concentrée sur la perfection du Light Mode. L’interface doit être claire, contrastée et élégante, en évitant les problématiques d’accessibilité souvent rencontrées lors d’une inversion automatique des couleurs.

1.3 Mobile first

Le design doit être pensé prioritairement pour le format mobile.

• Mobile (Cible principale) : Expérience pixel-perfect.
• Desktop (16/9) : Le design s’adapte par un agrandissement homothétique ou un centrage avec des marges généreuses (le “letterboxing” est accepté). L’esthétique mobile doit rester prédominante même sur grand écran.

2. Spécificité UX/UI par support

2.1 Ergonomie Produit (Web & App)

• Interdiction du “Hover” critique : Aucune information essentielle ne doit apparaître uniquement au survol, car cette interaction n’existe pas sur mobile.
• Zones de clic : Taille minimale de 44x44px pour tous les éléments interactifs.
• Feedback : Prévoir des états visuels clairs lors du tap (active state)

2.1 Identité Sociale & Partage (Open Graph)

La DA doit inclure la conception des assets de partage :

• OG:Images : Création de visuels de prévisualisation (1200x630px) pour les SMS, WhatsApp, LinkedIn et X.
• Brand Kit : Templates de réseaux sociaux cohérents avec l’UI du produit.

3. Contraintes Techniques & Performance

3.1 Typographie & Licences

• Open Source uniquement : Utilisation exclusive de polices libres de droits (ex: Google Fonts).
• Optimisation : Privilégier des polices avec peu de variantes pour optimiser le temps de chargement des pages.

3.2 Nomenclature & Standard Tailwind CSS

Le designer doit adopter une nomenclature sémantique alignée sur Tailwind CSS pour faciliter le passage du design au code :

• Couleurs : Utilisation d’échelles numériques (ex: primary-500, neutral-900).
• Espacements : Utilisation de paliers standards (ex: spacing-4, spacing-md).
• Arrondis : Définition de constantes (ex: rounded-lg).

3.3 Assets & Optimisation Médias

Pour garantir les meilleurs scores Core Web Vitals :

• Iconographie : 100% SVG pour une netteté parfaite et un poids minimal.
• Images : Livraison au format WebP optimisé.
• Placeholders : Prévoir un style visuel pour les images en cours de chargement (lazy-loading).