Catégories
CC3-exos Com-Créa

Animer une mascotte

Au cours de cette activité, vous allez animer une mascotte mise au point par vos soins. L’animation sera réalisée dans Illustrator, image par image exportées en PNG puis produite au format GIF avec gifmaker.me. L’animation produite pourra être intégrée dans un décor figuratif ou abstrait réalisé dans canva.com.

Animer en boucle image par image

L’animation à réaliser doit pouvoir tourner en boucle indéfiniment.

Sur l’animations ci-dessus, observez la manière dont débutent et finissent Les mouvements les plus simples. Renseignez vous sur les 12 principes de l’animation.

Trouver des modèles

Si vous devez reproduire un mouvement en boucle, observer-le dans la nature ou procurez-vous une courte séquence animée mettant en scène le mouvement à reproduire.

➜ Il existe de courtes vidéos, proposées en ligne par Shutterstock, susceptibles de vous aider à trouver comment animer vos mascottes.

Vous pouvez les exploiter image par image en les convertissant au format GIF. Pour cela, faites un clic droit sur les vidéos pour copier l’URL de la vidéo. Vous collerez cette URL dans un convertisseur MP4 to GIF acceptant de récupérer des vidéos en ligne.

Online Convert permet ainsi de récupérer une vidéo en ligne. Ne modifiez pas les réglages par défaut. Après conversion, vous disposez d’une séquence d’images fixes.

Les images obtenues ainsi vous serviront de modèle dans Illustrator pour trouver la juste pose de votre mascotte, image par image. Vous pourrez également savoir combien d’images utiliser pour réaliser une boucle complète.

➜ Pour cette animation 21 images sont suffisantes pour réaliser une boucle… même si l’animation GIF exportée après conversion est constituée de 126 images !

Animation GIF avec gifmaker.me

