Projet libre formation vidéo figma
Présentation du projet
Introduction
Cette page EduTech Wiki a pour objectif de présenter un projet libre effectué en 2022 dans le cadre du cours “Ergo 2” du Master MALTT. Le projet est mené par Guillaume Ismaïli et Elias El Hamdaoui et est encadré par Mattia Fritz.
Description du projet
Le projet consiste en une série de capsules vidéos ayant pour objectif d’apprendre les bases de Figma qui est un logiciel de prototypage.
Ce projet est constitué de 5 capsules vidéos accompagnées d'une bilbiothèque, le contenu de ces éléments est détaillé dans la suite de cet article.
L’objectif est qu’à la fin des capsules vidéos, les étudiants aient assimilé la logique de Figma et soient capable d’utiliser cet outil afin de créer une maquette interactive et soient capables d’aller plus loin avec Figma en fonction de leurs objectifs.
Public cible
Le public cible de ce projet est l’ensemble des étudiants MALTT suivant le cours “Ergo 2”. Les étudiants de ce cours doivent créer une maquette interactive en utilisant un logiciel de prototypage, celui utilisé par défaut dans cours est Axure RP, l’objectif de ce cours est donc de présenter et d’introduire Figma qui est une alternative à ce logiciel. Cependant, ces capsules vidéos peuvent également s’adresser à toute personne souhaitant apprendre les bases de Figma pour le prototypage.
Bibliothèque
L’ensemble des capsules vidéos sont accompagnées d’une bibliothèque Figma qui est un fichier ayant pour objectif de faciliter la création de futures maquettes. Nous nous sommes basés pour sa conception sur les conventions en vigueur utilisées en UX design, mais nous avons aussi pris en compte les besoins du cours Ergonomie 2, c’est pourquoi les éléments de la bibliothèque sont destinés à des sites web.
La bibliothèque se divise en 4 différentes sections :
- Documentation : Cette première section explique le fonctionnement de la bibliothèque ainsi que son contenu.
- Éléments : Cette section contient le contenu principal utilisé dans l’ensemble des composants de la bibliothèque, c’est-à-dire la typographie et l’ensemble de les couleurs et de leurs nuances.
- Composants : Il s’agit de la section la plus importante de la bibliothèque, elle contient comme son nom l’indique l’ensemble de ses composants : Les boutons, les cartes, champs de texte, menus, modals et barres de navigation.
- Icônes : Cette dernière section contient l’ensemble des icônes de la bibliothèque “Material Icons” de Google afin que les utilisateurs puissent les ajouter à leurs maquettes. Nous avons choisi ces icônes car elles sont gratuites, libres d’accès et très utilisées pour le prototypage.
Voici à titre illustratif une capture d’écran des composants de la bibliothèque :
Storyboard
Vidéo 0 : Introduction
| Scène | Interlocuteur | Texte | Notes et détails techniques simplifiés |
|---|---|---|---|
| 1 | Guillaume | Bonjour à toutes et à tous et bienvenue dans cette introduction de notre formation dédiée à l’utilisation de l’outil Figma, qui sera ici utilisée pour le prototypage d’application.
Étant une alternative gratuite à d’autres logiciels comme Axure, il peut représenter un allié de choix. |
Plan rapproché
Décor léger Couleur chaude |
| 2 | Elias | Nous allons commencer par nous présenter :
Je suis Elias El Hamdaoui, étudiant en 2éme année Master MALTT à l’Université de Genève |
Plan rapproché
Pas de décor Couleur froide Sous titre (type lower third) : Prénom NOM Statut - année - nom du master - université |
| 3 | Guillaume | Et pour ma part, je suis Guillaume Ismaïli, également en 2éme année Master MALTT à l’Université de Genève | Plan rapproché
Pas de décor Couleur froide en fond Sous titre (type lower third) : Prénom NOM Statut - année - nom du master - université |
| 4 | Elias | Nous réalisons ces capsules vidéos dans le cadre d’un projet libre pour la TECFA.
Si vous souhaitez en savoir plus, davantage d’informations seront disponibles en description. |
Plan rapproché
Pas de décor Couleur froide en fond |
| 5 | Guillaume | Nous vous proposerons ici une série de capsules vidéo ayant pour but de vous aider à l’utiliser vous est ici proposé et se fera dans l’ordre suivant :
1) Introduction à figma : Présentation de l’interface et création d’un projet 2) Utilisation de figma : Création de page | Interactivité | Visualisation 3) Concept/logique de figma | Les composants 4) Comment utiliser une bibliothèque 5) Mise en pratique : Création d’une maquette interactive simple et exemple d’utilisation |
Plan rapproché
Apparition des titres des vidéos à l’écran Retour plan rapproché pour l’annonce de la vidéo 5 |
| 6 | Elias | A la fin de ces capsules vidéo, vous aurez assimilé la logique de Figma et vous serez capable d’utiliser cet outil afin de créer une maquette interactive.
Vous serez ensuite capable d’aller plus loin en fonction de votre projet et de votre créativité. Nous vous invitons bien évidemment à effectuer des actions proches de celles que vous verrez à l’écran afin de vous approprier au mieux l’outil et nous allons démarrer sans plus attendre ! |
Plan rapproché
Multi-cam Décor léger Couleur chaude |
| 7 | Guillaume | D’avance, nous nous réjouissons de vous retrouver tout au long de cette formation, et je vous invite donc à aller vers la première vidéo | Plan rapproché
Décor léger Couleur chaude |
Vidéo 1 : Introduction à figma
| Scène | Interlocuteur | Texte | Notes et détails techniques simplifiés |
|---|---|---|---|
| 1 | Guillaume | Bonjour à toutes et à tous et bienvenue dans la première vidéo de cette formation au sujet de l’utilisation de Figma et de son interface, ne perdons pas de temps et allons d’abord voir comment télécharger le logiciel.
La première chose à faire est de télécharger Figma, vous pouvez taper Figma sur internet ou utiliser le lien qui est en description : https://www.figma.com/fr/downloads/ L'avantage que représente le téléchargement de Figma est que vous pouvez travailler hors-connexion, ainsi vous avez le choix de l’utilisation mais le téléchargement reste le plus sûr afin de pouvoir y accéder en tout temps. Notez tout de même qu’il est également possible de ne pas le télécharger et d’utiliser la plateforme web qui propose les mêmes fonctionnalités. Et je vous propose maintenant de passer à la présentation de l’interface |
Plan rapproché
Décor léger Couleur chaude Screen record (téléchargement de Figma) |
| 2 | Elias | Plan de discours :
Accueil → création du fichier Présentation de l’interface : En haut de l’écran barre d’outils / Titre au centre En haut à gauche : Onglet 1 : L’équivalent de flies ou fichier, accéder aux options, exporter etc. Onglet 2 : Move → par défaut Scale → Changer d’échelle de manière proportionnelle (= garder touche shift enfoncée) Onglet 3 : Frame → Créer une “frame” qui est l'équivalent d’une page ou d’un écran Slice → Sert à découper un élément Onglet 4 : Formes → Vous avez des formes de bases (rond, lignes, triangles) que vous pourrez utiliser par la suite Onglet 5 : Outils → Crayon et Plume qui vous servent à tracer des formes si vous en avez le besoin Onglet 6 : Ajouter une zone de texte Onglet 7 : Hand tool qui sert à vous déplacer librement dans la maquette Onglet 8 : Commentaire → Vous pouvez ajouter un commentaire sur un élément de la maquette En haut à droite : Profil Share → Partager votre maquette Visualisation → vue d’ensemble du prototype Zoom Tout à gauche : Layers : les pages et les éléments de la page sur laquelle vous êtes Asset : Chercher des composants avec la barre de recherche, accéder aux composants et accéder à des librairies. Nous allons expliciter le terme de composants dans la prochaine vidéo Liste des éléments de votre maquette Tout à droite : Design → Caractéristiques graphiques de votre élément (couleur, effet, taille etc.) Prototype → Interactivité de l’élément Propriétés → Propriétés d’un élément précis, qui simplifie l’export au format code, par exemple en CSS, IOS ou Android mais qui est généralement peu utilisé dans notre cas de figure. |
Plan de trois-quart
Screen record de l’écran de Figma |
| 3 | Elias | Cependant, nous ne traiterons pas en détail les possibilités offertes par cet onglet comme nous réalisons ces vidéos dans le cadre du module ERGO II du master MALTT. | Plan rapproché
Décor léger Couleur chaude |
| 4 | Guillaume | Outro :
Maintenant que nous avons pris connaissance de l’interface et que nous savons créer un projet, il est désormais temps d’apprendre à créer une page, y introduire un élément et lui ainsi que de l’interactivité et enfin visualiser cette même page. En espérant que vous avez apprécié cette vidéo, nous vous disons à tout de suite pour la prochaine ! |
Plan rapproché
Apparition des titres des vidéos à l’écran Retour plan rapproché pour l’annonce de la vidéo 5 |
Vidéo 2 : Utilisation de figma
| Scène | Interlocuteur | Texte | Notes et détails techniques simplifiés |
|---|---|---|---|
| 1 | Guillaume | Bonjour à toutes et à tous et bienvenue dans cette introduction de notre formation dédiée à l’utilisation de l’outil Figma, qui sera ici utilisée pour le prototypage d’application.
Étant une alternative gratuite à d’autres logiciels comme Axure, il peut représenter un allié de choix. |
Plan rapproché
Décor léger Couleur chaude |
| 2 | Elias | Nous allons commencer par nous présenter :
Je suis Elias El Hamdaoui, étudiant en 2éme année Master MALTT à l’Université de Genève |
Plan rapproché
Pas de décor Couleur froide Sous titre (type lower third) : Prénom NOM Statut - année - nom du master - université |
| 3 | Guillaume | Et pour ma part, je suis Guillaume Ismaïli, également en 2éme année Master MALTT à l’Université de Genève | Plan rapproché
Pas de décor Couleur froide en fond Sous titre (type lower third) : Prénom NOM Statut - année - nom du master - université |
| 4 | Elias | Nous réalisons ces capsules vidéos dans le cadre d’un projet libre pour la TECFA.
Si vous souhaitez en savoir plus, davantage d’informations seront disponibles en description. |
Plan rapproché
Pas de décor Couleur froide en fond |
| 5 | Guillaume | Nous vous proposerons ici une série de capsules vidéo ayant pour but de vous aider à l’utiliser vous est ici proposé et se fera dans l’ordre suivant :
1) Introduction à figma : Présentation de l’interface et création d’un projet 2) Utilisation de figma : Création de page | Interactivité | Visualisation 3) Concept/logique de figma | Les composants 4) Comment utiliser une bibliothèque 5) Mise en pratique : Création d’une maquette interactive simple et exemple d’utilisation |
Plan rapproché
Apparition des titres des vidéos à l’écran Retour plan rapproché pour l’annonce de la vidéo 5 |
| 6 | Elias | A la fin de ces capsules vidéo, vous aurez assimilé la logique de Figma et vous serez capable d’utiliser cet outil afin de créer une maquette interactive.
Vous serez ensuite capable d’aller plus loin en fonction de votre projet et de votre créativité. Nous vous invitons bien évidemment à effectuer des actions proches de celles que vous verrez à l’écran afin de vous approprier au mieux l’outil et nous allons démarrer sans plus attendre ! |
Plan rapproché
Multi-cam Décor léger Couleur chaude |
| 7 | Guillaume | D’avance, nous nous réjouissons de vous retrouver tout au long de cette formation, et je vous invite donc à aller vers la première vidéo | Plan rapproché
Décor léger Couleur chaude |
Revue de littérature
Principes de Clark et Mayer
Nous nous sommes principalement appuyé sur les principes de Clark et Mayer (2008) :
- Pour commencer, nous avons respecté le principe de personnalisation de Clark et Mayer (2008) qui se décompose en 3 points :
- Utiliser un style conversationnel plutôt qu’un style formel (principe confirmé par Kartel, 2010)
- Utiliser des agents pédagogiques à l’écran pour promouvoir l’apprentissage
- Rendre l’auteur visible pour promouvoir l’apprentissage (principe confirmé par Guo, Kim et Rubin, 2014)
- Nous avons créé plusieurs vidéos abordant chacune un aspect du concept abordé afin de réduire la difficulté du contenu enseigné (principe de segmentation)
- Nous avons privilégié l’oral plutôt que l’écrit pour les explications (principe de modalité)
- Nos explications orales ne sont pas accompagnées d’explication écrites (principe de redondance)
- Nous avons mis en évidence certains éléments en ajoutant des titres, en les encadrant etc (principe de signalement, confirmé par Noetel et al., 2021)
- Nos explications orales ont été synchronisées avec le matériel pictural correspondant (principe de contiguïté)
- Enfin, nous avons privilégié la voix humaine à la voix synthétisée (principe de la voix)
Principes de Tricot
Voici la liste des principes de Tricot sur lesquels nous nous sommes appuyés :
- L'effet d'attention partagée selon lequel il est conseillé d'éviter toute information supplémentaire (comme les images décoratives) qui se trouve à côté du problème réel et qui peut distraire l'apprenant.
- L'effet de modalité selon lequel il est préférable de présenter deux sources d'information dans des modalités différentes (par ex. auditive et visuelle) plutôt que d'utiliser une seule modalité.
- L'effet de disparition progressive du guidage selon lequel il convient de présenter progressivement aux élèves des tâches nécessitant de plus en plus d'autonomie
Reste de la revue de littérature
Awad, Brouillette, Cormier et Turcotte (2017) préconisent de faire des vidéos de 5 minutes, maximum 10 minutes pour les sujets les plus complexes, c’est pourquoi l’ensemble de nos vidéos ont une durée qui ne dépassent pas 10 minutes.
Enfin, Knight et Wood (2005) mettent en avant qu’un apprentissage actif permet de mieux apprendre qu’un apprentissage passif, c’est pourquoi nous invitons les spectateurs à effectuer des manipulations au cours de nos capsules vidéos.
Bibliographie
...