Pour ce projet, vous allez devoir créer une page à destination commerciale et marketing (landing page) pour une nouvelle application "Yo!". Cette page présente les bénéfices et les fonctionnalités de l'application et doit rediriger l'utilisateur vers les liens de téléchargement des stores Google et Apple.
git clone https://github.com/g404-dev-web/agile-dev.git- Définir les User stories permettant de décrire le plus fidélement possible le parcours client
- Créer une board Kanban permettant de gérer 3 états d'avancement possible (To-do, In progress, Done)
- Chaque User Stories est un élément de la board Kanban qui doit être placée dans la colonne "To-do"
- Créer des sous-tâches définissant le travail à effectuer et les ratacher à l'User Story concernée
- A la fin de chaque sprint, les User Stories non placées dans la colonne "Done" seront reportées au prochain sprint
Le client vous fournit ce wireframe qui est votre référence pour cette mission
Set-up du projet : Avant de commencer, vous devez relier les ressources (Css&Js) données au fichier index.html
- Premier sprint
- La barre de navigation affiche le logo de l'application, un menu avec 2 éléments et un bouton
- La première section présente l'application :
- le fond de la section est coloré
- la zone de droite contient un titre de niveau 1, un texte court (de substitution) et les 2 boutons de revoi vers les stores Apple et Google (liens factices)
- La zone de gauche contient une image de l'application en situation dans un smartphone (mock-up)
- La seconde section présente un bénéfice de l'application :
- La zone de gauche contient une image de l'application en situation dans un smartphone
- La zone de droite contient un titre de niveau 2, un paragraphe et un bouton
- La troisième section présente 3 fonctionnalités de l'application :
- Le fond de la section est coloré (même couleur que la première section)
- La mise en situation de l'application est centrée sur la section
- Les 3 fonctionnalités (titres de niveau 3 + paragraphe) sont férrés vers la mise en situation
- La quatrième section présente un formulaire de captation de contacts :
- La zone de gauche contient un titre de niveau 2, un court texte et une image de l'application en situation
- La zone de droite contient un titre de niveau 3, un formulaire de contact avec les champs nom, prenom, email et un bouton de validation
- Le pied de page (de la même couleur que la barre de navigation) contient :
- Les icones renvoyant vers les réseaux sociaux respectifs (liens factices)
- Le texte de copyright
- L'arborescence du projet donnée vous permet de mener à bien votre mission, vous n'aurez pas besoin de fichiers supplémentaires
- Ne modifiez pas les fichiers sources materialize.css & materialize.js !
- Des fichiers custom.css & custom.js, vous permettront d'ajouter styles et scripts personnalisés
- Référez-vous le plus souvent à la documentation du framework Materialize
- Toutes les images nécessaires à l'intégration du projet vous sont fournies dans le dossier
- Comme d'habitude vous utiliserez du texte substitution (https://meettheipsums.com/)
- Se sensibiliser aux méthodes de travail Agiles
- Communiquer et répartir les tâches au sein de son équipe
- Finir le sprint 1 dans les objectifs de temps donnés par le client (toutes les tâches ont été validées)
Après des premiers bêta-tests de la page de destination précedemment livrée, le client souhaite revoir certaines sections et ajouter ou supprimer des fonctionnalités. Vous devrez adapter les User Stories en conséquence ou en réécrire de nouvelles.
- Définir les User stories permettant de décrire le plus fidélement possible le parcours client
- Créer une board Kanban permettant de gérer 3 états d'avancement possible (To-do, In progress, Done)
- Chaque User Stories est un élément de la board Kanban qui doit être placée dans la colonne "To-do"
- Les sous-tâches sont ratachées à une User Story
- A la fin de chaque sprint, les User Stories non placées dans la colonne "Done" seront reportées au prochain sprint
Le client vous fournit ce wireframe qui est votre référence pour cette mission
- Second sprint
- La quatrième section présentant initialement un formulaire est remplacée comme suit :
- La zone de droite contient une image de l'application en situation dans un smartphone
- La zone de gauche contient un titre de niveau 2, un court texte et les 2 boutons de revoi vers les stores Apple et Google
- une cinquième zone est à créer comme suit :
- Un titre de niveau 4 centré
- 3 logos des partenaires avec un texte court, en ligne et centrés
- Ajouter un nouveau bénéfice à la seconde section comme suit :
- La zone de gauche contient un titre de niveau 2, un paragraphe et un bouton
- La zone de droite contient une image de l'application en situation dans un smartphone
- Barre de navigation :
- La fixer
- Le premier lien renvoie vers la section de présentation des bénéfices (le nommer ainsi et en faire une ancre)
- Le second lien renvoie vers la section de présentation des fonctionnalités (le nommer ainsi et en faire une ancre)
- Donner une couleur secondaire au bouton et en faire une ancre vers la dernière section de téléchargement
- Le pied de page enfin présente dans la zone de gauche :
- Un titre de niveau 3
- Un formulaire de captation d'email pour newsletter avec un champ email et un bouton d'envoi
- Enfin les boutons de la barre de navigation et de la section de présentation des bénéfices doivent tous renvoyés vers la quatrième section d'appel au téléchargement
- Bien sur, l'ensemble du projet doit être responsive
- L'arborescence du projet donnée vous permet de mener à bien votre mission, vous n'aurez pas besoin de fichiers supplémentaires
- Ne modifiez pas les fichiers sources materialize.css & materialize.js !
- Des fichiers custom.css & custom.js, vous permettront d'ajouter styles et scripts personnalisés
- Référez-vous le plus souvent à la documentation du framework Materialize
- Toutes les images nécessaires à l'intégration du projet vous sont fournies dans le dossier
- Comme d'habitude vous utiliserez du texte substitution (https://meettheipsums.com/)
- Se sensibiliser aux méthodes de travail Agiles
- Communiquer et répartir les tâches au sein de son équipe
- Finir le sprint 2 dans les objectifs de temps donnés par le client (toutes les tâches ont été validées)