Projet Libre
Les Makers vont imaginer, concevoir et créer leur propre application mobile en utilisant Figma pour les wireframes et Thunkable pour le développement. Ils auront l’occasion de partager leurs idées, de coder les fonctionnalités, d’ajouter des graphismes amusants et de présenter leurs réalisations aux autres participants.
Objectifs pédagogiques
- Créer des wireframes dans Figma et visualiser des idées d’appli.
- Se perfectionner sur Thunkable et coder pour développer l’appli.
- Encourager la créativité avec des fonctionnalités uniques.
- Favoriser la collaboration et le partage d’idées.
- Découvrir le processus complet de conception et développement d’une appli.
Compétences techniques
- Maîtrise de l’outil de développement d’applications mobiles (Figma & Thunkable).
- Conception d’interfaces utilisateur conviviales pour les applications mobiles.
- Programmation d’actions interactives et de fonctionnalités spécifiques à l’application.
- Intégration de données et de contenus dans l’application.
- Résolution de problèmes techniques liés au développement d’applications.
Compétences design
- Création d’interfaces utilisateur intuitives et esthétiquement plaisantes.
- Utilisation de principes de conception pour améliorer l’expérience utilisateur.
- Mise en page et organisation efficaces des éléments de l’application.
- Choix de couleurs, de polices et de styles visuels cohérents.
- Tests d’utilisabilité et d’ergonomie pour optimiser l’interface utilisateur.
Compétences projet
- Collaboration au sein d’une équipe de développement pour concevoir et créer une application mobile.
- Planification et gestion du temps pour respecter les délais du projet.
- Communication efficace au sein de l’équipe pour coordonner les tâches et les responsabilités.
- Évaluation et ajustement du projet en fonction des retours des utilisateurs et des besoins du marché.
- Présentation et démonstration du projet aux autres Makers.
La place dans le module
Cette activité vient après l’activité Découvre l’UX/UI et Figma et est la dernière du Module
Jour 1
Jour 2
Jour 3
Jour 4
Jour 5
1h
🤩
🤩
30 min
🤩
🤩
30 min
🤩
🤩
1h
🤩
🤩
Matériel
- Un ordinateur avec une connexion Internet
- Un compte Gmail
- Un compte Figma
- Un compte Thunkable
Déroulé de l'activité
Segmentation de l’activité
- Segment 1 (1 h) – Conception et Création des wireframes
- Segment 2 (30 min) – Finalisation des wireframes et partage
- Segment 3 (30 min) – Import des projets Figma dans Thunkable
- Segment 4 (1 ) – Code de tous les composants – Version 1
- Segment 5 (1 h) – Débogage V1 et début du code V2
- Segment 6 (30 min) – Débogage des blocs et fin Version 2
- Segment 7 (30 min) – Juiciness graphismes
- Segment 8 (1 h) – Dernières mises au point, partage et échanges
Détails de l’activité
Segment 1 (1h) Conception et Création des wireframes
1 / Les Wireframes Dévoilés
- Explique comment Figma est un outil génial pour créer des designs d’application, et montre comment utiliser les différentes fonctionnalités.
- Explique ce qu’ils sont et pourquoi ils sont importants. Encourage les Makers à exprimer leurs idées de manière simple et à représenter les différentes pages de l’application sous forme de schémas.
- Pour rendre cela plus amusant, tu peux leur montrer comment dessiner des formes simples dans Figma et comment les organiser pour créer les premières esquisses de l’appli.
Segment 2 (30 min) Finalisation des wireframes et partage
1 / Peaufiner les wireframes
- Encourage les Makers à affiner leurs schémas, en ajoutant plus de détails et en s’assurant que l’interface est facile à utiliser.
2 / Partager les idées
- Demande à chacun de partager ses wireframes avec le groupe. Encourage les autres participants à donner des commentaires constructifs et des suggestions pour améliorer les designs.
- Organise une séance de « brainstorming » où les Makers peuvent exprimer leurs idées et s’inspirer mutuellement. Tu peux aussi utiliser un tableau blanc ou un outil de tableau virtuel pour noter les idées de tout le monde.
Segment 3 (30 min) Import des projets Figma dans Thunkable
1 / Importer les projets Figma
- Montre comment importer les wireframes de Figma dans Thunkable pour passer à l’étape de codage.
2 / Partager les idées
- Explique comment ajouter des composants spéciaux dans Thunkabl.
- Fais une démonstration en direct de l’importation des wireframes dans Thunkable.
Segment 4 (1 h) Code de tous les composants – Version 1
1 / Importer les projets Figma
- Montre comment coder les composants un par un pour créer la version 1 (V1) de l’application.
2/ Fonctions avancés
- Explique comment ajouter des fonctionnalités avancées sur l’appli, comme la géolocalisation ou l’utilisation de la webcam.
- Divise cette étape en petites étapes, en commençant par coder un composant à la fois, puis en les combinant pour créer la V1.
- Encourage les Makers à tester chaque fonction au fur et à mesure.
Segment 5 (1 h) Débogage Version 1 et début Version 2
1/ Test et débogage
- Montre comment tester l’appli pour détecter les erreurs et les bugs, et comment les corriger.
2/ Ajout de nouvelles fonctionnalités
- Explique comment ajouter de nouvelles fonctionnalités à la V2 de l’appli pour la rendre encore plus géniale !
- Organise une séance de démonstration où tu fais une démonstration de débogage en direct.
- Encourage les Makers à poser des questions et à partager leurs propres solutions.
Segment 6 (30 min) Débogage des blocs et fin Version 2
1/ Débogage des blocs
- Montre comment déboguer les blocs de code dans Thunkable pour s’assurer que tout fonctionne correctement.
2/ Finir la V2
- Encourage les Makers à ajouter les dernières touches à leur application pour la rendre vraiment unique et spéciale.
Segment 7 (30 min) Juiciness graphismes
1/ Rendre l’app fun
- Montre comment ajouter des graphismes et des animations cool à l’appli pour la rendre encore plus amusante à utiliser.
2/ Style personnel
- Encourage les Makers à ajouter leur touche personnelle aux graphismes et à choisir des couleurs et des illustrations qui reflètent le thème de leur application.
Segment 8 (1h) Dernières mises au point, partage et échanges
1/ Peaufinage final
- Aide les Makers à apporter les dernières modifications à leur application pour qu’elle soit parfaite.
2 / Partage des réalisations
- Organise une présentation où chaque Maker présente son application aux autres participants.
- Encourage les Makers à expliquer les choix qu’ils ont faits en matière de conception et de fonctionnalités, et à demander des conseils et des suggestions aux autres participants.