# **Module 2 : Structurer une interface web** ## **Objectifs :** - Comprendre comment structurer une page web de manière harmonieuse - Apprendre à utiliser des grilles, colonnes, et créer des composants réutilisables dans Figma --- ## **Section 1 : Structure d’une page web** ### **1.1. Les parties d’une page web :** Une page web se compose généralement des éléments suivants : 1. **L'en-tête (header)** : - C’est la partie supérieure qui contient souvent le logo, la barre de navigation, et parfois un bouton de recherche. 2. **Le corps (body)** : - Le contenu principal de la page, qui peut inclure des sections comme des articles, des images, des produits, etc. 3. **Le pied de page (footer)** : - La partie inférieure contenant les informations de contact, les liens vers les réseaux sociaux, et les mentions légales. ### **1.2. Hiérarchie visuelle :** La hiérarchie visuelle est essentielle dans la structuration d’une page. Elle guide l'utilisateur en lui montrant ce qui est le plus important en premier. Quelques principes clés : - **Taille des éléments** : Les éléments importants doivent être plus grands (par exemple, un titre). - **Couleurs** : Des couleurs contrastées pour les actions importantes (boutons, appels à l'action). - **Positionnement** : L'emplacement des éléments joue un rôle clé (le haut et le centre d'une page captent le plus d'attention). --- ## **Section 2 : Grilles et colonnes dans Figma** ### **2.1. Pourquoi utiliser des grilles :** Les grilles sont un moyen d'organiser les éléments sur une page de manière cohérente, en respectant les principes du design responsive. Elles facilitent l'alignement et garantissent une expérience utilisateur fluide. 1. **Grilles de colonnes** : - Les grilles de colonnes sont souvent utilisées pour diviser une page en plusieurs sections (souvent 12 colonnes pour une structure responsive). 2. **Alignement des éléments avec des colonnes** : - Vous pouvez positionner les éléments comme des images, des textes et des boutons en les alignant avec les colonnes de votre grille, garantissant ainsi un design cohérent. ### **2.2. Comment ajouter une grille dans Figma :** 1. Sélectionnez un **Frame** (cadre) dans votre projet Figma. 2. Dans le panneau de droite, sous l'option **Layout Grid**, cliquez sur **+ Add Grid**. 3. Par défaut, une grille sera ajoutée. Cliquez sur l'icône de la grille pour changer son type en **Columns** (colonnes). 4. Ajustez le nombre de colonnes (12 colonnes est un standard pour le design web) et les marges. 5. Vous pouvez aussi ajuster les gouttières (l’espace entre les colonnes) selon vos préférences. ### **2.3. Travaux pratiques : Structurer une page avec des colonnes** 1. **Créer un en-tête** : - Sélectionnez l'outil **Frame** pour créer un cadre qui servira de conteneur à l'en-tête. - Ajoutez un texte "Logo" à gauche et une barre de navigation avec 3 liens à droite (Accueil, À propos, Contact). - Alignez ces éléments à l’intérieur de votre grille de colonnes. 2. **Créer un corps principal** : - Dessinez un second **Frame** pour le corps de la page. - Divisez ce corps en deux colonnes : à gauche un texte descriptif, à droite une image (ou un espace pour une future image). 3. **Créer un pied de page** : - Ajoutez un **Frame** en bas de la page pour le pied de page. Ajoutez des liens "Mentions légales" et "Politique de confidentialité" alignés à gauche, et des icônes de réseaux sociaux alignés à droite. --- ## **Section 3 : Composants réutilisables** ### **3.1. Qu'est-ce qu'un composant réutilisable ?** Dans Figma, un **composant** est un élément que vous pouvez créer une fois, puis réutiliser plusieurs fois à différents endroits de votre projet. Par exemple, vous pouvez créer un bouton avec un certain style et l'utiliser sur toutes vos pages. Si vous modifiez ce bouton principal, toutes les copies seront mises à jour automatiquement. ### **3.2. Comment créer un composant dans Figma :** 1. **Créer un bouton simple** : - Dessinez un rectangle pour le corps du bouton. - Ajoutez un texte à l’intérieur du bouton (par exemple "S'inscrire"). - Sélectionnez le rectangle et le texte, puis faites un clic droit et choisissez **Create Component**. - Ce bouton est maintenant un composant réutilisable. 2. **Utiliser et modifier un composant** : - Faites un glisser-déposer du composant bouton dans une autre section de la page. - Si vous souhaitez modifier ce bouton dans une instance particulière (par exemple changer son texte ou sa couleur), sélectionnez l’instance et effectuez les modifications. Cela n'affectera pas le composant maître. ### **3.3. Travaux pratiques : Création d’un composant bouton réutilisable** 1. Créez un bouton "En savoir plus" avec une couleur de fond et un texte centré. 2. Transformez-le en composant en suivant les étapes ci-dessus. 3. Utilisez ce bouton à plusieurs endroits de la page (par exemple, dans l'en-tête et dans le corps principal). --- ## **Section 4 : Exemples de structure de page web** ### **4.1. Exemples de mise en page d’un site e-commerce :** - **En-tête** : Contient le logo, la barre de navigation, et le panier d’achat. - **Corps principal** : Divisé en deux sections : les produits en vedette à gauche, un espace promotionnel à droite. - **Pied de page** : Liens vers les pages importantes, informations de contact, et réseaux sociaux. ### **4.2. Exemple de site vitrine :** - **En-tête** : Logo et liens de navigation. - **Corps principal** : Un texte d’introduction, suivi d’une galerie d'images représentant les services. - **Pied de page** : Contact et formulaire de newsletter. --- ## **Section 5 : Travaux pratiques** ### **TP 2 : Créer une page d'accueil structurée avec des composants réutilisables** ### **Objectif :** Créer une page d'accueil avec une structure bien définie et des composants réutilisables. La page doit comporter : 1. Un en-tête avec un logo et une barre de navigation. 2. Un corps principal avec une section texte et une image. 3. Un pied de page avec des informations de contact. 4. Un bouton réutilisable pour plusieurs actions (ex : "En savoir plus", "S'inscrire"). ### **Instructions :** 1. Utilisez une grille de colonnes pour organiser les éléments de la page. 2. Créez des composants réutilisables pour les boutons et la barre de navigation. 3. Alignez tous les éléments en fonction de votre grille. 4. Sauvegardez et exportez le projet pour analyse. ### **Durée :** 2 heures --- ## **Conclusion :** À la fin de ce module, vous saurez comment structurer une page web en utilisant des grilles et des colonnes dans Figma, et vous maîtriserez la création de composants réutilisables pour garantir la cohérence et l'efficacité dans vos designs futurs.