Les images réalisées avec Illustrator doivent être exporter en png (idéalement sur fond transparent pour pouvoir créer une animation GIF avec fond transparent.

Le dessin image par image nécessite du temps. Je vous recommande d’éditer une animation simple avec gifmaker.me puis de l’améliorer progressivement.

Première version d’une l’animation réalisée par Mickaël
Version suivante de la même animation

Il reste encore beaucoup de travail à faire pour rendre le personnage plus mobile et le vol plus réaliste mais vous pouvez noter quelles ont été les améliorations apportées entre les 2 versions.

Intégration dans canva.com

Une animation GIF peut être importée dans CANVA puis intégrée dans un décor figuratif ou un environnement abstrait.

CANVA permet l’exportation des animations au format MP4 ou GIF.

Veillez à conserver quelques éléments statiques dans votre image afin de permettre au regard de se reposer.

Dans l’exemple ci-dessous, à titre expérimental, un effet balayage a été paramétrée en début d’animation. La durée de l’animation a été fixée à 10 secondes (13 battements d’ailes de fée…).

Cliquer sur l’image pour voir l’animation

Utilisation éventuelle d’After Effect

Les plus expérimentés peuvent réaliser l’animation de leur mascotte avec After Effect. L’utilisation de ce logciel n’est pa au programme de la formation Com-Créa. L’animation ci-dessous a été réalisée par Fabien, en utilisant les fonctionnalités de base d’After Effect.

L’animation d’un logo permet d’envisager la création d’encarts Web animés. L’exemple ci-dessous est conçu (toujours dans After Effect) pour tourner en boucle.

Catégories
CC1-exos Com-Créa

Créer un gabarit de livret dans Canva

Lors de cette activité, vous allez mettre en place tous les éléments d’un gabarit de livret 8 pages recto seul pour l’utiliser ensuite directement dans l’application et produire numériquement les livrets de votre choix.

Cette activité fait suite à la réalisation d’une collection de livrets 8 pages manuscrits.

Découvrir l’application Canva

L’application est accessible en ligne. De nombreuses fonctionnalités sont disponibles gratuitement et suffisent amplement pour prendre en main l’application. Tutos et vidéos en ligne permettent de s’initier à cet outil polyvalent très utilisé dans les entreprises.

Pour réaliser le gabarit de livret, nous allons utiliser un très petit nombre de fonctionnalités de Canva. Je vous montrerai, en début d’activité, où trouver les outils nécessaires dans les différents menus de Canva pour franchir les étapes de réalisation.

Si vous souhaitez vous perfectionner en toute autonomie, les ressources en ligne ne manquent pas. Il suffit de prendre le temps nécessaire pour réaliser les tutos !

Canva propose de nombreux tutoriels en vidéo, regroupés dans la rubrique design school (en anglais).

Pour les tutoriels Canva en français, l’adresse est la suivante : https://www.canva.com/fr_fr/creer/.

Les articles de Canva consacrés à chaque type de produit de communication regroupent plusieurs informations pratiques, à la fois techniques et méthodologiques, particulièrement utiles pour les débutants !

L’aide de Canva semble être traduite automatiquement en français…

Faites une recherche de vidéos avec l’entrée “Découvrir Canva”, vous n’aurez que l’embarras du choix !

J’ai repéré un tutoriel gratuit (en français) sur le site de tuto.com : Découverte de Canva. Vous pouvez vous inscrire et suivre ce tuto.

J’ai rédigé également un tutoriel pour réaliser un flyer très simple. Il est disponible en ligne et peut être mis en œuvre en autonomie.

Étapes de réalisation du gabarit

Pour réaliser le gabarit de livret, suivez les étapes indiquées dans le document ci-dessous (l’option de pliage choisi est l’option 2 du cours précédent).

Composer un livret dans Canva

Une fois le gabarit de livret validé par son impression et son assemblage (découpage et pliage), vous pouvez reprendre un des sujets de l’activité précédente ou choisir la thématique de votre choix pour finaliser un projet de livret avec Canva.

Si vous ne disposez pas d’une version payante de Canva (version Pro ou Education), veillez à ne pas utiliser de ressources iconographiques payantes. Ces ressources sont identifiables par la petite couronne jaune visible en bas à droite des images. Vous pouvez imprimer un projet avec ce type de ressources mais les images Premium seront couvertes d’une grille de losanges gris.

Catégories
CC1-cours Com-Créa

Ressources pour la comvi

Pour vous permettre d’accéder rapidement aux ressources mises en ligne concernant la communication visuelle, j’ai rassemblé les principaux liens dans un bouquet digital.

Vous pouvez créer vos propres bouquets de liens en utilisant l’outil Digibunch, proposé gratuitement par ladigitale.dev.

Catégories
CC1-cours Com-Créa

Fondamentaux de la communication

Ce cours présente les fondamentaux de la communication, tels que je les structure dans le cadre de mon enseignement. Il s’adresse prioritairement aux étudiants en communication visuelle, aux futurs designers graphiques, designers UX-UI ou web-designers. Il présente le lexique fondamental de la communication, utilisé tout au long de la formation.

Plusieurs notions évoquées dans ce cours sont ensuite abordées en détail dans le cadre d’autres disciplines (marketing, gestion de projet de communication, community management, SMO, etc.).

L’utilisation de cartes Markmap, proposée pour visualiser l’articulation de plusieurs concepts, vise à prendre en main un outil de facilitation des apprentissages.

Les différents types de communication

La communication répondant à un besoin universel, elle est implantée dans tous les secteurs de l’activité humaine. Inventorier tous les domaines où s’exerce une communication professionnelle est une tâche difficile à finaliser. J’ai cependant essayé de lister quelques domaines clés et de les présenter sous une forme hiérarchisée avec Markmap.

Communication sectorielle

Un des critères de différenciation des différents types de communication est le secteur où s’exerce cette communication. Je vous propose une liste de plusieurs types de communication classés par secteur d’application.

J’ai choisi le terme générique de “communication sectorielle” pour désigner l’ensemble des communications mises en place dans tel ou tel secteur. Le terme “communication sectorielle” est toutefois communément utilisé pour désigner les sous-ensembles d’un type de communication spécifique à un plus vaste domaine.

  • communication internationale ;
  • communication nationale ;
  • communication politique ;
  • communication économique ;
  • communication culturelle ;
  • communication religieuse ;
  • communication environnementale ;
  • communication scientifique institutionnelle ;
  • communication académique ;
  • communication d’entreprise ;
  • etc.

➜ Cette liste est développée dans une carte interactive dont vous pouvez vous procurer le code source en Markdown pour éventuellement la compléter. Utilisez Stackedit pour la personnalisation et Markmap pour la visualisation sous forme de carte heuristique.

Quels sont les domaines dans lesquels vous souhaiteriez exercer votre métier de communiquant, après avoir validé vos titres professionnels ?

Types de communication selon d’autres critères

Le secteur d’activité n’est pas le seul critère de classement des différents types de communication. Il est possible de lister d’autres types de communication en choisissant le critère de la stratégie adoptée ou celui de la cible visée, etc. J’ai également tenté un classement hiérarchisé avec Markmap (cela peut être amélioré).

Les critères choisis sont les suivants :

  • En fonction du contexte de communication ;
  • En fonction de l’identité des acteurs impliqués ;
  • En fonction du nombre des acteurs concernés ;
  • En fonction de la cible visée par une organisation commerciale ;
  • En fonction des stratégies de communication adoptées ;
  • En fonction de la thématique des contenus communiqués ;
  • En fonction du mode de diffusion des messages ;
  • En fonction des canaux sensoriels sollicités ;
  • En fonction des canaux médiatiques de publication.

➜ Vous pouvez visualiser la carte interactive des types de la communication en cliquant sur l’image ci-dessous. J’ai mis à votre disposition le code source en Markdown.

Principaux composants d’un projet de communication

Pour fonctionner correctement, tous les types de communications inventoriés plus haut ont besoin de définir un plan de communication. Ce plan de communication prend en compte les éléments suivants :

  • le contexte de communication (le “marché”) ;
  • la stratégie de communication ;
  • les objectifs de communication ;
  • le public cible ;
  • le budget (moyens financiers) ;
  • les moyens techniques et humains à mettre en œuvre ;
  • les dispositifs de communication (ou médias) à utiliser ;
  • les messages à transmettre.

Pour illustrer ce point, je vous propose de consulter les pages Web suivantes (en lien avec le secteur culturel) :
• Qu’est-ce que la communication culturelle ;
• Projets culturels : pourquoi et comment mettre en place une véritable stratégie de communication ;
• 10 étapes pour une communication culturelle efficace.

Canaux sensoriels et communication

La communication s’effectue par des canaux sensoriels. Nous prendrons ici en compte les canaux visuel, auditif et tactile. En effet, ces canaux sont principalement utilisés dans le contexte professionnel qui nous concerne (voir plus haut).

Les canaux gustatifs et olfactifs sont laissés de côté… Toutefois, l’odeur d’un imprimé fraîchement sorti de presse est un élément pouvant être pris en compte dans un projet de communication.

En m’appuyant sur les canaux sensoriels, je distingue :

  • la communication visuelle ;
  • la communication auditive ;
  • la communication tactile.

Ces types de communication s’associent pour former :

  • la communication audio-visuelle ;
  • la communication tactilo-visuelle ;
  • la communication audio-tactile.

Voici un diaporama illustrant la notion de canaux sensoriels en personnalisant et en nommant les canaux perceptifs visuel, auditif et gestuel. Le canal gestuel est y présenté comme un “cousin” du canal visuel.

Appuyez sur la touche J pour visualiser toutes les diapositives, puis sur la touche T pour revenir en mode présentation — La touche P affiche un mode imprimable.

Angle perceptif et angle expressif

L’angle sensoriel focalise notre attention sur la dimension perceptive de la communication. Celle-ci se définit alors par les modalités de perception des messages transmis (visuellement, auditivement ou tactilement).

Un autre angle, celui de l’émission du message (angle expressif), conduit à l’utilisation d’autres termes pour définir la communication :

  • communication écrite, graphique, gestuelle, non verbale, kinesthésique et dactylologique ;
  • communication orale, verbale et paraverbale ;
  • communication par le toucher.

Voici une représentation sous forme de carte heuristique des liens entre les différents type de communication sensorielle :

Carte mentale de la communication sensorielle

Je vous propose de consulter cette carte sous forme interactive ou de copier son code Markdown pour la personnaliser avec Markmap

Produits, dispositifs et projets de communication

La communication visuelle, auditive ou tactile se concrétise, du côté des designers, par la réalisation de produits de communication conçus pour une perception du message transmis par les canaux sensoriels mentionnés.

Ces produits (nommés aussi supports de communication) sont publiés afin que les messages transmis produisent sur un public ciblé, dans un contexte de communication précis, un effet attendu (objectif de la communication). Les produits de communication sont réalisés avec l’aide éventuelle d’outils numériques ou non-numériques.

La prise en compte des canaux sensoriels de communication, des messages à transmettre, des objectifs de communication visés, du contexte de la communication, des techniques utilisées et du public ciblé définit un dispositif de communication.

Les dispositifs de communication, envisagés de manière plus globale, sont souvent désigné comme médias voire comme canaux de communication, notamment dans le secteur du marketing. Il y est question de communication média et hors média, le médias en question se rapportant aux seuls médias de masse (PRATIC – Presse, Radio, Affichage, Télévision, Internet, Cinéma).

Communication digitale ou numérique

Il est souvent question aujourd’hui de communication digitale ou numérique. La réalisation des produits de communication passe le plus souvent par une phase de numérisation des informations à transmettre. La consultation-consommation des produits se fait par le biais d’appareils fonctionnant grâce aux technologies informatiques.

Le terme “digital” et “numérique” s’applique donc potentiellement à tout produit ou dispositif de communication faisant appel aux technologies informatiques. Dans les faits, la communication digitale ou numérique désigne la communication Web ou hébergée (communication Internet), dans toute sa diversité.

L’usage d’outils numériques n’est ni une fatalité ni une obligation, c’est un choix stratégique pris dans le cadre d’un projet de communication centré sur les besoins et les habitudes des acteurs du projet, en particuliers des utilisateurs finaux des produits de communication.

Catégories de produits ou supports de communication

Dans le cadre des pratiques professionnelles visées, je différencie quatre catégories de produits de communication (4 principaux dispositifs de com) :

  • les produits de communication imprimés (sur toutes sortes de supports imprimables) ;
  • les produits de communications projetés (sur des écrans opaques ou lumineux) ;
  • les produits de communications hébergés (sur des serveurs en ligne et consultables sur des appareils dédiés) ;
  • les produits de communications exposés (sur divers supports d’accrochage ou de fixation).

Ces catégories ne sont pas exclusives et des produit de communication plurimédia sont fréquemment réalisés puis publiés par le biais de plusieurs dispositifs de communication ou médias (imprimés et hébergés, hébergés et projetés, etc.).

Sur la page de tutoriels en français du site de Canva (application en ligne de création de produits plurimédias), plusieurs produits de communication (ou supports) sont listés et détaillés. Ces produits appartiennent à l’un ou l’autre des dispositifs listés plus haut.

Composants des produits ou supports de communication

Chaque produit de communication, quel que soit le média ou dispositif par lequel il est publié, peut s’analyser en examinant deux composants fondamentaux :

  • les contenants du produit (pages, diapositives, sections, …) ;
  • les contenus des contenants (textes, images, sons, contenus mixtes, …).

Ces contenants et contenus s’analysent à leur tour en prêtant une attention particulière à trois aspects importants de leur présentation :

  • la structure (structure des contenants et structure des contenus) ;
  • le style (style des contenants et style des contenus) ;
  • la composition (disposition des éléments dans les différentes strates structurelles — produit, contenant, sous-contenant, …)

Ces aspects sont étudiés de manière détaillée dans la suite de la formation CC-1.

Catégories
CC1-exos Com-Créa

Créer une collection de livrets de 8 pages

Au cours de cette activité, vous allez réaliser à la main des livrets de 8 pages destinés à être reproduit à la photocopieuse (impression recto seul).

Finalité de l’exercice :

Chacun choisissant de traiter un sujet ou deux, un groupe d’apprenants peu nombreux éditera une collection de livrets manuscrits portant sur les fondamentaux de la gestion de projet de communication imprimée et de la typographie.

Consignes de mise en œuvre

Les consignes de mise en œuvre sont communiquées en début d’activité, sous forme de documents photocopiés distribués à chacun.

Le livret est assemblé selon le principe illustré ci-dessous. Vous pouvez voir des images et des vidéos complémentaires sur Pinterest.

Attention : il y deux options de pliage pour obtenir un livret de 8 pages et chaque option présente un ordre des pages différent. L’autre différence notable entre les deux options est la disposition des plis. Ceci a une légère incidence sur l’ouverture du livret. Faites un test de pliage avant de choisir l’option qui convient le mieux à votre projet.

Liste des sujets à traiter

Parmi les sujets à traiter dans la collection de livrets envisagés, je vous propose de traiter les thèmes suivants :

  • Les 4 formes de lettres alphabétiques (capitale, minuscule détachée, minuscule attachée, majuscule)
  • Les 4 styles typographiques fondamentaux (normal/regular, gras/bold, italique/italic, gras italique/bold italic)
  • Les 4 familles typographiques fondamentales (amical/handwriting, neutre/sans serif, sérieux/serif, expressif/display)
  • Les 4 principales étapes d’un projet d’impression (gestion-préparation, conception-réalisation, impression-façonnage, distribution-diffusion)
  • Les 4 composants emboîtés d’un projet de communication (contenus, contenants, produits publiés, dispositifs de communication)

Voici deux thèmes plus libres, à traiter en 4 parties :

  • Pourquoi (ré)apprendre à écrire pour devenir designer graphique ?
  • Pourquoi (ré)apprendre à dessiner pour devenir designer graphique ?

Documentation sur les contenus

Les 4 formes de lettres alphabétiques

En examinant attentivement les fiches proposées aux écoliers vous remarquerez des disparités concernant le tracé d’une même lettre (sur la même fiche). Je vous donne un indice : la lettre concernée est la dernière entrée dans l’alphabet.

Les 4 styles typographiques fondamentaux

Les 4 familles typographiques fondamentales

Les 4 principales étapes d’un projet d’impression

Les 4 composants emboîtés d’un projet de communication

Le schéma ci-dessus résume graphiquement l’articulation entre les 4 composants-contenants d’un projet de com (contenus, contenants, produits publiés et dispositifs de communication). Produits et dispositifs peuvent être envisagés au pluriel.

Les 2 thèmes libres

La documentation sur les thèmes libres est laissée à l’initiative des auteurs.

Critères de réussite de l’activité

Prenez connaissance des critères de réussite de l’activité avant de vous lancer dans la réalisation du livret.

1 – Étape de la gestion-préparation

  1. Les instructions transmises ont été lues et d’éventuelles questions ont été posées pour clarifier les attentes du commanditaire (rôle tenu par le formateur).
  2. Une feuille blanche a été pliée et découpée selon les instructions données pour tester le dispositif proposé.
  3. Un test d’impression du livret à plat a été réalisé en début d’activité avec la photocopieuse qui sera utilisée pour reproduire les originaux manuscrits.
  4. Les marges d’impression du photocopieur et l’éventuel décalage de l’original sur la photocopie sont pris en compte pour la phase de conception.
  5. Les contenus à intégrer ont été collectés et analysés avant de démarrer la phase de structuration du livret.

2 – Étape de la conception-réalisation

  1. La répartition des contenus sur chacune des pages du livret est anticipée sous forme d’un “chemin de fer” complété à la main.
  2. Le gabarit fourni est utilisé en adaptant les marges proposées à l’usage des doubles pages envisagé.
  3. La 1re de couverture présente un titre annonçant clairement le contenu du livret.
  4. Le nom de l’auteur est placé en 1re ou 4e de couverture.
  5. Les pages intérieures présentent le contenu de telle sorte que le sujet abordé soit découpé en sections et en pages de manière cohérente.
  6. Le “chemin de fer” complété a été validé par le commanditaire avant la réalisation manuscrite de la maquette-prototype.
  7. Les marges intérieures sont prises en compte pour éviter que des textes se retrouvent alignés sur un pli après l’impression et le façonnage.
  8. Un gabarit a été utilisé pour positionner les contenus sur chaque page.
  9. Les écritures utilisées présentent des contrastes de forme, de taille et de graisse pour différencier les différentes catégories de texte (titres, intertitres, paragraphes, légendes, notes, etc.).

Critères optionnels

  1. La double page centrale est exploitée pour associer des contenus de manière cohérente.
  2. Les 2e et 3e de couverture sont exploitées pour présenter les contenus, soit en simples pages supplémentaires soit en doubles-pages
  3. Une première maquette a été produite, analysée puis annotée, en vue de modification à apporter. Le prototype a ensuite été réalisé en tenant compte des observations effectuées et des solutions envisagées.

3 – Étape de l’impression-façonnage

  1. Les marges d’impression du photocopieur et l’éventuel décalage de l’original sur la photocopie sont pris en compte au moment du tirage, pour éviter que des parties du manuscrit ne soient pas imprimées.
  2. Le pliage des exemplaires reproduits est identique à celui du prototype validé et permet de prendre connaissance des contenus de manière satisfaisante.
  3. Les couleurs reproduites par photocopie permettent de prendre connaissance des contenus de manière confortable pour tous les lecteurs.

4 – Étape de la distribution-diffusion

  1. Chaque participant à l’activité dispose d’un exemplaire de tous les livrets produits.

D’autres critères peuvent être ajoutés afin de permettre un contrôle de la qualité du produit livré en fonction du cahier des charges (les consignes transmises au cours du brief).

Catégories
CC1-exos Com-Créa

Créer une police de caractères

Lors de cette activité, vous allez dessiner une police de caractères italique cursive géométrique.

Finalité de l’activité

Dessiner à la main un alphabet de lettres cursives basé sur la structure de l’italique. Cette alphabet sera utilisable pour la stylisation du texte d’affiches réalisées avec le logiciel Adobe Illustrator.

Prérequis et objectifs

Prérequis

  • Être capable d’utiliser un navigateur pour consulter des sites de référence
  • Être capable de dessiner au stylo à bille sur une feuille quadrillée
  • Être capable d’identifier une écriture cursive italique

Objectifs

  • Être capable de respecter les contraintes d’une consigne stricte
  • Être capable d’adapter des modèles complexes pour produire des lettres alphabétiques simples

Outils et matériel

  • Stylo à bille ou équivalent
  • Feuilles A4 quadrillées, à petit carreaux

Consignes et livrable

Consignes

  • Dessiner à la main, en s’appuyant strictement sur les lignes du quadrillage d’une feuille à petits carreaux utilisées, les lettres minuscules et majuscules d’un alphabet cursif italique.
  • Seules les côtés et les diagonales d’un petit carreau sont utilisables. Les lettres adoptent ainsi un style très géométrique.
  • Mettre au point un premier alphabet sur une matrice de 2×2 carreaux. Une matrice plus grande est utilisable dans un second temps.

Toute transgression des consignes données plus haut doit être argumentée par l’apprenant vis à vis du formateur. Pour être mise en œuvre, la transgression doit être validée par le formateur.

Livrable

Une feuille de papier quadrillée, présentant à minima toutes les lettres minuscules et majuscules de l’alphabet proposé est remise au formateur.

Critères de réussite

Critères élémentaires de réussite

  • La grille de construction de chaque lettre est une matrice minimale de carrés (2×2 au minimum).
  • La structure des lettres est bien celle de l’italique (formes triangulaires tracées en un minimum de traits).
  • Les lettres sont liées les unes aux autres.
  • Des majuscules sont proposées, liées ou détachées.

Critères avancés de réussite

  • Les fontes proposées sont toutes à chasse constante (toutes les lettres occupent un espace de même largeur dans une force de corps donnée).
  • Des caractères accentués ou spécifiques (æ, œ, $, €, etc. ) ainsi que des signes de ponctuation sont proposés.
  • Des fontes de différentes graisses sont proposées

Source d’inspiration et réalisations similaires

Fontes cursives réalisées sur FontStruct

Fonte cursive géométriques

Fonte cursive à chasse constante

Fontes géométriques

Fontes géométriques à chasse constante

Prolongement(s) de l’activité

Les projets remis au formateur seront vectorisés avec Illustrator, sur une grille magnétisée. Les caractères vectorisés seront utilisés pour composer une affiche simple. Voir la fiche d’activité intitulée Affiche avec fontes géométriques

Catégories
Cours annexes

Créer des cartes mentales avec Markmap

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 :

  1. visualiser le code Markdown dans votre navigateur
  2. sélectionner ce code et placer le code dans le presse-papier (couper tout le texte)
  3. 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).

