📘 Chapitre 5 : Créer une maquette simple

🎯 Objectif pédagogique

Être capable de créer une maquette simple et interactive (wireframe haute fidélité) d’une page web en utilisant Figma ou un outil équivalent.

📚 Concepts abordés

• Organisation des sections d’une page (header, navigation, contenu, footer)
• Utilisation des frames et grilles pour structurer la maquette
• Ajout de composants interactifs (boutons, liens)
• Préparation de l’export ou partage de la maquette

🧠 Explication théorique

Une maquette simple doit refléter la structure finale d’un site tout en restant modifiable.
Les points clés sont :

• Clarté : les zones de contenu doivent être identifiables (texte, images, boutons),
• Alignement : utiliser des grilles et marges cohérentes,
• Interactivité : relier les pages ou sections pour simuler une navigation,
• Exportabilité : la maquette doit pouvoir être partagée facilement via un lien ou export PNG/PDF.

🛠 Travail pratique

Étape 1 : Préparer le canevas

• Créez un nouveau projet dans Figma.
• Ajoutez une frame correspondant à la taille d’un écran standard (Desktop 1440px).

Étape 2 : Organiser la structure

• Ajoutez un header (logo, menu de navigation).
• Ajoutez des blocs pour le contenu principal et une section pied de page.
• Utilisez la grille de Figma pour aligner les éléments.

Étape 3 : Ajouter l’interactivité

• Reliez un bouton (par exemple “En savoir plus”) à une autre page via le mode Prototype.
• Testez la navigation avec le mode Présentation.

Étape 4 : Exporter ou partager

• Générez un lien public pour partager votre maquette.
• Exportez une image de votre maquette au format PNG.

🧾 Résumé et points-clés

• Une maquette simple prépare le design final d’un site web.
• Figma permet d’ajouter des liens interactifs pour tester la navigation.
• Le respect des alignements et marges est essentiel pour un rendu professionnel.