TD : Création de la Maquette Figma pour le Site Birbone

Objectif

L’objectif de ce TD est de vous guider dans la création de la maquette de votre site Birbone en utilisant Figma. Vous apprendrez à structurer efficacement votre design, à choisir entre un site one-page ou multipage, et à utiliser les fonctionnalités de Figma pour créer une maquette professionnelle.

Introduction à Figma

Figma est un outil de design collaboratif en ligne qui vous permet de créer des maquettes visuelles (mockups) de sites web et d’applications. C’est un outil puissant qui offre des fonctionnalités de conception, de prototypage, et de collaboration en temps réel.

Principales Fonctionnalités de Figma

Frames : Les frames sont des conteneurs qui vous permettent de structurer vos designs. Vous pouvez les utiliser pour représenter des pages ou des sections spécifiques de votre site.
Composants : Les composants sont des éléments réutilisables. Par exemple, vous pouvez créer un bouton une seule fois en tant que composant et l’utiliser sur plusieurs pages.
Styles : Figma vous permet de définir des styles pour les couleurs, les polices, et les effets. Cela vous aide à maintenir la cohérence de votre design.
Prototypage : Vous pouvez créer des interactions entre vos frames pour simuler la navigation entre les pages ou sections de votre site.

Structure du Site

Site One-Page vs. Multipage

One-Page : Un site one-page affiche tout le contenu sur une seule page. Il est idéal pour les sites avec peu de contenu ou pour une navigation linéaire. Le défilement est souvent utilisé pour accéder aux différentes sections du site.
Multipage : Un site multipage divise le contenu en plusieurs pages. C’est utile si vous avez beaucoup de contenu ou si vous souhaitez organiser l’information en sections distinctes.

Choix de la Structure pour Birbone

Si votre site Birbone a un contenu limité et que vous souhaitez une navigation fluide, optez pour un site one-page.
Si votre site nécessite une organisation plus complexe, avec différentes catégories de produits ou sections d’information, un site multipage est préférable.

Création de la Maquette sur Figma

1. Mise en Place du Squelette

Frames : Créez un frame pour chaque section de votre site (par exemple, en-tête, présentation, produits, contact). Si vous choisissez un site multipage, créez un frame pour chaque page.
Grilles : Utilisez les grilles pour aligner vos éléments et assurer une disposition cohérente. Les grilles vous aident à maintenir un design propre et organisé.

2. Définition des Styles

Couleurs : Définissez une palette de couleurs cohérente avec le thème de Birbone. Utilisez Figma pour créer des styles de couleur que vous pourrez appliquer à différents éléments.
Typographie : Choisissez des polices lisibles et adaptées au design minimaliste attendu. Créez des styles de texte pour les titres, sous-titres, et paragraphes.

3. Création des Composants

Boutons : Créez des composants pour les boutons, que vous pourrez réutiliser sur plusieurs sections ou pages.
Sections Répétitives : Si vous avez des sections similaires sur plusieurs pages (comme des cartes de produits), créez des composants pour ces sections afin de les réutiliser facilement.

4. Prototypage

Interactions : Utilisez le mode prototype de Figma pour ajouter des interactions entre vos frames. Cela vous permet de simuler la navigation entre les différentes sections ou pages de votre site.
Aperçu : Prévisualisez votre prototype pour vous assurer que la navigation est fluide et que le design est conforme à vos attentes.

5. Exportation et Partage

Exportation : Exportez vos designs au format PNG ou SVG pour les utiliser lors de l’intégration HTML/CSS.
Partage : Partagez votre prototype avec vos camarades ou enseignants en générant un lien de partage directement depuis Figma.

Conclusion

Ce TD vous permet de créer une maquette visuelle pour votre site Birbone en utilisant Figma. Prenez le temps de bien structurer votre design, de définir des styles cohérents, et d’utiliser les fonctionnalités de Figma pour créer une maquette professionnelle. Cette maquette servira de base pour l’intégration de votre site en HTML et CSS.

Bonne chance dans la création de votre maquette !