Le lien suivant pointe vers la carte personnalisée, mise en ligne sur un serveur distant : http://graphizm.fr/markdown/exo-markmap-03.html

Ces deux fonctions d’exportation fonctionnent très bien avec Google Chrome mais font planter Vivaldi que j’utilise malgré tout quotidiennement… pour tout le reste 😉

Catégories
Cours annexes

Liste d’outils utiles

Outils numériques d’aide à l’apprentissage

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 😉

Outils d’édition de notes en Markdown

Outils de gestion de notes en markdown

  • Obsidian (pour toutes plateformes – gratuit)
  • Notable (pour toutes plateformes – gratuit)
  • Zettlr (pour toutes plateformes – gratuit)

Outils de sketchnoting numérique

Outils de captures d’écran

Outil de collecte de liens

  • Deskyo (en ligne – version gratuite avec limites de fonctionnalités)

Outils d’épinglage et de partages de liens

  • Pinterest (en ligne – gratuit avec publicités)
  • Netboard (en ligne – gratuit sans publicité)

Outils de mind mapping (cartographie mentale)

  • Markmap (en ligne – gratuit)
  • MyMarkmap (en ligne – gratuit)
  • Maps Of Mind (en ligne – gratuit pour des cartes simples)
  • WiseMapping (en ligne – gratuit)
  • XMind (pour toutes plateformes – version gratuite avec limites de fonctionnalités)

