1. Contexte
• Entreprise: OhMyFood, startup FoodTech (NY → Paris).
• Équipe: Artdantech, Paul (chef de projet), UX/UI designer (maquettes + prototype + animations).
• Livrables: site statique multi‑pages (Home + 4 restaurants), SASS compilé en CSS, animations conformes au prototype, responsive mobile‑first, README d’explication des animations, déploiement (GitHub Pages).
• Point de départ: maquettes mobile/desktop + prototype Figma (interactions/animations), images et textes sources, brief créatif.
2. Besoin
• Construire une expérience mobile‑first listant des restaurants et leurs menus, avec interactions fluides et animations (loader, favoris, survol cartes, sélection des plats).
• Implémenter 4 pages “restaurant” à partir d’un template commun (contenu variable uniquement).
• Utiliser SASS (structure modulaire, variables/mixins), assurer l’accessibilité et la performance, et documenter le fonctionnement des animations.
3. Client
• Utilisateurs finaux réservant/choisissant leurs plats à l’avance (mobile en priorité).
• Équipe produit (Paul) pour la conformité au brief et au prototype.
• Équipe design pour la fidélité visuelle et la cohérence des animations.
4 Objectifs
4.1 Fonctionnels
• Page d’accueil: hero, section “Fonctionnement” (étapes), liste des restaurants (cartes clicables, favoris).
• Pages restaurants: entrées / plats / desserts, sélection d’un plat (feedback visuel), CTA commande.
• Animations visibles et cohérentes: transitions au survol, apparition progressive des items, favori (coeur), loader d’entrée.
4.2 Techniques
• Intégration en SASS (mobile‑first) compilé en CSS; breakpoints tablette/desktop (min-width).
• Respect strict des maquettes/prototype (espacements, typographies, couleurs, états).
• Accessibilité: sémantique HTML5, alt text, focus visibles, prefers‑reduced‑motion, contrastes OK.
• Qualité: HTML/CSS validés W3C, lisibilité et BEM, compatibilité moderne (Chrome/Firefox/Safari/Edge).
5. Contraintes / défis
• Mobile‑first réel: base CSS = mobile; enrichissements progressifs via media queries.
• Animations riches mais performantes (transform/opacity) et accessibles (réduction de mouvement).
• Mutualisation des styles entre 4 pages restaurants sans duplication CSS (template + contenus).
• Pixel‑perfect par rapport aux maquettes, y compris états au survol/pression et micro‑interactions.
6. Processus / méthodologie
6.1 Analyse
• Cartographier les composants: Header, Footer, Steps (Fonctionnement), Card Restaurant, Badge “Nouveau”, Coeur favori, MenuItem (plat) avec check, Boutons CTA, Loader, Grilles responsive.
• Recenser tokens: palette, typos, spacing, rayon, ombres, durées/aisings d’animation; extraire en variables SASS.
6.2 Découpage en issues (GitHub)
• Setup: repo public + GitHub Pages, structure dossiers, pipeline Sass (Dart Sass), README.
• Home mobile (sans animations) → animations → responsive (tablette, desktop).
• Page restaurant #1 (mobile) → animations (apparition, sélection) → responsive.
• Duplication pages resto #2–#4 (contenu uniquement).
• Accessibilité (focus, alt, reduced‑motion), validation W3C, optimisation images, finalisation documentation animations.
6.3 Architecture et logique
• Arborescence: cf github
• Responsive: mobile par défaut; @media (min-width: 768px) tablette; (min-width: 1024px/1200px) desktop; container max‑width 1440px.
• Restaurant template: même DOM et classes; contenu (titres, images, prix) change seulement.
• Animations (logique et explications):
- Loader: overlay plein écran, keyframes spin/fade, durée courte (1–1.5s), transform/opacity pour GPU; masqué via animationend ou classe.
- Apparition des cartes/menu items: keyframes fade‑up + stagger via nth-child (animation-delay).
- Coeur “favori”: double icône (fond + contour) ou gradient background‑clip; transition background-size/opacity; focus/keyboard support; état persistant simulé par classe .is‑liked.
- Sélection d’un plat: container avec prix à droite et zone “check” qui slide depuis la droite (transform: translateX), rotation du check icon (+180°) et fade‑in; inverse on hover out/blur; clamp des durées via variables SASS ($ease, $t-fast, $t-med).
- Boutons CTA: gradient + shadow; hover = légère scale (transform) + shadow renforcée; active = scale down court.
- Accessibilité: @media (prefers-reduced-motion: reduce) → désactiver keyframes non essentielles, réduire durées et supprimer les staggers.
6.4 Choix techniques (justification)
• SASS modulaire: variables/mixins pour palette, typographies, z‑index, timings; import ordonné (7‑1 allégé).
• Performances animations: éviter layout thrash (transform/opacity), limiter box‑shadow animé; utiliser will-change avec parcimonie.
• Grilles: Flex/Grid selon section; images avec object-fit: cover; ellipsis sur textes longs (nom/description plats).
• Documentation: README “Animations” décrivant chaque effet (but, classes, keyframes, timings, accessibilité).
6.5 Flux principaux
• Arrivée sur Home → loader bref → hero + “Fonctionnement” (steps animés au survol) → liste de restaurants (cartes, favoris).
• Ouverture d’un restaurant → animation d’entrée des sections (Entrées/Plats/Desserts) par vagues → sélection de plats (slide check + rotation icône) → CTA Commander.
• Ajout/retrait favori depuis Home ou page resto (coeur animé).
6.6 Tests et qualité
• Validation W3C HTML/CSS; Stylelint/Prettier sur SASS; compilation Sass sans warnings.
• A11y: tab order, focus visible, alt, contrastes; test prefers‑reduced‑motion; lecture clavier des états “sélectionné/favori”.
• Responsive: contrôles aux largeurs 320/375/414/768/1024/1200/1440px; grilles et images stables.
• Perf: Lighthouse mobile; poids images; éviter animations coûteuses continues; vérifier CLS nul.
7. Analyse
• Un design mobile‑first et une architecture SASS modulaire permettent d’itérer rapidement entre pages et breakpoints. En traitant les animations comme des composants documentés (tokens de durée/aisings, keyframes réutilisables, reduced‑motion), on garantit cohérence, performance et accessibilité.
8. Choix techniques
• SASS (Dart Sass) avec variables/mixins pour thèmes et timings; BEM pour prévisibilité.
• Media queries en min-width (progressive enhancement); Grid/Flex selon besoins; object-fit; text-overflow pour ellipses mobiles.
• Animations via transform/opacity; préférences utilisateurs respectées; dégradés et ombres limités pour le coût.
9. Logique de résolution
• Construire d’abord Home mobile statique → ajouter animations → étendre responsive; créer un template restaurant mobile → animations → responsive; dupliquer pour 3 autres restaurants; finaliser a11y/perf/validations; documenter les animations et la structure SASS dans le README.
10. Stack utilisée
• HTML5, SASS (Dart Sass) → CSS compilé; BEM.
• Outils: VS Code, Live Server, Stylelint/Prettier, Autoprefixer (PostCSS), Lighthouse, Axe, W3C Validators.
• Déploiement: GitHub + GitHub Pages; gestion de versions Git (issues/branches/PR).
• Assets: images optimisées (formats adaptés), icônes (Font Awesome ou SVG selon maquette).
11. Résultat final
• Site OhMyFood fidèle aux maquettes/prototype, responsive mobile‑first, 4 restaurants intégrés à partir d’un template commun.
• Animations soignées, performantes et documentées (loader, coeurs favoris, apparitions, sélection des plats, CTA).
• Code propre et validé (HTML/CSS), accessibilité de base assurée, structure SASS claire et maintenable, projet livré et publié (GitHub Pages).