Voir la source de Projet libre formation vidéo figma

{{bloc important|Projet réalisé dans le cadre d'un projet libre du Master MALTT par [[Utilisateur:Guillaume Ismaïli|Guillaume Ismaïli]] et [[Utilisateur:Elias E.|Elias El Hamdaoui]] }}

==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 [[Utilisateur:Guillaume Ismaïli|Guillaume Ismaïli]] et [[Utilisateur:Elias E.|Elias El Hamdaoui]] et est encadré par [[Utilisateur:Mattia A. Fritz|Mattia A. Fritz]].

Dans le milieu du UX design, le prototypage est une étape importante nécessitant l’utilisation d’un outil adapté ou logiciel permettant de réaliser les différents tests qui peuvent nous intéresser via une maquette (test utilisateurs, test des 5 secondes, test A/B…).

[[Figma]] est un outil pouvant être utilisé sur le web ou qui peut être installé directement sur votre ordinateur afin de construire votre maquette. Ce logiciel est gratuit et représente non seulement une alternative intéressante au logiciels payants mais permet également de s’en sortir avec des prototypes relativement complets. 

Ainsi, plusieurs informations sont à connaître et différents concepts sont à mobilisés afin de pouvoir vous lancer pleinement dans l’aventure Figma. 

Ce projet et cette série de capsules vidéo à pour objectif de vous introduire aux bases de son utilisation

===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 bibliothè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 mais aussi d’aller plus loin avec Figma en fonction de leurs objectifs.

Pour ce qui est des résultats possibles et atteignables, tout dépendra de votre objectif. A l’issue de cet article et des capsules vidéos qui y sont présentées, vous aurez des exemples concrets afin de pouvoir vous représenter une possibilité parmi tant d'autres de ce que l’on peut réaliser via l’utilisation de cet outil et de l’exploitation d’une partie de son potentiel.  

Objectifs : A la fin de ces capsules vidéo, vous aurez assimilé/compris 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é. 

===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|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==
[[Fichier:Bibliotheque figma screenshot.png|vignette|Capture d'écran des composants de la bibliothèque Figma]]
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, fenêtres modales 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.

La bibliothèque est disponible en accès libre à travers un fichier Figma. Les étudiant-es du cours ERGO II peuvent également la modifier selon les accès données pendant le cours. 

{{ Goblock | [https://www.figma.com/file/vKTwZ3ou6otcSP6U7h8qVi/bibliotheque-ergo-2 Fichier Figma avec la bibliothèque] }}

==Vidéos==

La formation se compose de plusieurs capsules vidéos créées en suivant des principes pédagogiques illustrés plus bas dans le document. La vidéo exploite également des éléments créés explicitement pour cette formation, comme par exemple la bibliothèque citée plus haut. Voici la liste des vidéos avec le lien pour y accéder :

# {{Goblock | [https://youtu.be/e1Ft0Y7vPtM Introduction à la formation] }}
#: Tout d'abord, une introduction nous permettra de placer le contexte, présenter les personnes à l'origine de cette projet et des vidéos ainsi que de présenter le plan plus amplement
#:
# {{Goblock | [https://youtu.be/32CwhWJduTw Introduction à Figma]}}
#: Introduction à [[Figma]] : à quoi ça sert, plan du storyboard, comment télécharger, création projet, présentation de l’interface.
#:
# {{ Goblock | [https://youtu.be/lM_Z-m03Ga0 Les bases de l'utilisation de Figma] }}
#: Utilisation de figma (création page, composant, interactivité, visualisation)
#:
# {{Goblock | [https://youtu.be/C1r03q_KBm0 Logique de conception avec Figma] }}
#: Utilisation de composantes, variantes et éléments récursifs au sein d'une même projet
#:
# {{ Goblock | [https://youtu.be/2sbqsWLzy4k Utilisation d'une bibliothèque] }}
#: Importer et exploiter une bibliothèque créée pour plusieurs projets, même - et surtout - par quelqu'un d'autre]
#:
# {{ Goblock | [https://youtu.be/3ZDFqiocy0c Création d’une maquette interactive simple] }}
#: Mise en pratique avec l'exemple de création d’une maquette interactive simple

==Storyboard==

Les tableaux suivants présentent divers éléments des vidéos réalisées dans le cadre de projet, notamment en décrivant les points suivants : 
* '''Scène''' : Correspondant aux nombre de scènes préconçues et permettant de se repérer d'un point de vue timeline 
* '''Interlocuteur''' : Permet de savoir quel interlocuteur va intervenir 
* '''Texte''' : Cette catégorie permet de connaître les textes qui sont écrits à l'avance ou le scénario prévu pour chaque scènes
* '''Action''' : La partie action regroupe surtout les interaction prévues ou éléments devant apparaître à l'écran si cela vaut la peine d'être notifié
* '''Notes / détails techniques simplifiés''' : Ce dernier point regroupe des éléments comme le type de plan utilisé, les détails en lien avec l'éclairage, l'apparition ou non d'éléments de décor mais aussi les points à ne pas négliger lors du tournage comme le lancement d'un screen-record afin d''illustrer les actions effectuées par l'interlocuteur lors d'un "tutoriel" par exemple.''

===Introduction générale à la formation===
{| class="wikitable"
|+
!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é 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
|}

===Introduction à Figma===
{| class="wikitable"
|+
!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 : 

<nowiki>https://www.figma.com/fr/downloads/</nowiki>

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é 
Décor léger

Couleur chaude
|}

===Utilisation de Figma===
{| class="wikitable"
|+
!Scène
!Interlocuteur
!Texte
!Notes et détails techniques simplifiés
|-
|1
|Guillaume
|Bonjour à toutes et à tous et bienvenue dans cette deuxième capsule vidéo visant à vous apprendre les bases de l’utilisation de Figma
Nous allons maintenant rentrer dans le vif du sujet et voir ensemble comment créer une page, qu’est ce qu’un élément et plus simplement comment en créer. Nous allons ensuite  enchaîner sur les interactions en terminant par la visualisation. 

Passons maintenant sur Figma afin d’expliciter un peu plus tout cela :
|Plan rapproché 

Décor léger

Couleur chaude
|-
|2
|Elias
|Afin de créer une page → cliquez sur le troisième onglet dans la navbar en haut à gauche et sélectionnez frame, suite à cela, une liste de résolution apparaîtra dans la navbar de droite (iphone, android…). Choisissez votre résolution dans la liste. 
Desktop est le choix “par défaut” si vous souhaitez effectuer des tests ou autre. 

Cette nouvelle page apparaît alors dans la navbar de gauche. Vous pouvez la renommer si vous le souhaitez. 

La page est maintenant créée 

Pour créer une deuxième page, on utilise une deuxième fois ce même processus. 

Afin d’introduire un texte, vous trouverez un élément représenté par un t majuscule (6éme élément de la navbar). Une fois l’élément sélectionné, vous pouvez créer une zone à l’endroit ou vous souhaitez l’insérer. Vous pouvez ensuite bien évidemment le modifier au besoin via les éléments de personnalisation dans la navbar de droite.

Maintenant afin de créer un bouton, vous pouvez sélectionner l’onglet “shape tools” 

Après l’avoir sélectionné vous pouvez cliquer sur rectangle et vous pouvez suivre le même processus que précédemment, vous pouvez créer l’élément en restant appuyer sur le click gauche et ensuite donner la taille de votre choix à ce rectangle. 

Vous pourrez observer qu’une fois sélectionné, vous pouvez modifier les paramètres qui sont propres à votre élément (taille, couleur, etc…) dans la navbar de droite (tout comme pour la majorité des éléments que vous pouvez créer). 

L’onglet prototype de la navbar permet d’ajouter de l’interaction à notre élément (ex: le click et le survol). 

Dès lors que vous voulez appliquer une interactivité précise, vous avez dans la navbar de droite deux éléments à prendre en compte une fois votre élément sélectionné, l’entrée et la sortie. 

Si vous souhaitez par exemple faire en sorte qu’un élément mène d’une page à l’autre, il suffit de choisir l’interaction d’entrée par exemple le “click”, puis on choisit l’action qui va être effectuée en retour, comme “navigate to”, et la cible. Ainsi lorsque vous cliquerez sur l’élément sélectionné, si tenté que celui-ci soit sur la bonne page, lorsque vous cliquerez dessus, vous passerez à la page cible sélectionnée. On peut donc comprendre qu’il y a un grand nombre de possibilités selon les actions que vous voulez mettre en place pour pouvoir créer votre prototype. 

Notes : Il est également possible de sélectionner une animation qui vous permettra de personnaliser l’interaction. 

Pour visualiser votre maquette cliquez sur présentation ("présent" avec le logo play) dans la navbar en haut à droite.  

Ceci ouvrira un nouvel onglet dans lequel vous pourrez observer le résultat obtenu et interagir avec ce dernier.
|Plan de ¾ 
Screen record de l’onglet Figma
|-
|3
|Guillaume
|Nous espérons que vous avez apprécié cette vidéo et nous vous invitons à aller vers la suivante qui va nous en dire un peu plus sur la logique de Figma et parler du concept central qu’est celui des composants.
|Plan rapproché 
Décor léger

Couleur chaude
|}

===Concept et logique de Figma===
{| class="wikitable"
|+
!Scène
!Interlocuteur
!Texte
!Notes et détails techniques simplifiés
|-
|1
|Guillaume
|Bonjour à toutes et à tous et bienvenue dans cette troisième capsule vidéo visant à vous apprendre les bases de l’utilisation de Figma.
Nous vous conseillons d’être bien attentifs étant donné que nous allons parler d’un sujet central de Figma : “les composants” 

Figma possède une approche du prototypage centrée sur les composants.

C’est cette approche qui fait sa particularité et qui permet de créer des maquettes interactives rapidement et facilement. Cette partie est relativement importante à comprendre et nécessite donc toute votre attention 

Les composants sont des éléments de vos maquettes qui sont réutilisables et personnalisables.

Chaque élément de votre maquette peut être transformé en composant, mais un exemple pratique sera ici beaucoup plus parlant .
|Plan rapproché 

Décor léger

Couleur chaude
|-
|2
|Elias
|Une fois que vous avez crées une forme et que vous l’avez sélectionné, 3 nouveaux items apparaissent : 
1 → éditer l’objet 

2 → créer un composant 

3 → utiliser comme un masque 

Un élément peut devenir ce que l’on appelle un composant, cela signifie que vous pouvez le réutiliser plusieurs fois et le personnaliser. 

Son design est personnalisable et vous pouvez en faire un composant interactif. 

Clique droit - créer un composant ou cliquer 

Votre élément devient un composant lorsque vous sélectionnez votre élément et que vous cliquez sur la fonctionnalité composant. 

On peut en créer une instance (rester appuyer sur alt), que vous pouvez ajouter à une page, en utilisant un principe plus ou moins proche du drag and drop.

Cette instance peut être vue en d’autres termes comme une sous-copie ou un élément fille si vous préférez de votre composant initial ou composant mère. 

Il est possible d’en mettre plusieurs selon le résultat attendu aux différents endroits de votre choix. 

Une chose intéressante à savoir est qu’un composant peut être réutilisable plusieurs fois et donc implanté à plusieurs endroits, il garderont alors tous le comportement de base de notre composant. 

Une chose intéressante à savoir est qu’un composant peut-être réutilisable plusieurs fois et donc implanté à plusieurs endroits. 

Ils garderont alors tous le même comportement que votre composant.
|Plan de ¾ 
Screen record de l’onglet Figma 

Principe : Faire un élément : exemple avec un rectangle, élément cliquable qui mène d’une page à l’autre
|-
|3
|Guillaume
|Dès lors que vous modifiez le composant ou élément mère, cela va venir modifier toutes les instances ou éléments fille. 
Cela dit, une chose importante à notifier est que vous pouvez détacher une instance du composant mère et ainsi faire en sorte qu'elle ne soit plus attachée à ce dernier et ne sera plus impactée par une quelconque modification. Elias va maintenant vous montrer cela via une démonstration technique.
|Plan rapproché 
Décor léger

Couleur chaude
|-
|4
|Elias
|Vous pouvez modifier une instance sans pour autant que cela n’influe sur un quelconque autre paramètre, en clair, si vous modifiez par exemple la couleur d’une instance X, cela n’aura pas d’impact sur votre instance Y parce que vous n’avez pas modifié votre composant de base. 
Pour autant, lorsque vous modifiez l’une des propriétés d’une instance, celle-ci devient indépendante mais les autres propriétés que vous n’avez pas modifiées restent quant à elles toujours les mêmes. 

Démonstration technique → couleur

En guise d’exemple concret, si vous modifiez la couleur d’une instance, celle-ci ne changera plus si vous modifiez la couleur de l’élément mère mais les autres propriétés étant toujours liées, si nous modifions ici la taille, celui-ci changera au même titre que toutes les autres instances ou éléments filles.
|Plan de ¾ 
Screen record de l’onglet Figma
|-
|5
|Guillaume
|Maintenant, nous devons parler des variants, qui est une fonctionnalité plutôt récente, la pratique parlant d’elle même, Elias va rapidement vous expliquer tout cela 
|Plan rapproché 
Décor léger

Couleur chaude
|-
|6
|Elias
|Une fois que vous avez crée un composant vous pouvez lui ajouter des variants
Cliquez sur votre composant, et sur l’onglet design cliquez sur le bouton + à côté du texte variant. Cela va automatiquement créer un nouveau variant que nous pouvons renommer comme souhaité (ici variant 2). 

Changement de couleur du variant - Sélectionnez une couleur différente, la couleur qui vous plaira. 

Enfin, il est possible d’ajouter de l’interactivité entre nos variants. Pour cela cliquons sur le premier variant, allons à droite sur l’onglet prototype, ajoutons une interaction. 

Pour notre exemple nous allons faire en sorte qu’en survolant notre élément celui-ci changera en devenant le variant 2. Encore une fois, vous pouvez ajouter une animation si vous le souhaitez. 

Notre variant et notre interaction sont désormais créés. 

Allons désormais tester notre variant, il faut pour cela appuyer sur le bouton play en haut à droite de l’écran. 

Nous pouvons voir clairement qu’en survolant notre élément, ce dernier devient effectivement de la même couleur que notre variant.
|Gros plan
Couleur chaude en fond 

Apparition de l’ordinateur dans le coin inférieur de l’écran pour la lecture
|-
|7
|Elias
|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 de ¾ 
Screen record de l’onglet Figma
|-
|8
|Guillaume
|En espérant que vous avez apprécié cette vidéo, nous vous disons à tout de suite pour la prochaine. 
|Plan rapproché 
Décor léger

Couleur chaude
|}

===La bibliothèque===
{| class="wikitable"
|+
!Scène
!Interlocuteur
!Texte
!Notes et détails techniques simplifiés
|-
|1
|Guillaume
|Bonjour à toutes et à tous et bienvenue dans cette quatrième capsule vidéo visant à vous apprendre les bases de l’utilisation de Figma.
Nous allons maintenant voir comment utiliser une bibliothèque dans figma.
|Plan rapproché 

Décor léger

Couleur chaude
|-
|2
|Elias
|Une bibliothèque est un fichier comportant un ensemble de composants personnalisables qui ont pour objectif d’être utilisés afin de gagner du temps dans vos futures maquettes.
Nous avons créé spécialement pour cette formation une bibliothèque qui est adaptée aux projets que vous aurez à mettre en place dans le cours “Ergo 2”
|Plan rapproché
Couleur chaude 

Décor léger
|-
|3
|Guillaume
|A titre informatif, sachez que la bilbiothèque est dinsponible en description de ces vidéos et que vous aurez juste à ouvrir cela tout comme un autre fichier que vous voudriez ouvrir sur Figma
|Gros plan 
Couleur chaude
|-
|4
|Elias
|Pour commencer, nous allons vous présenter les différents éléments de la bibliothèque :
''Présentation des éléments de la bibliothèque''
|Plan de ¾ 
Screen record
|-
|5
|Elias
|Pour ajouter un composant de la bibliothèque dans votre maquette, rien de plus simple, il vous suffit de sélectionner l’élément et d’effectuer un copier-coller vers votre maquette
|Plan rapproché
Couleur chaude 

Décor léger
|-
|6
|Elias
|Vous êtes désormais prêts à mettre toutes vos compétences en pratique afin de créer vos propres maquettes interactives.
|Gros plan ¾ 
Couleur chaude

fond noir
|-
|7
|Guillaume
|Merci à vous d’avoir suivi cette quatrième capsule vidéo et nous vous attendons pour la dernière qui vous présentera cette fois-ci une mise en pratique directement, encore une fois, sur l’outil Figma.
|Plan rapproché 

Décor léger

Couleur chaude
|}

===Mise en pratique===
{| class="wikitable"
|+
!Scène
!Interlocuteur
!Texte
!Notes et détails techniques simplifiés
|-
|1
|Guillaume
|Bonjour à toutes et à tous et bienvenue dans cette cinquième capsule vidéo visant à vous apprendre les bases de l’utilisation de Figma.
Nous allons maintenant voir un exemple concret que nous pouvons avoir via l’utilisation de Figma en plusieurs heures de travail comme ici.
|Plan rapproché 

Décor léger

Couleur chaude
|-
|2
|Elias
|Vous êtes désormais prêts à mettre vos connaissances en pratique en créant notre propre maquette interactive.
Voici le résultat final que nous obtiendrons à la fin de la vidéo :

Image de la maquette et commentaires généraux non prédéfinis avec illustrations des termes techniques.
|Plan de ¾ 
Screen record de l’onglet Figma
|-
|3
|Guillaume
|Et merci à toutes et à tous de nous avoir suivi jusqu’au bout, cette formation est maintenant terminée, du moins les capsules vidéos que nous avons tournées expressément pour vous. En espérant que vous avez apprécié, nous vous disons à bientôt j’espère. 
|Plan rapproché 
Décor léger

Couleur chaude
|}

==Revue de littérature==

Les capsules vidéos ont été créées en suivant des [[recommandations en création de vidéos pédagogiques]] issues de l'[[apprentissage multimédia]].

===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.<br>
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==
* Awad, E., Brouillette, Y., Cormier, C., & Turcotte, V. (2017). Planifier, réaliser et diffuser des vidéos éducatives : lignes directrices et suggestions à l'intention des enseignants.Consulté le 5 août 2019, sur profweb: https://www.profweb.ca/publications/dossiers/planifier-realiser-et-diffuser-des-videos-educatives-lignes-directrices-et-astuces-pour-les-enseignants
* Clark, R. C., & Mayer, R. E. (2008). Learning by viewing versus learning by doing: Evidence‐based guidelines for principled learning environments. Performance Improvement, 47(9), 5-13.
* Guo, P. J., Kim, J., & Rubin, R. (2014). How Video Production Affects Student Engagement: An Empirical Study of MOOC Videos. Proceedings of the first ACM conference on Learning, 41-50.
* Kartel, G. (2010). Does Language Matter in Multimedia Learning? Personalization Principle Revisited. Journal of Educational Psychology, 102(3), 615–624.
* Knight, J. K., & Wood, W. B. (2005). Teaching More by Lecturing Less. Cell Biology Education, 4, 298–310.
* Noetel, M., Griffith, S., Delaney, O., Harris, N. R., Sanders, T., Parker, P., ... & Lonsdale, C. (2021). Multimedia design for learning: An overview of reviews with meta-meta-analysis. Review of Educational Research, 00346543211052329.
* Tricot, A. (2017). Apport de la théorie de la charge cognitive à la différenciation pédagogique.