# **Module 5 : Projet final - Maquette complète** ## **Objectifs :** - Appliquer toutes les connaissances acquises pour réaliser une maquette complète d’un site web - Structurer le projet de manière professionnelle, avec une attention particulière à la cohérence du design, à l'ergonomie, et à l'accessibilité - Préparer la maquette pour une future utilisation dans la partie backend de la formation --- ## **Étapes préparatoires :** Avant de démarrer le projet final, assurez-vous que chaque étudiant : 1. Comprend les bases de Figma (création de frames, composants, prototypage). 2. A révisé les précédents modules sur la structure des pages, la création de composants réutilisables, et le design UI avancé. 3. Est familier avec les principes d’accessibilité et de design responsive. ### **Durée du projet :** 10 heures réparties sur plusieurs sessions. --- ## **Section 1 : Définition du projet** ### **1.1. Sujet du projet :** Le projet final consiste à créer une maquette complète d’un site web e-commerce fictif. Ce site contiendra au minimum 5 pages : 1. **Page d'accueil** (avec produits en vedette, sections d'information) 2. **Page produit** (détails d’un produit spécifique) 3. **Panier** (avec la liste des articles ajoutés) 4. **Page de paiement** (avec les champs pour les informations de paiement) 5. **Page de confirmation** (après un achat réussi) ### **1.2. Préparation du projet :** 1. **Analyse du brief** : - Réfléchissez à l'expérience utilisateur (UX) pour chaque page. - Comment les utilisateurs interagiront avec le site ? Quels sont les points critiques (ajout au panier, passage en caisse) ? 2. **Planification des fonctionnalités :** - Définissez les éléments interactifs (boutons, formulaires). - Prévoyez les composants réutilisables (boutons d’ajout au panier, cartes de produits, etc.). 3. **Création d’un moodboard :** - Avant de commencer, il peut être utile de créer un moodboard dans Figma pour explorer des idées de design. Collectez des inspirations en termes de typographies, couleurs, et mises en page. --- ## **Section 2 : Création du wireframe global** ### **2.1. Définition du wireframe :** Un wireframe est une représentation simplifiée de votre interface, sans détails visuels comme les couleurs ou les images. Il sert à planifier la structure générale de chaque page. ### **2.2. Instructions pour créer le wireframe :** 1. **Page d'accueil :** - Créez un **Frame** pour la page d'accueil. - Divisez la page en sections : une bannière en haut avec un appel à l’action, une section de produits en vedette, une section d’informations (avantages du site, promotions). - Placez des zones grises pour les images et des rectangles pour les boutons et les titres. 2. **Page produit :** - Créez un **Frame** dédié à la page de détails d’un produit. - Ajoutez des espaces pour l’image du produit, le titre, le prix, la description et un bouton "Ajouter au panier". 3. **Panier :** - Créez un wireframe basique avec une liste d'articles ajoutés au panier. Chaque ligne doit contenir une miniature du produit, son nom, son prix, et un bouton pour le supprimer. 4. **Page de paiement :** - Divisez la page en deux colonnes : à gauche, un formulaire avec les informations de paiement ; à droite, un résumé du panier. - Placez des champs de formulaire pour le nom, l’adresse, et les informations de carte bancaire. 5. **Page de confirmation :** - Créez un simple écran de confirmation d’achat avec un message de remerciement et un résumé de la commande. --- ## **Section 3 : Design UI et prototypage** ### **3.1. Application de la palette de couleurs et de la typographie :** 1. **Ajouter les couleurs** : - Appliquez la palette de couleurs définie dans votre guide de style aux différents éléments du site. - Par exemple, utilisez la couleur primaire pour les boutons principaux, la couleur secondaire pour les sections d’informations, et une couleur d’accentuation pour les appels à l’action. 2. **Typographie** : - Utilisez les styles typographiques définis pour les titres, sous-titres, et le texte de base. - Assurez-vous que la hiérarchie est claire et cohérente sur toutes les pages. ### **3.2. Création de composants réutilisables :** 1. **Boutons :** - Créez un composant pour les boutons (ajouter au panier, passer à la caisse, confirmer l’achat) avec des variantes pour l'état normal, survolé, et cliqué. 2. **Cartes de produit :** - Créez un composant pour les cartes de produit avec un espace pour une image, un titre, un prix, et un bouton. Ce composant pourra être réutilisé dans plusieurs pages. ### **3.3. Prototypage dynamique :** 1. **Interactions de base :** - Ajoutez des interactions pour naviguer entre les pages via des boutons (par exemple, cliquer sur un produit pour accéder à la page produit, ajouter un article au panier, puis passer à la caisse). 2. **Animations :** - Utilisez **Smart Animate** pour animer des transitions entre des états (par exemple, afficher le panier lorsqu’un produit est ajouté). - Ajoutez une animation pour l’apparition du message de confirmation après un achat. 3. **Test du prototype** : - Lancez le mode **Prototype** pour tester la navigation complète du site. - Assurez-vous que toutes les interactions fonctionnent correctement et que la navigation est fluide. --- ## **Section 4 : Accessibilité et ergonomie** ### **4.1. Test d'accessibilité :** 1. **Contraste des couleurs :** - Vérifiez que les couleurs des textes et des arrière-plans respectent les normes de contraste. Utilisez le plugin **Contrast** pour valider que votre design est accessible à tous. 2. **Navigation au clavier :** - Assurez-vous que tous les éléments interactifs sont accessibles via le clavier. Chaque bouton doit pouvoir être sélectionné et activé sans souris. 3. **Taille des polices :** - Vérifiez que la taille des polices est suffisamment grande pour être lisible, même sur des écrans plus petits. ### **4.2. Travaux pratiques : Tester et améliorer l'accessibilité** 1. **Testez le contraste des couleurs** sur toutes les pages. 2. **Ajustez la taille de la typographie** si nécessaire pour améliorer la lisibilité. 3. **Corrigez les erreurs d'accessibilité** identifiées pendant les tests (par exemple, augmenter le contraste ou élargir certains boutons pour faciliter le clic). --- ## **Section 5 : Finalisation du projet et présentation** ### **5.1. Vérification de la cohérence :** 1. **Uniformité des composants** : - Assurez-vous que les composants réutilisables (boutons, cartes de produit) sont identiques sur toutes les pages. - Vérifiez que les marges et espacements sont cohérents d’une page à l’autre. 2. **Navigation fluide** : - Testez la navigation complète du site depuis la page d'accueil jusqu'à la page de confirmation. - Simulez un parcours utilisateur classique (par exemple, ajouter un produit au panier, passer à la caisse, finaliser l’achat). ### **5.2. Export et partage de la maquette :** 1. **Préparer la maquette pour le développement** : - Exportez les éléments graphiques nécessaires pour les développeurs (icônes, images, boutons) en utilisant le format SVG ou PNG. - Utilisez l’outil **Inspect** de Figma pour fournir aux développeurs les informations sur les dimensions, les marges et les couleurs. 2. **Présentation du projet final** : - Chaque étudiant doit présenter sa maquette finale, expliquer les choix de design, et démontrer les interactions dans le prototype. - Les pairs et le formateur fourniront des retours pour améliorer la maquette. --- ## **Évaluation finale :** ### **Critères d'évaluation :** 1. **Structure de la maquette** : Bonne utilisation des grilles, respect des principes de hiérarchie visuelle et d’ergonomie. 2. **Cohérence des composants** : Utilisation de composants réutilisables (boutons, cartes) pour assurer la cohérence sur l’ensemble du site. 3. **Interactions et prototype** : Fluidité des transitions et interactions entre les pages. 4. **Accessibilité** : Respect des normes d’accessibilité (contraste, navigation au clavier). 5. **Présentation et justification des choix** : Explication des décisions de design prises pour l’interface. --- ## **Conclusion :** Ce module final permet aux étudiants de mettre en pratique l’ensemble des compétences acqu ises tout au long de la formation. Ils réaliseront une maquette complète d’un site web professionnel, tout en prenant en compte l’accessibilité, la cohérence, et l’ergonomie. Ce projet servira également de base pour la phase backend de la formation.