Naviguer jusqu'au contenu principal

La puissance de l'apprentissage basé sur le produit

David CurranEducation Learning Specialist, Figma
Illustration d'une araignée sur sa toile communiquant avec d'autres insectes

Une différence énorme existe entre l'idée et sa réalisation : c'est là que l'apprentissage a lieu. Voici comment découvrir concrètement le design avec Figma.

Partager La puissance de l'apprentissage basé sur le produit

Illustration par Allie Sullberg

À mesure que les élèves accèdent davantage à des outils de création dans les domaines du graphisme, de l'informatique et des STIM, la profondeur de l'apprentissage évolue. Ils passent d'un travail basé sur le projet à un travail basé sur le produit, ce qui signifie que, au lieu de présenter leurs idées sous forme d'affiches ou de diaporamas, ils réalisent l'objet lui-même, qu'il s'agisse d'une application, d'un prototype ou d'une expérience interactive. En accomplissant le travail, et pas seulement en le décrivant, ils développent d'autres types de compétences, notamment la capacité :

Selon étude de Gallup, 46 % des étudiants de la génération Z affirment que leur intérêt pour l'apprentissage est stimulé par la pratique, et environ 1 sur 3 déclare mieux apprendre grâce à des liens avec le monde réel.

  • De collaborer dans un environnement numérique partagé
  • De donner et de recevoir des critiques sur le design
  • De mener des recherches auprès des utilisateurs et de concevoir en gardant à l'esprit un public réel
  • D'apporter des améliorations en se basant sur un feedback, au lieu de simplement rendre un travail et passer à autre chose
  • De passer avec fluidité de la conception visuelle au code et de développer la dextérité sur laquelle s'appuient les équipes professionnelles

Si vous enseignez l'informatique et êtes prêt à passer au code, vous pouvez le faire, avec Dev Mode.

Avec Figma for Education, qui offre aux classes un accès gratuit à Figma Design, les élèves dépassent les concepts abstraits pour apprendre concrètement à concevoir, à tester et à itérer directement sur le canvas. Nous avons constaté par nous-mêmes que cela rend le travail plus stimulant et les leçons, en fin de compte, plus marquantes. Voici à quoi ressemble cette évolution dans trois classes réelles, et comment vous pouvez l'intégrer à votre propre programme dès cet automne.

Un collage coloréUn collage coloré

Figma Design : Les essentiels pour les cours de CTE au lycée est un programme gratuit en 10 parties conçu pour les enseignants du collège et du lycée. Des tutoriels vidéo et des fichiers d'accompagnement aident les élèves à apprendre les bases à leur propre rythme.

Enseigner aux classes à travailler en équipe

Maddison Dorsey enseigne le design graphique dans un lycée bénéficiant du programme Title 1 de l'Illinois, où chaque élève travaille sur un Chromebook. Comme ces appareils ne permettent pas d'exécuter des logiciels de bureau installés, l'utilisation de Figma directement dans le navigateur s'est imposée comme le choix naturel pour sa classe, où les élèves conçoivent des emballages de canettes, des pochettes d'album, des jeux de société et des prototypes d'applications Android entièrement fonctionnels. Que le modèle soit imprimé pour que les élèves puissent le manipuler à la main ou qu'il s'agisse d'un produit numérique avec lequel ils peuvent interagir, l'expérience consistant à créer quelque chose de tangible suscite l'engagement, la curiosité et la créativité.

Lorsqu'une classe entière travaille au sein d'une équipe Figma partagée, les étudiants répartissent les tâches comme le font les équipes professionnelles : une personne s'occupe du kit UI, une autre crée les écrans et une troisième se consacre à la recherche. Cette structure ouvre également la porte à une critique productive. « Ce que j'aime particulièrement, c'est qu'ils publient leurs travaux en cours dans FigJam et utilisent des notes adhésives pour se faire des critiques mutuelles », explique Maddison. Elle peut voir en temps réel qui travaille sur quoi et déceler les problèmes avant qu'ils ne prennent de l'ampleur ; ainsi, l'ensemble du processus, et pas seulement le produit fini, offre aux étudiants l'occasion de recevoir un feedback.

Slide 1 sur 4
Design de découpe pour la boisson énergisante Groove Design de découpe pour la boisson énergisante Groove
Designs de découpe d'emballages pour boissons énergisantes

Motiver les élèves à se surpasser

Kristine Monsada enseigne aux élèves de la 6e à la 8e année dans le Nevada. Lorsqu'elle a présenté Figma Design à ses élèves dans le cadre d'un projet de conception d'application, elle a été surprise par la rapidité avec laquelle ils l'ont pris en main et ont transformé des idées brutes en prototypes fonctionnels. « Lorsque j'ai fait une première démonstration de Figma et que je leur ai montré comment un bouton de navigation pouvait relier un écran à un autre, ils ont réagi en disant : "Waouh, on peut faire ça ?" », raconte Kristine. « Et puis ils ont commencé à se dire : "D'accord, là, ça semble vraiment réel." »

Le canvas a permis à ses élèves de faire avancer leurs idées plus encore, plus rapidement. Au lieu de remplir un modèle ou de travailler dans un rectangle aux dimensions fixes, les élèves partent d'une page blanche, et rien n'empêche donc une idée d'évoluer au-delà de la consigne initiale. Un de ses élèves travaillait sur un projet d'identité visuelle pour un restaurant lorsqu'il a décidé que son application devait également inclure un bouton reproduisant le son du déclenchement d'un appareil photo, une vidéo à défilement, plusieurs parcours interactifs et des animations. Aucun de ces éléments ne faisait partie du devoir, mais il a tout de même passé des heures sur YouTube à chercher comment les fabriquer.