Utilisez-vous déjà l’un de ces outils ? De quelle manière en tirez-vous profit pour vos apprentissages ?

Catégories
Cours annexes

Présentation des formations IMeP et CDUI

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
  • WordPress : Pascal MAISON
  • Programmation front-end (HTML, CSS) : Jérôme CRECY

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.

Dix façons d’apprendre (pour petits et grands)

Bénédicte Vallette d’Osia répertorie dix façons d’apprendre relevés sur le site https://apprendreaeduquer.fr/ :

  1. Parler du sujet à quelqu’un
  2. Faire des flash-cards (analogiques ou numériques)
  3. Inventer des histoires
  4. Illustrer les savoirs (sous forme de sketchnotes par exemple)
  5. Faire une mind map (une carte cognitive, heuristique ou conceptuelle)
  6. Morceller les apprentissages (arroser peu à intervalles régulier)
  7. Relire ses notes (et les compléter si nécessaire)
  8. Spatialiser le parcours vers l’information
  9. Réactiver sa mémoire en tenant compte de la courbe de l’oubli
  10. Dormir suffisamment

Comment s’instruire efficacement

Si vous voulez allez plus loin, parcourez cet article : Apprendre à apprendre, comment s’instruire efficacement et intelligemment, sur l’un des blogs d’Olivier Roland.

➜ Effectuez des recherches sur le sujetc’est peut-être la chose la plus productive que vous puissiez faire pour commencer votre formation !

    Catégories
    Index

    Cours annexes

    Présentation des parcours IMeP et CDUI

    Dispensée en début de session, ce cours présente l’articulation entre les différentes formations et modules proposés pour la préparation des titres pros Infographiste Metteur en Page et Concepteur Designer UI.

    Rédiger en texte brut

    Au cours des formations IMeP et CDUI, les apprenants sont amenés à manipuler des fichiers de texte de manière beaucoup plus exigeante que dans la vie courante. La notion de texte doit être approfondie et l’édition de texte doit être clarifiée.

    Apprendre à apprendre

    De la gestion de ses notes au sketchnoting numérique en passant par l’utilisation cartes mentales, plusieurs outils et pratiques sont proposés en début de formation pour faciliter les apprentissages.

    Présenter ses idées

    Les pages Web et les cartes mentales sont autant des outils pour apprendre à apprendre que des outils pour présenter ses idées. D’autres outils permettent de réaliser des diaporamas en utilisant les langages de la conception Web (HTML-CSS-JS) et de la rédaction Web (Markdown).