Spécifications et design d'interface
Créez votre compte GitHub, concevez votre application dans Figma et rédigez ses spécifications
Objectifs
- Créer un compte GitHub et configurer un dépôt
- Rédiger des user stories et les spécifications des fonctionnalités
- Concevoir les écrans de l'application avec Figma et Stitch AI
- Transformer les maquettes en issues GitHub avec critères d'acceptation
Prérequis
- Un ordinateur avec un navigateur web récent (Chrome, Firefox ou Edge)
- Une adresse e-mail (pour créer les comptes)
- Aucune connaissance technique requise : conçu pour les grands débutants
Projet guidé : StudyPlanner
Une application de gestion de tâches pour étudiants, qui aide à organiser les devoirs, à suivre les échéances et à gérer le travail de chaque cours. Tout le monde suit ensemble ce projet guidé pendant toute la durée du cours.
- Créer des tâches : ajouter des tâches avec un titre, une échéance et une description
- Afficher la liste des tâches : voir toutes les tâches dans une liste claire et ordonnée
- Marquer comme terminée : cocher les tâches au fur et à mesure
- Filtrer par matière : se concentrer sur un cours à la fois
- Définir des priorités : niveau de priorité bas, moyen ou haut
Créez votre compte GitHub
GitHub est la plateforme où les développeurs stockent leur code et collaborent dessus. Vous l'utiliserez tout au long du cours pour gérer votre projet.
Consignes
- Rendez-vous sur github.com et cliquez sur « Sign Up » (s'inscrire)
- Choisissez un nom d'utilisateur professionnel (par exemple
prenom-nom) - Confirmez votre adresse e-mail depuis votre boîte de réception
- Complétez votre profil :
- Ajoutez une photo de profil
- Rédigez une courte bio (par exemple « Étudiant en développement d'applications »)
Astuce : choisissez un nom d'utilisateur que vous pourriez faire figurer sur un CV. Évitez les surnoms et les chiffres : restez professionnel.
Point de contrôle : montrez votre profil GitHub complété à votre enseignant avant de continuer.
Créez votre dépôt
Un dépôt (repository, ou « repo ») est l'endroit où sont stockés les fichiers et l'historique de votre projet. Voyez-le comme un dossier dans le cloud qui garde la trace de chacune de vos modifications.
Consignes
- Cliquez sur l'icône « + » en haut à droite, puis choisissez « New repository » (nouveau dépôt)
- Nom du dépôt :
study-planner - Description : « Une application de gestion de tâches pour étudiants »
- Réglez la visibilité sur « Public »
- Cochez « Add a README file » (ajouter un fichier README)
- Cliquez sur « Create repository » (créer le dépôt)
Important : vérifiez que votre dépôt est réglé sur « Public », et non sur « Private ». Votre enseignant doit pouvoir le consulter.
Point de contrôle : copiez l'URL de votre dépôt (par exemple https://github.com/your-username/study-planner) et transmettez-la à votre enseignant.
Rédigez vos spécifications
Partie A : modifiez votre README
Cliquez sur le fichier README.md de votre dépôt, puis sur l'icône en forme de crayon pour le modifier. Remplacez le contenu par défaut par la structure suivante :
# StudyPlanner
Une application de gestion de tâches pour étudiants.
## Utilisateurs cibles
Les étudiants qui gèrent leurs cours et leurs échéances.
## Fonctionnalités
- Créer des tâches avec un titre, une échéance et une priorité
- Afficher toutes les tâches dans une liste
- Marquer les tâches comme terminées
- Filtrer les tâches par matière
- Définir des niveaux de priorité (basse / moyenne / haute)
## Stack technique
- Next.js (framework React)
- Déployé sur VercelPartie B : rédigez les user stories
Les user stories décrivent les fonctionnalités du point de vue de l'utilisateur. Elles suivent ce format :
« En tant que [utilisateur], je veux [action], afin de [bénéfice] »
Ajoutez à votre README une section « User stories » comportant au moins 5 user stories. Voici quelques exemples pour démarrer :
- « En tant qu'étudiant, je veux créer des tâches avec une échéance, afin de suivre mes devoirs. »
- « En tant qu'étudiant, je veux marquer des tâches comme terminées, afin de voir ma progression. »
- « En tant qu'étudiant, je veux filtrer les tâches par matière, afin de me concentrer sur un cours à la fois. »
- « En tant qu'étudiant, je veux définir des niveaux de priorité, afin de savoir par quelles tâches commencer. »
- « En tant qu'étudiant, je veux voir la liste de toutes mes tâches, afin d'avoir une vue d'ensemble de ma charge de travail. »
Rappel : après chaque modification, cliquez sur le bouton vert « Commit changes » (enregistrer les modifications) pour sauvegarder votre travail. Rédigez un court message de commit, par exemple « Ajout des spécifications et des user stories ».
Générez vos écrans avec Stitch AI
Stitch est un outil de design par IA, conçu par Google, qui génère des écrans d'application complets à partir d'une description textuelle. Vous l'utiliserez pour créer rapidement vos premières maquettes, puis vous les importerez dans Figma pour les affiner.
Partie A : ouvrez Stitch
- Rendez-vous sur stitch.withgoogle.com
- Connectez-vous avec votre compte Google
- Cliquez sur « Create new project » (créer un projet)
- Nommez votre projet « StudyPlanner »
Partie B : générez vos écrans
Il vous faut au moins 3 écrans. Décrivez chaque écran dans la zone de saisie du prompt. Générez-les un par un :
Prompt 1 (écran de liste des tâches) :
« Une page de liste de tâches épurée pour une application d'agenda étudiant, conçue d'abord pour le mobile, avec des cases à cocher, les titres des tâches, les échéances et des étiquettes de priorité colorées »
Prompt 2 (formulaire d'ajout de tâche) :
« Un formulaire de création de tâche avec des champs pour le titre, l'échéance, une liste déroulante des matières et un sélecteur de niveau de priorité. Design épuré et minimaliste »
Prompt 3 (tableau de bord) :
« Un tableau de bord affichant les prochaines échéances, des statistiques d'avancement des tâches et un bouton d'ajout rapide. Mise en page moderne à base de cartes »
Astuce : si un résultat ne vous convient pas, reformulez votre prompt ou ajoutez des détails. Vous pouvez aussi demander à Stitch de retravailler l'écran : « Agrandis les boutons et ajoute plus d'espace blanc ».
Partie C : exportez depuis Stitch
Une fois satisfait de vos écrans :
- Relisez chaque écran et faites les derniers ajustements dans Stitch
- Cliquez sur le bouton « Export » (exporter) ou « Download » (télécharger) de chaque écran
- Choisissez « Export to Figma » (exporter vers Figma) si l'option existe, sinon téléchargez les écrans en fichiers PNG/SVG
- Enregistrez tous les fichiers exportés dans un dossier de votre ordinateur
Point de contrôle : vous devez disposer d'au moins 3 écrans générés, prêts à être importés. Montrez-les à votre enseignant avant de continuer.
Importez et affinez dans Figma
Partie A : préparez Figma
- Créez un compte gratuit sur figma.com
- Créez un nouveau fichier de design nommé « StudyPlanner Design »
Partie B : importez vos designs Stitch
Importez dans Figma les écrans que vous avez générés :
- Si vous avez exporté un fichier Figma : ouvrez-le directement dans Figma, puis copiez ses frames (cadres) dans votre fichier « StudyPlanner Design »
- Si vous avez exporté en PNG/SVG : glissez-déposez les images sur votre canevas Figma, ou utilisez « File → Place Image » (insérer une image)
Astuce : disposez vos écrans côte à côte sur le canevas Figma, en les espaçant. Vous aurez ainsi une vue claire du parcours complet dans l'application.
Partie C : affinez vos designs
Maintenant que vos écrans sont dans Figma, harmonisez-les :
- Vérifiez que tous les écrans utilisent la même palette de couleurs
- Employez les mêmes polices et tailles de police sur tous les écrans
- Donnez un style homogène aux boutons et aux éléments interactifs
- Ajoutez le nom de l'application et les éléments de navigation sur chaque écran
- Ajoutez des libellés ou des annotations pour expliciter les éléments interactifs
Pourquoi Figma ? Stitch génère des écrans rapidement, mais c'est dans Figma qu'on peaufine. Les vraies équipes utilisent Figma pour collaborer, gérer leur design system et transmettre les maquettes aux développeurs. Avoir ses designs dans Figma est un standard professionnel.
Partie D : partagez votre design
- Cliquez sur « Share » (partager) en haut à droite de Figma
- Réglez le lien sur « Anyone with the link can view » (toute personne disposant du lien peut consulter)
- Copiez le lien de partage : c'est lui que vous remettrez à votre enseignant
Point de contrôle : transmettez votre lien Figma à votre enseignant. Il doit pouvoir y voir au moins 3 écrans affinés.
Transformez le design en issues GitHub
Vous allez maintenant transformer votre design et vos spécifications en tâches concrètes. Allez dans votre dépôt → onglet « Issues » → « New issue » (nouvelle issue).
Créez une issue GitHub par fonctionnalité ou par écran. Chaque issue suit ce format :
Titre : Créer la page de liste des tâches
Description :
Afficher toutes les tâches dans une liste de cartes avec titre,
échéance, matière et statut d'achèvement.
Critères d'acceptation :
- [ ] La page se charge à l'adresse /tasks
- [ ] Affiche toutes les tâches de la base de données
- [ ] Chaque tâche affiche titre, échéance, matière, priorité
- [ ] Les tâches terminées se distinguent visuellement
- [ ] Un message s'affiche quand il n'y a aucune tâche
- [ ] La page s'adapte aux écrans mobiles
Labels : feature, uiAjoutez des labels à vos issues
Allez dans « Issues » → « Labels » (étiquettes) et créez les labels suivants s'ils n'existent pas déjà :
- feature : nouvelle fonctionnalité à implémenter
- ui : interface utilisateur et design visuel
- data : gestion et stockage des données
Appliquez le ou les labels appropriés à chaque issue que vous créez.
Issues suggérées
Créez au moins 5 issues (8 à 10 recommandées). Voici des suggestions pour couvrir toutes les fonctionnalités et tous les écrans :
- Mettre en place la structure du projet
- Créer la page de liste des tâches
- Créer le formulaire d'ajout de tâche
- Créer la vue détaillée d'une tâche
- Implémenter le basculement terminée / à faire
- Ajouter le filtrage par priorité
- Ajouter le filtrage par matière / cours
- Créer le tableau de bord avec statistiques
Erreur fréquente : des issues sans critères d'acceptation. Chaque issue a besoin de critères clairs de fin (« done ») : si vous ne savez pas dire quand elle est terminée, c'est qu'elle n'est pas assez précise.
Livrables et évaluation
Avant de partir, vérifiez que tous les éléments suivants sont terminés et transmis à votre enseignant :
Avant de partir : vérifiez que tous les liens ont été transmis à votre enseignant. Votre dépôt GitHub doit être public et le partage doit être activé sur votre fichier Figma.
Critères d'évaluation
| Critère | Pondération | Description |
|---|---|---|
| Configuration GitHub | 15 % | Compte, dépôt et README correctement configurés |
| Spécifications | 25 % | Liste claire des fonctionnalités et user stories bien rédigées |
| Design Figma | 30 % | Au moins 3 écrans, design cohérent, correctement partagé |
| Issues GitHub | 20 % | Issues bien structurées avec critères d'acceptation |
| Organisation | 10 % | Labels, descriptions claires, présentation professionnelle |
Défis bonus
Bravo ! Vous avez terminé la phase la plus importante : la planification. Demain (Jour 2), nous donnerons vie à ce design avec du code : Next.js, Antigravity et un déploiement sur Vercel.