Même après la fin du projet, Kristine voyait toujours des élèves mettre à jour leurs fichiers. « Même la nuit, je vois "Modifié il y a trois heures", » dit-elle. « Ils continuent tout simplement parce qu'ils adorent itérer. »

Prototypes d'écrans basse et haute fidélitéPrototypes d'écrans basse et haute fidélité
Prototypage d'interactions avec des connexions visibles entre les écrans
Kit UI présentant des composants, des couleurs, des icônes, des polices, et plus encoreKit UI présentant des composants, des couleurs, des icônes, des polices, et plus encore
Design system organisé dans un fichier Figma
Prototype haute fidélité d'une application de commande de The Burger HousePrototype haute fidélité d'une application de commande de The Burger House
Création d'une application de commande de restaurant

Relier les leçons à un impact dans le monde réel

Matt Goodman a mis ses étudiants en ingénierie et en technologie en lien avec un besoin réel de la communauté : faciliter l'inscription des lycéens au bénévolat auprès d'une banque alimentaire locale. Les étudiants ont mené une étude auprès des utilisateurs et interrogé le personnel de la banque alimentaire afin d'identifier les points de friction du processus d'inscription existant. Ils ont ensuite élaboré des prototypes à l'aide de briques Lego et de fiches cartonnées, avant de transposer leurs idées dans Figma pour réaliser des prototypes haute fidélité.

Les étudiants ont présenté leurs travaux au personnel de la banque alimentaire, en faisant la démonstration de prototypes cliquables et en recueillant le feedback direct des personnes appelées à utiliser l'application. Ils ont ensuite retravaillé leurs designs pour tenir compte de ce feedback, apprenant ainsi à gérer la critique, à intégrer les besoins des utilisateurs et à procéder par itérations, en procédant d'une manière bien différente de la simple présentation d'une affiche ou d'un diaporama. « Au fil du projet, ils ont amélioré leurs compétences en communication en présentant leur processus de conception et leurs prototypes, et en prenant des notes sur les réflexions de leur client », explique Matt. « Un aspect important consiste à aider les étudiants à se sentir à l'aise pour recevoir et mettre en œuvre le feedback des utilisateurs. »

Le résultat final a largement dépassé le cadre de la classe pour s'étendre à des acteurs extérieurs au système scolaire, amenant les étudiants à tenir compte de réalités concrètes. « L'intérêt ne résidait pas seulement dans le fait que les étudiants soient allés à la rencontre de la communauté », explique Matt. « C'est qu'ils disposaient de quelque chose de démontrable qu'ils pouvaient mettre entre les mains des gens pour leur permettre de le tester. C'est une conversation très différente de celle qui consiste à montrer une image de ce que vous construiriez. »

Slide 1 sur 4
Esquisses d'écran sur papierEsquisses d'écran sur papier
Esquisses de design préliminaires

Ce à quoi l'apprentissage orienté sur le produit peut ressembler dans votre classe

Le processus de création d'un prototype cliquable invite les étudiants à s'inscrire dans des boucles de rétroaction ; ils ne se contentent donc pas de décrire des idées, mais apprennent à les affiner. Essayez ces exercices de conception, qui invitent les élèves à imaginer des solutions en lien avec leur quotidien :

  • Repenser une application pour la rendre plus accessible. Que faudrait-il changer pour qu'une personne ayant des capacités, un parcours ou un appareil différents puisse utiliser cette application aussi facilement que tout le monde ?
  • Repenser le parcours de paiement ou de panier pour le rendre plus convivial. À quelle étape les utilisateurs bloquent-ils, et qu'est-ce qui rendrait l'expérience plus rapide ou plus claire ?
  • Concevez une application pour résoudre un problème au sein de votre communauté. De quoi votre ville a-t-elle besoin qui n'existe pas encore ? Qu'est-ce qui rendrait votre quartier plus sûr, plus connecté ou plus facile à parcourir ?
  • Repensez une application que vous utilisez tous les jours. Que changeriez-vous si vous étiez aux commandes ? Qu'est-ce qui, selon vous et vos camarades de classe, pourrait être amélioré ?
  • Concevez une application pour résoudre un problème au sein de votre école. Perdu et trouvé ? Inscriptions aux clubs ? Une meilleure façon de savoir ce qu'il y a au déjeuner ?
  • Concevez une application pour aider les étudiants à se sentir plus connectés. L'appartenance sociale est l'un des défis majeurs au collège et au lycée à l'heure actuelle. Que concevriez-vous pour aider ?

Lorsque les élèves voient comment leur travail peut avoir un impact concret, leur envie d'apprendre grandit. « Si ce cours m'a appris quelque chose, dit Kristine, c'est que les élèves sont prêts à apprendre quelque chose qu'ils trouvent vraiment, vraiment génial. »

Rendez-vous sur figma.com/education pour créer un compte d'organisation gratuit. Figma for Education inclut des licences gratuites pour toute votre classe ainsi qu'une fonctionnalité d'authentification unique, permettant aux élèves de démarrer sans la moindre difficulté. Les enseignants peuvent vérifier leur statut éducatif en soumettant un formulaire directement sur figma.com/education/apply.

Créer et collaborer avec Figma

Se lancer gratuitement
Powered by Fruition