Ceci est une information sur BIG, un outil de création de diaporama en HTML-CSS-JS. Cet outil est utilisable après avoir acquis les bases de l’édition de code et de l’utilisation des langages fondamentaux du Web (HTML et CSS). Il ne s’agit pas d’un cours mais d’une présentation des possibilités offertes par le framework BIG.
Voici une version française personnalisée de la présentation de BIG. Soyez attentif à la taille du texte d’une diapositive à l’autre. Selon le concepteur de l’outil, BIG s’appuie sur la méthode Takahashi.
La navigation dans le diaporama s’effectue soit en cliquant sur chaque diapositive soit en utilisant les flèches du clavier. Vous pouvez utiliser la touche J (Jump) pour visualiser des miniatures de chaque diapositive (un clic sur une miniature affiche la diapositive correspondante). La touche P (Print) vous permet d’afficher une version imprimable du diaporama. La touche T (Talk) permet de revenir à l’affichage normal de la présentation.
La méthode Takahashi consiste à utiliser seulement quelques mots par diapositive, affichés en grande taille pour focaliser brièvement l’attention des spectateurs-auditeurs. Les diapositives sont alors une succession de mots clés balisant le discours du présentateur. Elles sont présentées à une cadence relativement rapide, au fil du commentaire oral.
L’application stricte de la méthode Takahashi nécessite d’accompagner la présentation visuelle d’un discours plus détaillé (diffusé à l’oral ou à l’écrit, en direct ou en différé). Sans commentaires supplémentaires, un diaporama affichant seulement des mots clés demeure hermétique (ce qui est souvent le cas, même dans les diaporamas avec des images).
Textes sur images (prototypes)
J’ai voulu expérimenter le positionnement de textes de diverses longueurs sur des images occupant le fond de chaque diapositive. J’ai envisagé plusieurs cas de figure en veillant à préserver la fonctionnalité des touches J (Jump) et P (Print).
Les images proviennent du site icons8. Elles ont été téléchargées à une époque où ces images étaient proposées gratuitement.
Texte de taille variable en fonction de la longueur du texte
Quand l’image est présentée sans texte, les miniatures ou les cadres affichés en utilisant les touches J (Jump) ou P (Print) affichent ni texte ni image !
Texte de taille fixe, adaptée à la largeur de la fenêtre de navigation
Dans ce cas, on retrouve le principe des diaporamas habituels réalisés avec des outils plus classiques, sans adaptation automatique de la taille du texte en fonction de la longueur des textes saisis.
Diaporamas avec textes et images mais sans commentaires
De nombreuses information peuvent être transmises sous forme de diaporama, sans nécessairement être commentées oralement. De tels diaporamas ont été nommés “slidedocs” par Nancy Duarte, ce que nous pourrions traduire par “diacuments” (en créant un mot valise à partir de diapo et document).
Combinaisons de 2 frameworks
Pour élargir le potentiel de présentation de BIG, j’ai testé la combinaison des CSS natives de BIG avec celles du framework norvégien W3CSS.
Des styles personnalisés se sont avérés nécessaires pour améliorer la présentation mais les touches J (Jump) et P (Print) sont pour le moment inutilisables dans ce diaporama expérimental !
Voici quelques exemples d’utilisation expérimentale de l’outil BIG inspirés des codes de la bande dessinée. Les touches J (Jump) et P (Print) fonctionnent pour les diaporamas présentés dans cette section.
Diapositives-cases
Voici un diaporama-BD dans lequel ont été combinées les CSS natives de BIG et les classes proposées par le framework W3CSS.
Le diaporama suivant fonctionne également sur le principe des diapositives-cases. Les bulles ont été ouvertes pour simplifier la composition des diapos-cases. Les illustrations utilisées ont été téléchargées sur le site d’un illustrateur, puis retouchées pour s’adapter au scénario envisagé.
Le diaporama Audio, Visuo et Gestuo a été réalisé selon les mêmes techniques, avec des illustrations réalisées par mes soins.
Diaporama Big avec texte seulement
Les diaporamas suivant ne présentent très peu d’images. Ils peuvent être publiés sans commentaire oral.
Les diaporamas intégrés dans un site Web
Il est parfois utile de présenter seulement du texte, en plusieurs diapositives bien structurées. Intégrés à un site Web, ces diaporamas ne nécessitent pas de commentaires, ils informent les lecteurs par le seul texte présenté.
BIG facilite la mise en œuvre de tels supports. En soignant le rendu du texte (en utilisant un nombre limité de couleurs étagées réversibles), il est possible de transmettre ainsi des informations écrites sous une forme simple et fonctionnelle.
Intégration d’une diapo-lien
L’image ci-dessous pointe vers un diaporama hébergé sur un autre serveur. En cliquant sur l’image, vous ouvrez un nouvel onglet dans lequel s’affiche le diaporama. La navigation dans le diaporama s’effectue alors avec les flèches du clavier, les touches J (Jump) ou P (Print) et la touche T (Talk).
Il est cependant envisageable de placer un diaporama BIG fonctionnel directement dans le corps de la page Web. Le diaporama ci-dessous est une version plus complète du précédent diaporama. Il a été intégré dans cette page Web en utilisant le code HTML suivant :
La version présentée ci-dessus permet de constater qu’en utilisant les mêmes couleurs (noir, blanc, bleu moyen, gris moyen) on obtient une ambiances différente en changeant juste la fonction attribuée aux couleurs réversibles d’un nuancier bien étagé.
Les diaporamas avec texte défilant remplaçant les commentaires
Pour compenser l’absence de commentaire oral, il est envisageable de faire défiler du texte en pied de diapositive. La technique a été mise en œuvre, en adaptant le framework BIG. Vous en avez une illustration dans ce diaporama.
Dans ce cours, vous allez apprendre à utiliser l’outil en ligne Markmap. Cet outil permet de réaliser des cartes mentales heuristiques à partir d’une simple structure textuelle éditée en langage Markdown.
Anticiper la réalisation
Comme pour tout projet de communication, il est important de bien préparer ses contenus. Dans notre contexte, nous allons livrer au public (publier) une carte mentale heuristique. Il s’agit d’une arborescence centrée sur un sujet central à partir duquel se ramifient des sujets secondaires sur plusieurs niveaux.
Voici la carte modèle proposée par Markmap à l’ouverture de sa fenêtre d’édition. Le texte permettant de créer cette carte est le code Markdown placé dans la partie gauche de l’éditeur.
➜ Pour vous aider à concrétiser ceci, je vous ai préparé un document en MarkDown que vous allez traiter de la manière suivante :
visualiser le code Markdown dans votre navigateur
sélectionner ce code et placer le code dans le presse-papier (couper tout le texte)
coller le texte dans la fenêtre d’édition de Markmap (après avoir supprimé le code de démonstration proposé à l’ouverture de l’éditeur)
Il est donc nécessaire d’avoir 2 onglets ou fenêtres de navigation ouvertes : celle qui pointe sur le code Markdown mis à votre disposition) et celle qui pointe sur l’éditeur de Markmap.
➜ Si vous avez suivi les consignes formulées plus haut, vous devriez visualiser quelque chose qui ressemble à ceci (avec les légendes en moins) :
La carte a été générée automatiquement à partir du code Markdown intégré dans la fenêtre d’édition de gauche. Nous ne sommes pas en présence d’un éditeur de code Markdown et nous ne disposons d’aucun bouton pour mettre le texte en gras ou en italique.
Nous observons par ailleurs que, sur la carte, les titres de niveau 1 (codés avec un #) ne sont pas plus gros que les titres de niveau 2 (codés avec deux ##)
Personnaliser la carte
Je vous propose de personnaliser la carte en modifiant le code Markdown de manière à obtenir le rendu présenté ci-dessous. Les flèches bleues indiquent les changements attendus.
L’apparence de la carte peut être également modifiée en utilisant les fonctionnalités accessibles dans la barre d’outils de l’éditeur de carte. Vous pouvez par exemple unifier la couleur des branches de la carte en cliquant sur le lien (bouton) Colorize.
Cette opération ajoute un entête codé en langage YAML (utilisé notamment pour intégrer des métadonnées dans un fichier Markdown). Le code YAML est encadré par deux lignes de 3 tirets. dans notre cas, la couleur est indiquée en mode hexadécimal. Vous pouvez la remplacer par toute autre couleur, codée de la même manière, ou par le nom d’une couleur Web.
Exporter la carte
La carte ainsi générée est exportable dans deux formats. Un export HTML interactif (consultable avec un navigateur et intégrable dans une page Web) et un export SVG (consultable avec un navigateur et intégrable dans une page Web, mais non interactif).
Ces deux fonctions d’exportation fonctionnent très bien avec Google Chrome mais font planter Vivaldique j’utilise malgré tout quotidiennement… pour tout le reste 😉
Voici une sélection d’outils simples à prendre en main. Ils vous serviront pour mieux mémoriser vos cours en écrivant, en dessinant, en capturant, en collectant, en commentant, en structurant des contenus variés.
Nous utiliserons plusieurs outils mentionnés ci-dessous pendant la formation Com-Créa et VIT. Vous pourrez les utiliser avec profit dans les autres cours.
➜ Vous allez rédiger votre journal de formation en utilisant le langage Markdown. Renseignez-vous sur ce format, en commençant par ce site Netboard, par exemple 😉
Vous allez découvrir ici comment se découpent les formations pour la préparation aux Titres Professionnels Infographiste Metteur en Page (IMeP) et Concepteur Designer UI (CDUI).
Il sera également question de communication et de processus éditorial. En effet, les formations IMeP et CDUI s’insèrent dans une réalité professionnelle en lien direct avec l’édition et la communication visuelle.
Vous découvrirez le fonctionnement de la roue des moulins de la com, l’usage de la farine de concept et les autres ingrédients du pain du savoir.
Repérer les articulations entre IMeP et CDUI
Deux niveaux différents et des opportunités diplômantes
Les 2 titres professionnels visés correspondent chacun à un diplôme de niveau distinct. Le Titre Pro IMeP est un diplôme équivalent à un Bac Pro. Le Titre Pro CDUI est un diplôme équivalent à une Licence Pro.
Cela signifie donc, concernant la formation CDUI, qu’avec les prérequis nécessaires (sans obligatoirement être titulaire des diplômes de niveaux inférieurs) il est possible de valider en une année un niveau Bac+3. C’est à la fois une opportunité formidable et un défi difficile à relever.
Ne vous faites pas d’illusions sur l’exigence du jury en fin de formation (ni sur celles des formateurs en cours de formation). Vous devrez valider chaque titre au niveau requis correspondant.
L’équipe pédagogique recommande de valider d’abord un diplôme de niveau Bac ou Bac+2 avant d’envisager de valider un diplôme de niveau Bac+3.
Toutefois votre expérience professionnelle et votre aptitude à apprendre rapidement et sérieusement peuvent vous permettre de passer d’un niveau non diplômé à Bac+3. Si tel est votre cas, privilégiez l’alternance sur 2 ans.
Des modules en commun
Plusieurs modules particuliers sont communs aux 2 parcours. Voici la liste de quelques un d’entre eux.
Les compétences requises en PAO et Com-Créa sont acquises au cours de premiers modules communs. Les deux premiers TP d’évaluation des compétences professionnelles de PAO et de Com-Créa sont communs aux 2 parcours.
Des cours de droit sont dispensés dans les 2 formations.
Un cours sur la manière de mener une veille informationnelle et technologique (VIT) est commun aux 2 formation, même s’il peut être dispensé à un moment différent pour les uns et les autres
Un module aux techniques de rédaction du Dossier Professionnel est proposé dans les 2 parcours
Des formateurs polyvalents
Plusieurs formateurs animent les formations pour la préparation des deux Titres Professionnels. Les plus anciens dans le métier sont listés ci-dessous :
PAO (Illustrator, InDesign, Photoshop) : Benoit BARBE
ComCréa (CC) et Veille Informationnelle et Technologique (VIT) : Yves GOGUELY
Ces formateurs ont une longue expérience sur le terrain, à la fois dans le monde de l’entreprise que dans le secteur de la formation continue. Ils ont permis à un grand nombre d’apprenants de trouver leur voie dans les métiers exigeants de la communication imprimée et hébergée.
D’autres formateurs ou formatrices interviennent sur les autres disciplines programmées.
Le moulin de la com et le pain du savoir
L’édition plurimédia est le secteur professionnel dans lequel s’inscrit les parcours de formation IMeP et CDUI. Pour cerner plus précisément ce secteur professionnel, je vous propose de prendre connaissance de ce qu’on nomme le cycle ou le processus éditorial. Ce cycle va devenir la roue d’un moulin à idées.
La roue des 8 P
Il s’agit d’une présentation des étapes par lesquelles sont édités tous les contenus, quel que soit le média utilisé pour les présenter au public. Toutes ces étapes peuvent être désignées par un mot commençant par la lettre P (P comme… Plurimédia).
Activité d’approfondissement (option 1)
La roue des 8P utilise des termes commençant tous par le lettre P. Pour simplifier et clarifier le cycle éditorial, je vous propose de trouver quels sont les termes utilisés dans la roue des 8P pouvant être remplacés par les termes suivants :
Conception
Maquettage
Réalisation
Utilisation
Listées dans l’ordre chronologique de leur mise en œuvre, ces opérations devraient pouvoir rapidement trouver leur place dans la roue du cycle éditorial !
Si vous deviez simplifier la roue et ne choisir que quatre rayons (pales, aubes ou godets), lesquelles choisiriez-vous ?
Activité d’approfondissement (option 2)
Pour approfondir la question, je vous propose de noter dans un livret plié toutes les opérations à mettre en œuvre lors des étapes du processus éditorial. Pensez aux contenus et aux contenants : aux textes, aux images, aux contenus multimédias et interactifs ainsi qu’aux supports sur lesquels ils sont intégrés.
➜ Notez ces opérations sur les pages d’un livret réalisé en pliant une feuille A4. Suivez le pliage et le découpage indiqués sur ce mode d’emploi.
Les opérations à inventorier concernent aussi bien la production d’imprimés que la mise en ligne de sites Web. Il en est de même pour la production de diaporamas (présentations visuelles commentées).
Changez “Production de contenus” par “Production d’informations”. Ce sont toujours des idées et des concepts qu’il s’agit de structurer, de styliser, de composer, de reproduire, de publier, etc.
En suivant une formation au GRETA, vous allez à la fois apprendre à faire votre propre farine mais aussi à faire du pain avec la farine fournie par vos formateurs. Une formation est un véritable dispositif de communication !
Le moulin de la com et la farine de concept
➜ Les 8 P forment une roue de moulin. Ce type de roue actionne les moulins de la communication. Ceux-ci produisent de la farine, livrée dans divers emballages (pages, écrans, diapositives numériques, etc.).
L’eau qui actionne la roue représente analogiquement l’effort à accomplir ou l’énergie à déployer pour la mise en œuvre d’un projet de communication. Il ne s’agit pas de créativité ou de sens artistique mais bien d’un travail persévérant.
“5% d’inspiration et 95% de transpiration” disent les designers. Certains d’entre eux sont plus réalistes et affirment produire leurs œuvres avec 1% d’inspiration créative et 99% d’efforts persévérants ! L’édition plurimédia est avant tout le résultat d’une méthode de travail appliquée sans relâche, étape après étape.
La farine produite dans ce type de moulin est essentiellement de la farine de concept, de la farine d’idée (2 variétés de céréales cérébrales couramment cultivées).
➜ Les formations aux titres pros IMeP et CDUI apportent aux participants toutes les compétences requises pour produire de la farine d’idée et la livrer dans des emballages attirants et fonctionnels. Dans un premier temps cet ingrédient indispensable en boulangerie ou en pâtisserie vous sera fourni, jusqu’à ce que vous soyez capables de produire vous même ces fameuses farines.
Les formateurs-trices transmettent aux formé(e)s de la farine de concept, emballée dans divers types de contenants, le tout fabriqué dans leur moulin favori.
Le pain du savoir
La farine de concept n’est pas très digeste à l’état brut. Sortie de son emballage, elle se consomme mélangée à de l’eau, à du sel, et à divers autres ingrédients. La pâte obtenue doit ensuite être cuite au four ou sur une plaque chaude.
Sortir la farine de son emballage, c’est se préparer à consommer des idées et des concepts. C’est lire ou écouter des informations soigneusement emballées. Mais il appartient à chacun(e) d’entre vous de traiter les informations déballées pour pouvoir vous nourrir.
L’information brute de déballage n’a jamais véritablement nourri quiconque… à part les vers de farine !
Il appartient donc aux formé(e)s (lecteurs-trices et auditeurs-trices) de faire leur pain ! Avoir appris à apprendre est un prérequis au niveau de recrutement des formations IMeP et CDUI.
Les vrais pédagogues montreront cependant aux apprenant(e)s comment fabriquer le pain du savoir et comment le faire cuire dans le four de la mise en pratique. Voilà déjà un petit dessin pour repérer les grandes lignes du processus :
Les ingrédients du pain du savoir
Le public visé par vos actions de communication devra lui aussi produire son pain. La farine dans un bel emballage n’est pas encore du pain… mais sans farine, pas de pain !
Le pain du savoir se pétrit avec les mains du bon sens, dans le pétrin du contexte de communication.
Le four de la mise en pratique est alimenté par le bois des contraintes du projet de communication (les spécifications du cahier des charges).
Le four de la mise en pratique
Tout au long de votre formation, vous allez avoir à gérer des projets concrets, basés sur des situations professionnelles ancrées dans la réalité du terrain. C’est ainsi que vous apprendrez à cuire votre pain (le rendre consommable et digeste).
Plus les contraintes seront nombreuses plus le four sera chaud ! Pour éviter de carboniser vos premières fournées, vous commencerez avec des projets relativement simples et progressivement vous aborderez des projets plus complexes.
En début de formation les formateurs vous fourniront la farine dans son emballage. En cours de formation vous devrez moudre vous-même les céréales fournies et emballer vous-même la farine produite. Il se peut qu’en fin de formation vous ayez à vous procurer par vous-même le grain à moudre pour livrer telle ou telle variété de farine.
Vous pouvez stocker toute la farine de la terre dans les plus solides ou les plus beaux emballages qui soient, si vous ne savez pas faire votre pain, vous ne serez jamais nourris (… et vous ne nourrirez jamais personne).
➜ Au terme de votre formation, le jury voudra se rendre compte de ce que vous aurez véritablement dans le ventre à ce moment là. Il ne s’en tiendra pas à l’inventaire de ce que vous avez rangé sur vos étagères virtuelles. C’est vous qui serez pesés, pas vos disques durs ou vos comptes Pinterest ou Instagram
Apprendre à apprendre
Les informations qui suivent vont être progressivement publiées sous forme de cours annexes indépendants. Elles concernent les méthodes et les outils permettant d’optimiser son apprentissage.
Ce cours est un développement de la notion d’objectif de communication. Il est proposé ici en complément d’information sur la menée d’un projet de communication.
La boussole des objectifs de communication
En communication visuelle, prévoir et programmer les réactions du public confronté aux stimuli qui lui sont destinés relève de choix conscients de la part du concepteur du message. Des objectifs de communication clairement orientés aident à concevoir un dispositif de communication efficace. 8 orientations sont repérables, de telle sorte que se dessine le cadran d’une boussole de la communication.
Un projet de communication, quelque soit le dispositif choisi, vise à modifier d’une manière ou d’une autre la façon d’être au monde du public cible. Ayant perçu un signal visuel précis, l’attention du destinataire est sollicitée : un processus perceptif neuro-psychologique est enclenché. Le destinataire du message, placé dans un état émotionnel (affectif), intellectuel (cognitif) et conatif particulier, modifie son comportement, ses gestes, ses pensées. Ses actions (ou réactions) sont statistiquement probables. Elles sont attendues par l’émetteur du message et elles sont anticipées par le concepteur graphique.
On considère prioritairement 4 orientations des objectifs de communication (les orientations primaires). 4 orientations supplémentaires s’y ajoutent, positionnées entre les 4 premières (les orientations secondaires). Paradoxalement, ces orientations secondaires sont davantage formalisée dans le domaine de la littérature que dans celui de la communication visuelle.
4 orientations primaires
Les 4 orientations primaires des objectifs de communication s’articulent sur 4 facultés humaines d’être présent au monde. Les objectifs visés dans ces 4 orientations se différencient par le mode d’action voulue (positive ou négative, active ou passive, directe ou indirecte, etc). Chaque orientation correspond à une facette de l’humain en relation avec son environnement.
la perception physique
l’émotion individuelle
la réflexion intellectuelle
l’action concrète
Chaque orientation est formulable en terme d’objectif principal de communication : faire percevoir, faire ressentir, faire comprendre, faire agir. Dans la pratique, en communication professionnelle, les objectifs visés sont plus précis, plus nuancés.
Faire percevoir
Faire voir = montrer, mettre en évidence
Ne pas faire voir = ne pas montrer, ne pas mettre en évidence
Faire ne pas voir = cacher, dissimuler, masquer, mettre en retrait
“Faire ne pas voir” est un objectif de communication couramment visé dans un projet de communication visuelle ! Tous les éléments d’une affiche ne sont pas nécessairement à mettre en avant. De nombreuses mentions obligatoires sont mises en page en visant cet objectif (sur de nombreux supports).
➜ Vous pouvez compléter la liste des objectifs perceptifs en collectant toutes les visées possibles pour chacun des 5 sens ou canaux de perception. Faire écouter ou entendre concerne par exemple le canal auditif.
Faire ressentir = émouvoir
Faire aimer = rendre séduisant, rendre attractif
Ne pas faire aimer = rendre peu attractif
Faire ne pas aimer = faire détester
Dans les enseignements habituels sur les objectifs de communication, les auteurs insistent sur l’objectif “faire aimer”. Ce n’est pourtant pas le seul objectif affectif envisageable !
➜ Choisissez d’autres verbes exprimant une émotion et complétez la liste des objectifs affectifs. Faire se sentir joyeux ou triste se dit rendre joyeux ou triste. Rendre heureux ou malheureux est un objectif affectif de communication.
Faire comprendre
Faire intégrer à un système de référence = expliquer
Ne pas faire intégrer à un système de référence = ne pas expliquer
Faire ne pas intégrer à un système de référence = rendre confus
Faire agir
Faire faire une action = prescrire, ordonner, suggérer (une activité)
Ne pas faire faire une action = ne pas prescrire, ne pas ordonner, ne pas suggérer
Faire ne pas faire une action = prescrire, ordonner, suggérer (une passivité)
➜ Comme pour les deux premiers objectifs, vous pouvez compléter les liste en élargissant le lexique se rattachant aux objectifs cognitifs puis conatifs.
4 orientations secondaires
Les 4 orientations secondaires des objectifs de communication s’articulent sur 4 autres moyens d’être présent au monde.
l’imagination
la mémorisation et la remémorisation
la conviction
l’information
Comme pour les orientations primaires, chaque orientation est formulable en terme d’objectif principal de communication : faire imaginer, faire mémoriser, faire croire, faire connaître. Les objectifs concrètement visés sont là aussi plus précis et plus nuancés… et plus nombreux !
Faire imaginer
Faire visualiser intérieurement une réalité fictive ou probable
Ne pas faire visualiser intérieurement une réalité fictive ou probable
Faire ne pas visualiser intérieurement une réalité fictive ou probable
Faire mémoriser et se remémorer
Faire retenir provisoirement une information
Faire retenir durablement une information
Faire ne pas retenir provisoirement une info = faire oublier provisoirement une info
Faire ne pas retenir durablement = faire oublier durablement une info
Faire croire
Faire admettre une opinion ou une croyance = argumenter, convaincre
Ne pas faire admettre une opinion ou une croyance = ne pas argumenter, ne pas convaincre
Faire ne pas admettre une opinion ou une croyance = contre-argumenter, convaincre du contraire
Faire connaître
Faire savoir = informer, diffuser une information, porter un fait à la connaissance du public
Ne pas faire savoir = ne pas informer, ne pas diffuser une information, ne pas porter un fait à la connaissance du public
Faire ne pas faire savoir = censurer, empêcher la diffusion d’une information, interdire qu’un fait soit porté à la connaissance du public
Faire savoir des non-faits = désinformer, diffuser une information altérée (tronquée, modifiée, fictive, trompeuse, tendancieuse, etc)
etc
Une remarque sur la captation de l’attention
La mémorisation peut être envisagée comme une composante de l’information (placée dans le schéma de synthèse sur le même axe que la mémorisation). Le faire-savoir inclue sans doute le “faire-mémoriser” et le “faire se remémorer”.
Dès lors, la captation de l’attention prendrait la place de la mémorisation, avec pour objectif associé de faire considérer l’information comme intéressante voire attractive.
Cet objectif est mentionné par le publiciste Eliot St. Emo Lewis au tout début du XXe siècle. Son analyse de l’action publicitaire se résume en 4 lettres : AIDA (A pour Attention, I pour Intérêt, D pour Désir et A pour Action). D’autres lettres ont été rajoutées depuis, dont un S pour Satisfaction (il s’agit toujours d’émotion !).
On devrait célébrer le centenaire de la formule AIDA, tellement cet acronyme a été utilisé, enseigné et mis en pratique pendant les 100 dernières années 😀
Ce cours apporte quelques précisions sur la manière de présenter son projet professionnel lors du passage d’un titre professionnel.
Structurer la présentation visuelle et orale
Une présentation visuelle se conçoit et se finalise comme tout produit de communication. Une phase de documentation précède la phase de conception et de tests. Une finalisation précède la phase de publication, elle-même suivie par d’éventuelles mise à jour et un nécessaire archivage.
Utiliser un plan type
Parmi les différents plans utilisables, dans le contexte de la validation d’un titre, un plan se dégage du contenu à présenter quand on prend connaissance des modalités d’évaluation du titre concerné.
Voir le référentiel d’évaluation CDUI (document PDF) pour connaître les modalités de déroulement de la validation du titre.
Dans les titres validés par l’élaboration d’un projet (Graphiste ou Concepteur Designer UI), la structure du diaporama reprend en partie le plan du dossier de projet (dossier imprimé remis au jury).
Le diaporama est introduit par une présentation contextualisée du candidat et de sa démarche de formation. Il est suivi par une mise en perspective professionnelle des acquis de la formation.
Optimiser le temps imparti
Le temps imparti (50 minutes de présentation et 20 minutes de débat avec le jury pour le titre CDUI) détermine en théorie le nombre de diapositive
Il est habituel de prévoir 1 minute de commentaires par diapositive. Cependant de nombreux paramètres interviennent.
Toutes les diapositives ne sont pas commentées de la même manière (une diapositive de titre est affichée moins longtemps qu’une diapositive présentant un processus complexe, par exemple).
Une diapositive est parfois présentée en plusieurs fois (pour afficher de manière séquencée l’ensemble de ses contenus).
Prendre en compte les spécificités des contenus présentés
La présentation d’un site Web ou d’un document accessible en ligne passe nécessairement par la consultation du site pendant la présentation.
Il est inutile de prévoir des diapositives montrant des captures d’écran d’un site auquel vous pouvez avoir accès depuis le poste utilisé.
Dans la présentation envisagée, 2 documents sont nécessairement en ligne : le site Web et le portfolio. Des liens, intégrés dans les diapositives, doivent permettre à l’orateur d’accéder au site à montrer et au portfolio à présenter rapidement.
Présenter une phase de conception
L’accès ou la mise en ligne d’une phase de conception (par exemple ce qui concerne le travail de prototypage dans Figma) est tout à fait envisageableenvisageable, dans la mesure où cela peut faciliter sa présentation. Ce dernier point n’est pas en contradiction avec la nécessité de permettre au jury de consulter la version papier du dossier de projet global.
➜ Interrogez-vous sur la forme à donner à votre dossier de conception en fonction de la manière dont vous envisagez de le porter à la connaissance du jury.
Quel format numérique allez-vous adopter ?
Quelle orientation allez-vous choisir pour les pages ou les écrans
Quelle quantité d’information allez-vous présenter sur chaque page/écran
La consultation de votre dossier se fera-t-elle de manière fluide et intuitive ?
Présenter des planches imprimées
Imprimer en reprographie quelques unes des planches clés du dossier est vivement conseillé (planche de tendances — moodboard — ou planche de style — style tile, etc.).
Ces documents imprimés sont à remettre au jury en cours de présentation, au moment opportun.
Présenter des objets
Vous pouvez faire fabriquer des prototypes d’objets de communication tels que totbags ou mugs (goodies) et de présenter ces objets au jury pendant votre présentation. Des kakemonos, flags ou autres supports de communication peuvent être déployés dans la salle de présentation
Choisir l’outil de finalisation du diaporama
L’outil le plus simple à utiliser est celui avec lequel vous êtes le plus à l’aise pour créer des diaporamas.
Plusieurs plateformes permettent de créer directement en ligne des diaporamas très efficaces : canva.com, genial.ly, beautiful.ai, etc. Les services proposés ne sont pas entièrement gratuits. La plateforme la plus intéressante à utiliser dans sa version gratuite est probablement Canva. Son utilisation nécessite toutefois un apprentissage plus ou moins long selon les habitudes déjà prises.
Les designers graphiques, dont la formation privilégie l’utilisation professionnelle des logiciels Illustrator Photoshop et InDesign, choisissent généralement de réaliser leurs diaporamas avec ces outils.
Du fait de leurs compétences en intégration HTML-CSS-JS, les designers Web disposent d’un choix bien plus large. Il existe en effet des outils, mis au point dans le milieu des développeurs, faciles à prendre en main et souvent amplement satisfaisants. En voici une liste abrégée :
Slide, la version en ligne du précédent (pour les débutants)
Shower, un framework très facile à prendre en main
Big, le plus surprenant de la liste (… à télécharger sur Github)
La qualité de votre présentation ne repose pas sur l’outil utilisé pour éditer vos diapositives ! C’est la qualité de votre structuration (plan global), la lisibilité de vos contenus (textes et images) et la qualité du commentaire qui les complète qui font de votre diaporama commenté un produit de communication efficace.
Vous trouverez une liste complète des outils de présentation visuelle, et un peu plus d’informations concernant les présentations visuelles commentées (PVC) sur y-goguely.netboard.me
Différencier slidedoc et diaporama commentée
Les nombreux gabarits de diaporama disponibles en ligne mélangent deux type de présentations visuelles : les diaporamas à lire sans commentaire et les diaporama à commenter devant un public.
Les premiers se nomment slidedocs. Ils sont présentés en détail par Nancy Duarte dans un diaporama disponible sur Slideshare. Ce sont des documents à lire à l’écran. Ils n’ont pas vocation à être projetés. Les diapositives sont chargées. Les texte sont longs. On approche ici du concept de livre électronique (e-book)… surtout quand le document fait plus de 150 pages !
Les seconds types de diaporamas sont des présentations visuelles commentées. Ces diaporamas sont destinés à être projetés et accompagnés d’un exposé oral. Les visionner sans le commentaire du présentateur prive le lecteur d’une grande partie de l’information. Les images sont impactantes, les textes sont brefs… mais il manque vraiment quelque chose !
Il est possible de se tenir à mi-chemin entre les 2 concepts. À condition toutefois de proposer des textes courts présentés de manière aérée.
Quelle formule allez-vous adopter pour la présentation de votre projet professionnel face au jury du titre pro ?
Mettez-vous à la place du jury, imaginez-vous en train de présenter votre travail, faites la présentation commentée que vous avez mise au point devant un public test (proches, parents, ami(e)s, etc.)… Vous trouverez ainsi, en acceptant les critiques constructives, des solutions pertinentes et convaincantes !
Dans ce cours nous allons apprendre à utiliser le langage Markdown pour structurer un article destiné à la publication Web, en nous appuyant sur les fonctionnalité d’une application en ligne : StackEdit. Nous verrons aussi, pour ceux que cela intéresse, comment exporter au format HTML les contenus structurés avec StackEdit.
StackEdit est un éditeur Markdown en ligne ergonomique, facile à prendre en main et parfaitement adapté à la structuration de contenus textuels.
Ses fonctionnalités permettent (entre autres choses…) de publier des contenus directement sur les principales plateformes de blogging. Elles permettent aussi d’éditer les contenus des sites construits avec des CMS basés sur Markdown (Pico, Grav, Yellow, etc)
StackEdit est aussi un outil convivial pour tenir un journal de formation (en tant qu’apprenant) ou un journal pédagogique (en tant que formateur).
Présentation de StackEdit
Le fichier immédiatement visible au lancement de l’application est un texte d’accueil en anglais (intitulé “Welcome”). Dans Chrome, un clic droit dans la zone des boutons de formatage du texte (bandeau noir) permet d’accéder à la traduction en français. Tout est expliqué… ou presque, et cela devient un peu compliqué vers la fin du document !
Nous disposons d’une fenêtre (ou zone) d’édition — à gauche — et d’une fenêtre (ou zone) de prévisualisation — à droite .
Les boutons placés entre les 2 zones verticales permettent de gérer l’affichage des différentes zones.
Les boutons situés en haut à gauche et en haut à droite permettent d’ouvrir des menus complémentaires. Le menu de gauche répertorie vos documents et celui de droite permet d’accéder à de nombreux sous-menus.
Test de codage Markdown
Je vous propose de coder en Markdown un texte très simple, dans un document que vous intitulerez “test”. Voici la première partie du texte à coder :
Rien de compliqué ! Il est vrai que le code Markdown en gris clair ne se voit pas très bien… Si vous ne parvenez pas à coder en Markdown en saisissant le bon code, vous pouvez toujours utiliser les boutons de la barre d’outils noire (ou barre de formatage, au dessus de la zone d’édition).
Si vous souhaitez voir une liste de toutes les balises Markdown pour mieux vous y retrouver (ou tester l’utilisation d’autres balises), cliquez sur le bouton avec le signe # (en haut à droite), puis cliquez sur l’onglet “Markdown cheat sheet”.
Pour ceux qui souhaitent aller un petit peu plus loin, voici la deuxième partie du texte à coder :
Saut de ligne et saut de paragraphe
Les éditeurs Markdown gèrent de manière très simple les sauts de ligne et les sauts de paragraphe. Cependant nos habitudes de traitement de texte nous amènent à répéter la même erreur.
En effet, avec StackEdit (et tout éditeur Markdown) il faut saisir 2 retours à la lignes (taper 2 fois sur la touche “entrée”) pour coder un saut de paragraphe. Un simple retour à la ligne code un saut de ligne (un <br> en HTML).
➜ Ce point est très important en matière de structuration rédactionnelle du texte pour le Web. En effet, pour ce type de publication, il convient de rédiger des paragraphes concis, traitant d’une seule idée à la fois. Évitez dans la mesure du possible les sauts de ligne au sein d’un même long paragraphe.
➜ Jetez un œil sur cet article du site audreytips.com et interrogez-vous sur ce qu’apporte le découpage en paragraphes courts (3 ou 4 phrases maximum).
Exporter le fichier test en .md
Vous savez baliser en Markdown des titres, des paragraphes, des listes à puces ou ordonnées, des citations… C’est super ! Il est grand temps maintenant de sauvegarder votre travail.
Le document saisi dans StackEdit est automatiquement sauvegardé dans notre navigateur. C’est cool mais pour plus de sûreté vous allez exporter sur votre bureau le fichier “test”, en utilisant le format markdown (extension .md).
➜ Un clic sur l’icône de StackEdit pour ouvrir les onglets supplémentaires… Ouvrez l’onglet “Import/export”. Choisissez “Export as Markdown” et nommez votre fichier selon les règles de nommage apprises 😉
Exporter le fichier en HTML
Cette partie concerne les apprenants ayant le besoin ou l’envie de créer des pages Web pour les consulter en local (sur leur poste de travail) ou en distant (après les avoir mis en ligne).
Un des point les plus intéressants de StackEdit concerne la qualité de l’export au format HTML. En effet, la plateforme propose plusieurs modalités d’exportation et le code généré par StackEdit est particulièrement propre.
L’exportation en HTML débute comme l’exportation en Markdown (icône de StackEdit et onglet “Import/export”). Cliquez ensuite sur l’onglet “Export as HTML”. Les recommandations concernant le nommage des fichiers exportés restent valables !
Parmi les options proposées à l’exportation, 2 d’entre elles nous intéressent plus particulièrement : l’option “Styled HTML” et l’option “Styled HTML with TOC”. TOC est l’acronyme de “Table Of Content” (table des matières ou sommaire…). En effet, ces deux options génèrent des pages HTML prêtes à la publication en ligne.
L’option par défaut “Plain HTML” génère une page HTML dans laquelle figure seulement le contenu du <body> (la structure à partir du <h1>). Une telle page est lisible en local par un navigateur mais elle ne contient aucune instruction CSS et n’est pas publiable en l’état. Cette option est cependant utilisable quand il s’agit de copier une partie du code pour le coller dans un gabarit de site, par exemple.
➜ Faites des tests d’exportation en HTML en utilisant les différents formats proposés. Examinez le rendu dans le navigateur des fichiers HTML et jetez un œil sur le code source.
Vous constaterez qu’avec les 2 options “Styled HTML” et Styled HTML with TOC”, la feuille de style utilisée n’est pas incorporée dans le fichier HTML mais appelée depuis le serveur de StackEdit.
Cela nous ouvre des perspectives de personnalisation de la page exportée. En effet, en modifiant le lien d’appel de la feuille de style, nous pourrons faire pointer ce lien vers un dossier “css” placé à la racine du fichier HTML (dans le même dossier que le fichier HTML) puis vers une feuille de style de notre choix (placée au préalable dans le dossier “css”).
L’export avec l’option “TOC” génère un fichier HTML incorporant une colonne latérale dans laquelle s’affiche un sommaire reprenant le titre de niveau 1 et les sous-titres de niveau h2 du texte structuré dans Stackedit.
StackEdit est donc aussi un éditeur de pages Web, très simple d’utilisation, permettant de générer des documents agréables à lire et diffusables sur toutes les plateformes (le format HTML est universel…).
Utiliser du HTML directement dans StackEdit
Importer un fichier HTML
StackEdit permet d’importer des fichiers HTML via l’onglet “Import/export ». Vous accédez à 2 boutons d’importation :
Import Markdown
Import HTML
Le second bouton permet de transformer automatiquement une page HTML en page Markdown ! Génial, non ?
Saisir du code HTML dans la fenêtre d’édition
Il est possible d’insérer des balises HTML dans le code Markdown. On peut ainsi compléter la structuration du texte en introduisant des commentaires dans le code ou intégrer des signes conventionnels augmentant l’accessibilité de la page Web.
On peut aussi anticiper la stylisation en insérant des espaces insécables entre les mots et les signes de ponctuation. On peut encore anticiper l’adaptativité aux écrans mobiles (ou entre les mots d’une expression qu’on voudrait voir toujours sur la même ligne).
Dans StackEdit, il n’est cependant pas possible d’utiliser l’élément <span> pour intégrer une instruction CSS en ligne (… inlinestyle, en anglais), comme dans l’exemple ci-dessous. <span style="color: red;">Texte en rouge</span>
D’autres éditeurs Markdown permettent l’utilisation des instructions css en ligne.
Lectures et vidéo en ligne
Voici une liste de quelques sites parlant de StackEdit :
Dans ce cours, nous allons voir comment concevoir le diaporama sur lequel vous allez vous appuyer pour défendre un projet professionnel devant un jury, lors du passage d’un titre professionnel.
Nous allons également nous intéresser à la manière de préparer et de dérouler les commentaires qui accompagnent nécessairement ce diaporama (exposé oral).
Des ressources supplémentaires sont mises à votre disposition sur y-goguely.netboard.me/
Structurer la présentation visuelle et orale
Une présentation visuelle se conçoit et se finalise comme tout produit de communication. Une phase de documentation précède la phase de conception et de tests. Une finalisation précède la phase de publication, elle-même suivie par d’éventuelles mise à jour et un nécessaire archivage.
Utiliser un plan type
Quand on prend connaissance des modalités d’évaluation du titre concerné, un plan se dégage en fonction des contenus à présenter. Prenez connaissance du référentiel d’évaluation CDUI (document PDF) pour connaître les modalités de déroulement de la validation du titre.
Dans les titres validés par l’élaboration d’un projet (Graphiste ou Concepteur Designer UI), la structure du diaporama reprend en partie le plan du dossier de projet (dossier imprimé remis au jury).
Le diaporama, fil rouge de la présentation des données au jury, est introduit par une présentation contextualisée du candidat et de sa démarche de formation. Il est suivi par une mise en perspective professionnelle des acquis de la formation.
Optimiser le temps imparti
Le temps imparti (50 minutes de présentation et 20 minutes de débat avec le jury, pour le titre CDUI) détermine en théorie le nombre de diapositive
Il est habituel de prévoir 1 minute de commentaires par diapositive. Cependant de nombreux paramètres interviennent.
Toutes les diapositives ne sont pas commentées de la même manière (une diapositive de titre est affichée moins longtemps qu’une diapositive présentant un processus complexe, par exemple).
Une diapositive est parfois présentée en plusieurs fois (pour afficher de manière séquencée l’ensemble de ses contenus).
Seule la répétition chronométrée de la prestation peut donner une idée juste du temps nécessaire pour exposer images et commentaires.
Prendre en compte les spécificités des contenus présentés
La présentation d’un site Web ou d’un document accessible en ligne passe nécessairement par la consultation du site pendant la présentation. Il en est de même si il est fait référence à un travail de prototypage disponible en ligne, à votre portfolio, à un site réalisé en entreprise, etc.
Il est inutile de prévoir des diapositives montrant des captures d’écran d’un site auquel vous pouvez avoir accès depuis le poste utilisé.
Des liens, intégrés dans les diapositives, doivent permettre à l’orateur d’accéder rapidement aux sites à montrer pendant son exposé. Les captures d’écrans sont réservés à l’intégration dans les documents imprimés.
Présenter des planches imprimées
Imprimer en reprographie quelques unes des planches clés du dossier est vivement conseillé (planche de tendances — moodboard — ou planche de style — style tile, etc.).
Ces documents imprimés sont à remettre au jury en cours de présentation, au moment opportun.
Présenter des objets
Vous pouvez faire fabriquer des prototypes d’objets de communication tels que totbags ou mugs (goodies) et de présenter ces objets au jury pendant votre présentation. Des kakemonos, flags ou autres supports de communication peuvent être déployés dans la salle de présentation.
Nous verrons dans la suite du cours comment articuler paroles et diapositives. Auparavant, nous allons revenir sur la démarche de design graphique que nous avons suivie lors de nos productions en formation Com-Créa.
Utiliser les outils et plateformes d’édition appropriés
Il existe plusieurs outils permettant de réaliser des diaporamas. Ils se répartissent en différentes catégories :
les logiciels spécialisés hors ligne (sur poste)
les plateformes d’édition en ligne (sur le Web)
les suites logicielles d’édition polyvalente
les frameworks CSS dédiés à la présentation visuelle
Dans la première catégorie se trouvent l’incontournable Powerpoint et son alter ego Keynote mais aussi Impress, lié à la suite Open Office.
Dans la seconde catégorie se trouvent notamment Google Slides, Crello, Canva, Beautiful.ai et aussi Prezi ou Focusky(dans un genre différent). Il en existe de nombreux autres, gratuits ou payants.
Pour la validation du titre pro CDUI, l’outil Figma Slides est particulièrement adapté au type de contenus présentés.
Dans la troisième catégorie se trouvent les outils d’édition professionnels comme la suite Adobe ou la suite Infinity.
Dans la quatrième catégorie se trouve l’excellent Reveals(et son équivalent en ligne slides.com). Dans cette catégorie, vous disposez également de Big, de Shower, ou encore de Remark (utilisant le langage Markdown mais limité au format 4×3). Les utilisateurs du système MacOs peuvent se tourner vers Deckset (outil exclusif de stylisation de fichiers Markdown pour la projection).
Chacun(e) est libre d’utiliser l’outil qui lui convient le mieux, dans la mesure où il peut justifier que le résultat produit est bien ce qu’il comptait mettre en œuvre.
➜ Aucun défaut de conception ne pourra être mis sur le compte des limites de l’outil choisi.
Différencier slidedoc et diaporama commentée
Les nombreux gabarits de diaporama disponibles en ligne mélangent deux type de présentations visuelles : les diaporamas à lire sans commentaire et les diaporama à commenter devant un public.
Les premiers se nomment slidedocs. Ils sont présentés en détail par Nancy Duarte dans un diaporama disponible sur Slideshare. Ce sont des documents à lire à l’écran. Ils n’ont pas vocation à être projetés. Les diapositives sont chargées. Les texte sont longs. On approche ici du concept de livre électronique (e-book)… surtout quand le document fait plus de 150 pages !
Les seconds types de diaporamas sont des présentations visuelles commentées. Ces diaporamas sont destinés à être projetés et accompagnés d’un exposé oral. Les visionner sans le commentaire du présentateur prive le lecteur d’une grande partie de l’information. Les images sont impactantes, les textes sont brefs… mais il manque vraiment quelque chose !
Il est possible de se tenir à mi-chemin entre les 2 concepts. À condition toutefois de proposer des textes courts présentés de manière aérée.
Designer un diaporama
La conception d’un diaporama numérique suit les mêmes étapes que celle d’un produit imprimé ou hébergé.
Décision
Brief
Documentation
Production et structuration des contenus
Choix du style graphique
Maquettage, tests et affinage
Intégration des contenus structurés
Publication
Mise à jour
Archivage et débrief
On peut regrouper ces étapes par trois et ramener la démarche en trois phases : préparation, conception, publication.
La phase de préparation
Cette phase comprend le brief, la documentation et la production des contenus. Voyons ce qu’il en est concernant le diaporama à préparer.
Mener le brief technique
Le mode colorimétrique
Un diaporama projeté s’élabore en RVB. Les dimensions recommandées pour les images sont indiquées ci-dessous (tailles surlignées en gris).
Les dimensions des diapositives
Les diaporamas et documents projetés utilisent 2 ratios standards, le 16/9 et le 4/3. Nettement plus allongé horizontalement, le 16/9 est le plus moderne des deux. Le format 4/3 offre l’avantage de s’insérer dans une page A4 orientation paysage, ce qui en facilite l’édition imprimée en 1 ou 2 diapositive par page.
➜ Les résolutions des images affichées en plein écran au ratio 16/9 sont les suivantes :
HD = 1280 x 720
FHD = 1920 x 1080 (recommandé)
QHD = 2560 x 1440
➜ Les résolutions des images affichées en plein écran au ratio 4/3 sont les suivantes :
XGA = 1024 x 768
Format non standard = 1080 x 810
Format non standard = 1440 x 1080 (recommandé)
U-XGA = 1600 x 1200
Les écrans des salles du Pôle Plurimédia, dans lesquelles vous projeterez votre diaporama lors du passage du titre pro, permettent la projection plein écran de diapositives 4/3. Les diaporamas au format 16/9 s’afficheront sur une moindre hauteur.
Les formats numériques de diffusion
Les logiciels d’édition de présentations numériques disposent de formats natifs. Les utilisateurs de la suite Microsoft connaissent par exemple le format PPT, en lien avec le logiciel Powerpoint.
Les plateformes d’édition en ligne proposent généralement l’export des diaporams au format PDF. C’est aussi le format utilisé pour l’exportation de diaporamas réalisés avec Illustrator ou inDesign.
Les diaporamas réalisés avec un framework CSS sont au format HTML et se gèrent comme un site Web statique.
Le format le plus simple à utiliser lors du passage d’un diplôme est le format PDF. L’affichage d’un diaporama PDF, à partir de n’importe quel poste, sera toujours conforme à votre maquette.
Se documenter
Il existe de nombreux gabarits de diaporamas disponibles en ligne, en particuliers pour leur mise en œuvre avec Powerpoint, Keynote ou Google Slides.
Il s’agit de disposer d’une référence en matière de stylisation, pour créer ensuite un diaporama qui présente une unité graphique évidente, d’une diapo à l’autre.
➜ Il est souhaitable qu’une unité de style existe entre le diaporama et le press-book, voire entre le diaporama et le portfolio en ligne.
Produire les contenus
Adopter un plan logique
Le plan du diaporama est la structure logique sur laquelle s’appuie votre présentation visuelle et orale. Déterminé en amont de la phase de conception, ce plan sert de cadre à l’ensemble du travail effectué.
Je vous propose ci-dessous le développement d’un plan type que vous êtes libre d’adapter à votre propos.
➜ Compte tenu du temps imparti pour présenter vos diapositives et du volume d’information à transmettre, il est indispensable de se focaliser sur l’essentiel.
Le message à transmettre est le suivant : “Je suis prêt à exercer le métier de [préciser le méteier en fonction du titre visé]. En effet, j’ai acquis en formation et sur le terrain toutes les compétences requises.”
Il s’agit de répertorier les compétences clés à faire valoir pour exercer le métier visé. Ces compétences, clairement définies dans le référentiel du titre, vous permettent d’envisager un plan comportant le nombre de sections correspondantes (une section par compétence).
Une section se présente sous forme d’une suite de diapositives structurée de la manière suivante :
Titre de section (1 diapo)
Présentation d’une réalisation finie (1 ou 2 diapos)
Présentation des étapes et de la méthode de conception (plusieurs diapositives)
Présentation de la compétence acquise (1 ou 2 diapos)
Une section comprendra un minimum de trois diapositives.
Ajoutez à votre diaporamas les diapositives de début de diaporama (titre principal, sommaire et/ou intro, présentation personnelle) et les diapositives de fin de diaporama (perspectives d’avenir professionnel, conclusion, signature et/ou remerciements).
Je ne mentionne pas de nombre idéal de diapositives en lien avec la durée de l’exposé. Cela dépend d’un nombre trop élévé de paramètres inhérents à vos choix éditoriaux et d’animation.
Réalisez un plan schématique, sur une feuille de papier ou sur un support numérique. Vous pouvez aussi utiliser des adhésifs repositionnables (réels ou virtuels) pour donner corps à votre plan.
Voici un exemple de découpage réalisé dans Lino puis dans Scrumblr. Le plan est très simplifié, il ne correspond en rien à un plan type idéal !
➜ Voici une capture d’écran vous donnant quelques indications pour utiliser Scrumblr…
Collecter ou produire les images
Si vous avez bien préparé vos images pour votre portfolio en ligne, pour votre dossier de projet ou votre dossier professionnel, vous disposez déjà des images susceptibles d’être intégrées dans votre diaporama.
Collecter ou rédiger les textes
Dans une présentation visuelle commentée, l’essentiel du message verbal passe par l’oral. Le texte affiché doit être ramené au minimum et surtout ne pas être redondant avec l’image.
➜ Le texte accompagnant une image doit toujours amener des informations qui ne sont pas déductibles de la lecture de l’image.
La phase de conception
Cette phase comprend le choix du style, le maquettage et l’intégration des contenus structurés. le choix du style consiste à déterminer quelles seront les typos, les couleurs, les formes et les grilles utilisées pour la mise en page. Le maquettage inclue d’éventuelles recherches graphiques manuscrites et l’intégration peut relever du codage avec certains outils.
Choisir des couleurs contrastées
La projection sur écran opaque, en pleine journée, dans une salle dont les volets sont fermés, ne permettra jamais un affichage des couleurs aussi contrasté que sur un écran d’ordinateur.
La mise en œuvre d’un nuancier étagé allant du noir (ou très foncé) au blanc (ou très clair) est vivement recommandée. Pensez bien que le noir, votre couleur la plus foncée, ne sera jamais plus foncée que la couleur de l’écran une fois le projecteur éteint.
➜ Tout objet placé dans une diapositive sur un fond noir se trouve projeté comme flottant sur l’écran, sans que le cadre de la diapositive soit visible. Dans les salles du Pôle Plurimédia, c’est alors le tableau blanc, servant d’écran, qui devient l’espace de présentation. Un tel effet doit être maîtrisé.
Limitez vous autant que possible à 3 ou 4 couleurs (claire, moyenne et foncée ou très claire, claire, foncée et très foncée) avec un contraste de valeur entre 2 couleurs superposée d’au moins 60% pour le texte courant (ratio de contraste de 7 ou norme AAA) .
➜ En présentation visuelle, il est possible de construire des nuanciers en veillant à utiliser une couleur d’accent ou de focus. Cette couleur, généralement saturée (assez vive), est utilisée pour attirer l’attention sur certains mots ou certaines figures. C’est le rôle de la couleur rouge dans le diaporama intitulé “Les règles simples d’harmonie typographique” (voir plus bas).
Choisir une échelle typo adaptée à la lecture de diapositives
La lecture à l’écran nécessite de bien différencier les niveaux hiérarchiques entre les informations affichées.
Le choix d’une échelle typographique basée sur 1,618 (le nombre d’or) ou sur 1,5 est vivement recommandé.
➜ Sachant que la force du corps du texte courant affiché à l’écran doit être proche de 30 pt (ou 40 px), on peut utiliser les suites de Fibonacci ou de Lucas pour déterminer le corps des notes et celui des titres (2 à 3 niveaux successifs au dessus de celui du texte courant).
Sur la diapositive ci-dessus, la suite de Lucas a été utilisée pour différencier les niveaux d’information du titrage. Les valeurs suivantes se succèdent : 76pt, 123pt et 47pt.
D’autres exemples vous sont présentés dans ce document.
➜ Dans le diaporama suivant, les deux premières suites exponentielles (Fibonacci et Fibonacci x 2) sont combinées pour diversifier les niveaux de hiérarchisation.
Choix une grille de construction simple
La grille de construction est directement liée au ratio proportionnel des dimensions de chaque diapositive. La grille la plus simple à mettre en œuvre est par ailleurs une grille de carrés.
➜ Le ratio 4/3 présente naturellement une grille de 4 colonnes de 3 carrés superposés. Le ratio 16/9 présente une grille de 4 colonnes de 2 carrés superposés, à laquelle s’ajoute une rangée de 16 seizièmes de carrés (c’est un ratio de 4 par 2,25).
Une grille de 4×3 est loin d’être limitative en matière de composition. Ses agencements sont plus nombreux qu’on le pense. Une agence de design a inventorié les 892 possibilités de combiner des carrés dans une grille 4×3.
Si vous choisissez de travaillez à partir d’un template mis à votre disposition sur une plateforme en ligne, les différents modèles de diapositives proposés sont déjà construits en appui sur une grille.
➜ Le format 4/3 permet la mise en œuvre d’une grille de 16×16 rectangles aux propriétés intéressantes. Lisez le pdf ci-dessous pour plus de précisions.
Établir un juste rapport Texte/Image/Parole
Ce rapport varie en fonction des diapositives et du type de diaporama. Il est inutile de présenter des images lorsque du texte suffit (et inversement). Il est également inutile de commenter un texte dont le sens est très clair ou une image dont l’interprétation ne présente pas de difficulté.
Le dosage du texte, de l’image et de la parole donne à chaque présentation son caractère. Il n’y a pas de formule parfaite. L’alternance stricte des textes et des images est plus simple à mettre en œuvre. Il est plus facile de caler le commentaire sur les seules images et de simplement faire défiler les textes lus alors par l’auditoire.
La phase de publication
Utiliser le format pdf
Un diaporama au format pdf est facile à transmettre, à dupliquer, à sauvegarder en plusieurs lieux. Même si vous avez prévu de montrer un diaporama réalisé avec Keynote, Powerpoint ou Keynote, exportez une version pdf de votre travail. Vous perdrez vos transitions mais vous assurez vos arrières s’il vous faut déployer un plan B le jour de l’exposé !
Sauvegarder le diaporama en lieu sûr
Enregistré ou exporté au format PDF, le diaporama réalisé doit être confié au GRETA avant le passage du titre. Vous pourrez le modifier ultérieurement mais vous êtes ainsi assurés de pouvoir disposer d’une version à projeter lors de l’entretien avec le jury le jour J.
L’exposé oral
Adopter une posture et une gestuelle adaptées
Je vous invite à visionner cette vidéo pour apprendre comment vous positionner face au jury. La vidéo dure en tout un peu plus d’un quart d’heure mais vous pourrez sauter la dernière partie consacrée à la prise de parole en étant assis. Prévoyez cependant une prise de notes afin de ne rien oublier 😉
Ne jamais lire ce qui est projeté
Il est contreproductif de lire un texte affiché ou de décrire une image projetée sur l’écran. Les membres du jury sont venus avec leur tête, ne l’oubliez pas !
Gardez à l’esprit le fait que les spectateurs lisent ce qui est projeté à l’écran plus vite que vous n’êtes capable de le lire à haute voix. Ils n’ont donc pas besoin que vous leur répétiez ce dont ils viennent de prendre connaissance. La lecture d’un texte affiché est dangereusement soporifique !
S’entraîner en connaissant le plan de l’exposé par cœur
Une présentation orale se prépare comme le jeu d’un acteur-auteur sur une scène de théâtre. Il faut écrire son texte, le connaître par cœur (au moins le plan directeur) et s’entraîner… Cela prend du temps !
Je vous propose de lire les conseils rassemblés sur netboard.me à ce sujet.
Participer à la séance d’exposé blanc
➜ Il vous est proposé, avant le passage du titre, de présenter et de commenter votre diaporama face à un(e) professionnel(le). Il (elle) évaluera la manière dont vous procédez. Vous noterez les conseils qui vous seront donnés et vous effectuerez les éventuelles corrections suggérées.
