Résumé de section

  • Replier Déplier

    Bienvenue !

    Tout replier Tout déplier

    Les open badges sont des images numériques enrichies de métadonnées, servant la plupart du temps à attester de connaissances ou de compétences. Mais qui dit image dit graphisme ! Et créer une image de toute pièce n'est pas forcément évident...

    Cette micro formation a pour but de vous sensibiliser au graphisme et de vous donner des liens utiles, des techniques et des conseils pour créer un visuel adapté aux open badges.

    Objectifs

    • Identifier des outils en ligne pour créer des visuels de badge ;
    • Définir quelques principes graphiques de base ; 
    • Créer un visuel sur PowerPoint.
    Ce cours est en libre accès !

    Aucune création de compte ou d'inscription n'est nécessaire, toutefois vous ne pourrez le parcourir qu'en lecture seule.

    Pour participer aux activités (exercices, forum...), vous devez vous inscrire au cours

    S'inscrire au cours

    • Auteur(s) / Formateur(s): Viet Jeannaud - Fondation Callisto
      Public cible: Formateurs
      Date de publication: 1 juillet 2022
      Durée estimée: 30 minutes (2 heures avec les exercices)
      Licence: CC BY-NC-SA
      Open badge: Non
      Nombre d'inscrits: 8

  • Replier Déplier

    Les open badges : des badges numériques ouverts

    Pour savoir ce que sont les open badges.

    2 minutes de lecture

    • Quand on se réfère aux badges, on peut penser aux écussons sur les uniformes des scouts ("Cuisinier", "Campeur"...), ou encore aux macarons que l'on agrafe sur un vêtement... À la base, un badge est un élément visuel utilisé pour reconnaître une variété de compétences, d'attitudes, afficher un soutien pour une cause, son appartenance à une association...


      Copyleft, CC BY-SA 4.0, via Wikimedia Commons
      Liste des badges éclaireurs (SUF), via Scoutopédia

      Un open badge suit cette lignée. Il s'agit d'une image numérique utilisée pour attester quelque chose : un intérêt pour un sujet, l'acquisition d'une connaissance, d'une compétence, le suivi d'une formation... Comme pour des badges classiques, cette reconnaissance peut donc se faire sur différents niveaux.

      La spécificité d'un open badge est que l'image est numérique. De ce fait, on peut associer des informations à l'image (les métadonnées) pour vérifier la fiabilité du badge (qui est l'émetteur, le récepteur, quelles sont les conditions d'obtention...). Ces informations sont structurées dans un format permettant d'afficher l'image et ses informations sur plusieurs sites. 

      Schéma décrivant le fonctionnement d'un open badge

      Un open badge est une image contenant des métadonnées structurées dans un format permettant à d'autres sites d'afficher l'image et les informations qu'elle contient (émetteur, bénéficiaire du badge, date d'obtention, durée de validité, critères d'obtention...)


    • Derrière ce schéma un peu technique, le principal à retenir est :

      • qu'un open badge est une façon visuelle de distinguer des connaissances / compétences / intérêts... 
      • les informations associées à l'image sont vérifiables
      • l'image et ses informations peuvent être réutilisées sur d'autres sites


      Ci-dessous un exemple d'open badge, vous pouvez cliquer dessus pour regarder ses métadonnées.

      Nous n'allons pas traiter ici de sujets techniques, pédagogiques ou conceptuels des open badges, mais plutôt un autre aspect qui a toute son importance : le visuel.

  • Replier Déplier

    Le visuel, un élément important

    Intéressons-nous plus particulièrement à l'image et aux éléments qui la composent à travers quelques exemples. 

    10 minutes de lecture

    • Exemples de visuels

      Il n'y a pas vraiment de règles pour créer le visuel d'un badge. Il y a bien sûr des choses à éviter (que nous verrons par la suite), mais vous êtes assez libre de faire ce qui vous semble le mieux. 

      Il y a beaucoup de possibilités d'illustrations de badges, comme on peut le voir dans les exemples ci-dessous qui sont issus de la galerie d'Open Badge Passport. Vous pouvez aller dans cette galerie, il suffit de se créer un compte gratuit : https://openbadgepassport.com/app/gallery/badges

      Certains visuels utilisent des éléments récurrents (des rubans, des étoiles...), certains sont très évocateurs (on comprend de suite à quoi se réfère le badge), d'autres misent sur l'originalité, l'humour...

      Essayez de deviner à quoi correspondent ces badges et cliquez dessus pour en savoir plus. 


      Badges issus de l'application Open Badge Passport


    • L'image est la première chose que l'on voit sur un open badge, on regarde les métadonnées dans un second temps. Elle apporte donc une première impression non négligeable et peut être utile à plusieurs niveaux : elle peut simplement illustrer ce dont parle le badge, apporter un ton spécial (humoristique, décalé...), voire participer à la communication d'une entreprise, institution ou projet...

      Pour les bénéficiaires des badges, l'image peut jouer sur leur expérience de formation. Elle symbolise la récompense et peut avoir un rôle sur l'aspect motivationnel.

      Le visuel est important donc. Le problème est qu'il n'est pas forcément évident de le créer.

      Heureusement, il existe plusieurs générateurs de badges en ligne qui peuvent bien vous aider. Regardons-en quelques-uns de plus près.

  • Replier Déplier

    Les générateurs de badges en ligne

    Il existe des sites permettant de créer facilement et rapidement des visuels de badges. Ce peut être une solution pratique, mais il y a une contrepartie... 

    10 minutes de lecture

    • Si vous n'êtes vraiment pas à l'aise avec la création graphique, que vous n'êtes pas inspiré, ou que vous êtes pressé par le temps, sachez qu'il existe des sites vous aidant à créer des visuels personnalisés. Le processus est simple, vous choisissez un modèle (template), vous personnalisez les couleurs, le texte et le tour est joué. 

      Ci-dessous 4 exemples de générateurs de badges. 

    • Openbadges

      Ce site est le résultat d'une collaboration entre Le Dôme, la Chambre d’agriculture de Normandie (CRAN), la CMA Normandie et le réseau Canopé. Il propose "des outils pour faciliter et accélérer l’usage des Open badges au service de l’orientation et de la formation", avec notamment un générateur de visuels d'open badges. 

      L'outil a vraiment été pensé pour vous aider à concevoir le visuel de vos badges en fonction de vos objectifs. Il génère une forme et des icônes spécifiques pour garder une cohérence entre les badges d'une même famille (reconnaître des compétences, la participation à une journée, le soutien à un projet...). 

      3 points d'entrée vous sont proposés pour créer votre badge, leur fonctionnement vous est expliqué dans la vidéo ci-dessous :


      Vous pouvez tester gratuitement ces outils sur le site Openbadges.

    • Makebadges

      Un site plus simple que le précédent, créé par la Fondation City & Guilds, une organisation caritative britannique œuvrant dans la formation tout au long de la vie et notamment dans la reconnaissance de compétences. 


      Vous pouvez choisir une forme de base, personnaliser les icônes, les bordures, les couleurs, le texte et exporter le tout au format PNG. Il y a aussi un générateur aléatoire ("Lucky Dip") pour changer les éléments au hasard. 

      Vous pouvez tester gratuitement l'outil ici : http://www.makebadg.es/badge

    • BadgeBuilder

      C'est un outil proposé par Accredible, une entreprise qui propose une plate-forme pour la création, l'émission et la gestion de certificats et de badges numériques sécurisés. 

      Le générateur de visuel permet de choisir et personnaliser des modèles de formes de badges, d'icônes et rubans, d'uploader vos propres images, d'ajouter votre texte, et de télécharger le tout au format SVG (pour pouvoir le modifier avec un logiciel de DAO comme Inkscape ou Adobe illustrator) ou PNG.



      Vous pouvez tester gratuitement l'outil ici : https://badge.design/

    • Adobe Express

      Le site Adobe Express est une plateforme de la compagnie Adobe pour aider à la création de plein de types de contenus différents (logos, affiches, vignettes YouTube, bannières, cartes de visites...). Il apporte énormément de modèles, et notamment pour la création de badges.

      Les modèles proposés ont un aspect professionnel et l'éditeur semble plus poussé que les autres générateurs, il y a beaucoup d'options. Pour le texte par exemple, on peut modifier la police, la graisse, la taille, la couleur, ajouter des effets de contour, des bordures, déformer le texte en arrondi... 



      Les outils d'Adobe Express s'apparentent aux nombreux autres outils commerciaux freemium tels que Canva, Piktochart ou Genially. Vous pouvez utiliser gratuitement ce générateur de badge, mais il faut en contre-partie se créer un compte. 

      Pour tester l'outil : https://www.adobe.com/fr/express/create/badge

    • En résumé

      Les outils en ligne sont bien pratiques pour créer rapidement un visuel, sans avoir forcément des compétences graphiques. Toutefois il y a le risque de créer des badges qui s'apparentent trop aux autres, car beaucoup de personnes les utilise et on retombe souvent sur les mêmes designs. 

      Dans la galerie d'Open Badge Passport par exemple, on voit fréquemment ressortir les visuels issus du générateur d'Openbadge, ci-dessous encadrés en rouge.



      Rien de dramatique en soit, mais si vous souhaitez ressortir du lot il pourrait être bien de tenter de créer soi-même son visuel. Et c'est ce que nous allons tenter de faire maintenant, en abordant d'abord quelques conseils de conception.

  • Replier Déplier

    Conseils pour créer un visuel

    Par quoi commencer ? Quelles erreurs éviter ? Quels outils peuvent être utiles ? 

    8 minutes de lecture

    • Poser par écrit ses éléments de contexte

      Poser par écrit toutes les informations que vous avez concernant le badge est un bon point de départ : quel est son sujet, son contexte, à qui il s'adresse, qui est l'émetteur, doit-il y avoir une cohérence graphique avec d'autres badges (fait-il parti d'une série de badges), vous impose-t-on de mettre un logo... Cela permet de ne pas oublier certains éléments et de commencer à vous orienter vers certaines pistes

      Par exemple, si votre badge concerne le monde de la petite enfance, vous pourriez peut-être déjà avoir des idées de couleurs pastel pour donner une impression de douceur. 

      Chercher l'inspiration

      Que vous ayez une idée plus ou moins précise de votre badge ou non, il est toujours bon d'aller regarder ce qui se fait ailleurs. Cela peut vous conforter dans votre première idée ou au contraire vous en donner de nouvelles. Vous pouvez trouver des éléments intéressants sur lesquels vous baser (des icônes, des couleurs, des polices, des formes...). 3 exemples de sources ci-dessous (parmi tant d'autres) :

      Google image

      C'est une bonne source notamment pour visualiser des concepts abstraits ou difficiles à se représenter. Il se peut que vous ayez besoin d'effectuer des recherches générales dans un premier temps pour affiner vos mots clés sur Google image, ou de les saisir en anglais pour avoir des résultats différents. Vous aurez une multitude de résultats, souvent non pertinents, mais certains pourraient vous donner des idées inattendues !

      https://images.google.com/

      Banques d'images

      Il y a beaucoup de sites qui hébergent des images et que vous pouvez télécharger (gratuitement ou moyennant un abonnement). Certaines ne contiennent que des photos, mais d'autres incluent aussi des illustrations et dessins vectoriels. Contrairement à Google image, vous trouverez ici des résultats plus précis. Ce sont de bonnes sources pour trouver des idées de design de badges, des illustrations et des icônes : 


      Si vous recherchez seulement des icônes, il existe des sites spécialisés :

      • https://www.flaticon.com/ ; icônes gratuites et d'autres payantes
      • https://thenounproject.com/ ; icônes gratuites et d'autres payantes, vous pouvez retrouver celles qui sont gratuites dans les dernières versions de PowerPoint avec la licence Microsoft 365. 

      • https://iconset.io/ ; une application à télécharger (macOS et Windows) contenant une bibliothèque d'icônes à utiliser gratuitement


      Open Badge Passport

      Revenons sur Open Badge Passport un instant. Il s'agit d'un site gratuit où vous pouvez recevoir, stocker et partager des open badges. Comme nous l'avons évoqué plus haut, la création d'un compte est nécessaire, mais une fois que vous en avez un vous pouvez aller regarder la galerie des badges. Utile pour trouver de réels exemples de badges et observer ce que les autres font !


      Capture d'écran de la galerie Open Badge Passport https://openbadgepassport.com/

      Équilibrer le contenu

      Un badge est une image aux dimensions réduites, il y a peu de place disponible pour les contenus. En général, ce qui va primer le plus ce sont les illustrations (icônes, étoiles, forme du badge, ruban et autres éléments décoratifs), ce qui fait que la partie textuelle est renvoyée à son strict minimum.

      N'hésitez pas à simplifier le titre du badge par exemple si celui-ci est long. Ne vous obligez pas à faire rentrer toutes les informations, vous pourrez quoi qu'il en soit les indiquer dans les métadonnées. 

      De même, ne surchargez pas votre badge avec pleins d'éléments décoratifs. Il faut parvenir à trouver un juste milieu pour que le tout reste compréhensible, aéré et agréable à voir.

      Enfin, la plupart du temps, le badge va s'afficher en petit. Pensez à dézoomer pour admirer votre badge de loin et vérifier si tout reste lisible même à une certaine distance.

      Combiner 2 ou 3 couleurs

      La plupart du temps il est préférable de limiter le nombre de couleurs à 2 ou 3 pour éviter d'avoir un badge bariolé (à moins que ce ne soit voulu).

      Si vous partez de zéro sans reprendre un modèle préexistant, le mieux est de commencer à travailler en noir et blanc et de chercher des couleurs une fois le visuel terminé. Ainsi vous pourrez facilement appliquer vos couleurs sur des éléments précis.

      Le choix des couleurs peut être ardu, et il est difficile de parvenir à combiner des couleurs qui vont bien ensemble. Pour vous aider, vous pouvez :

      • Chercher une image contenant une palette de couleurs adaptée à votre badge, et utiliser l'outil pipette de votre logiciel pour récupérer les codes couleur



      Exemple d'utilisation de l'outil pipette sur PowerPoint

      • Utiliser le site coolors.co qui vous génère des palettes de couleurs qui se combinent bien !



      Capture d'écran de Coolors

      Jouer sur la typographie

      Il existe énormément de polices différentes qui peuvent servir le message véhiculé par votre badge. Une police du type écriture manuscrite renverra une impression de fait maison, de personnel, alors qu'une police Sans Sérif donnera un aspect plus sobre et moderne. N'utilisez donc pas forcément la police par défaut de votre logiciel (Arial, Times...), car elle est souvent utilisée et un des objectifs est de sortir un peu du lot. 

      Vous pouvez chercher et télécharger de nombreuses polices sur des sites comme Google Fonts ou Font Squirrel.

      Capture d'écran de Google Fonts

      En plus du choix de la police, vous pouvez modifier la casse, l'interlettrage, la graisse, ajouter de l'italique, augmenter ou diminuer la taille... Ces ajustements permettent de mettre en avant certains textes ou au contraire les rendre secondaires, et donc créer une hiérarchie. 

      Creating Visual Hierarchy With Typography, Carrie Cousins - design shack : https://designshack.net/articles/typography/creating-visual-hierarchy-with-typography/

      Avoir des dimensions égales

      Dernier point très pratique, assurez-vous d'avoir à la fin une image aux dimensions égales (un cercle ou un carré). C'est un critère obligatoire pour déposer son badge sur une plateforme d'open badges.

      Consigne pour uploader une image sur Open Badge Passport


    • Sur ces quelques conseils, nous allons maintenant passer aux choses sérieuses en créant des visuels de badge sur un logiciel.

      Il existe bien sûr des logiciels adaptés pour la création de dessin, comme Adobe Illustrator ou Inkscape (équivalent gratuit d'Illustrator, dont une initiation est disponible librement là).

      Toutefois, nous allons ici utiliser un logiciel bien connu, que beaucoup de personnes ont sur leur ordinateur et dont les fonctionnalités sont souvent méconnues : PowerPoint !

  • Replier Déplier

    Créer un visuel sur PowerPoint

    Voici 3 tutoriels de création graphiques avec PowerPoint, logiciel très populaire que vous avez probablement sur votre ordinateur.

    45 minutes de travail estimé pour 1 visuel

    • Les tutoriels qui vont suivre ont été réalisés sur Mac, mais vous devriez pouvoir vous y retrouver si vous travaillez sur Windows. Certaines fonctionnalités sont liées à la version 16 de PowerPoint, issue de la licence abonnement Microsoft 365.   

      Image de la version PowerPoint pour Mac, version 16.65 - licence abonnement Microsoft 365

      PowerPoint n'est pas gratuit, toutefois si vous êtes rattaché à une université ou autre organisme public, vous devriez bénéficier de l'abonnement à Microsoft 365. 

    • Si vous avez déjà utilisé PowerPoint, vous devez savoir qu'il est possible de créer des formes simples (cercles, rectangles, étoiles, rubans...) et bien sûr du texte. Depuis la version de 2016, il est aussi possible d'insérer les icônes gratuites provenant de nounproject. Les visuels de badges utilisent souvent ces éléments, toutes les conditions sont donc réunies pour en créer à partir de PowerPoint. 

      Évidemment, les tutoriels qui vont suivre seront plus ou moins simples selon votre aisance sur le logiciel. Même si tout est expliqué, il vaut mieux connaître les fonctions de base comme créer un texte, insérer des formes, dupliquer des éléments, les aligner, changer la couleur, ajouter un contour... Si vous savez faire cela, vous devriez pouvoir suivre les tutoriels sans trop d'encombres. 

      Voici donc 3 exemples de badges créés sur PowerPoint. Ils ont des styles différents et utilisent des fonctionnalités spécifiques (précisées ci-dessous). Ils sont classés dans un ordre de difficulté croissante, le badge 1 étant le plus facile.

      Sentez-vous libre de choisir celui que vous voulez, vous pouvez faire les 3 si le cœur vous en dit !

      Bon travail 🤓



    • Badge 1


      Badge 2


      Badge 3


    • Badge 1

      Ce visuel est le plus simple à réaliser. Il utilise des icônes (inclues dans PowerPoint), du texte et des formes simples. Idéal pour commencer en douceur. Le petit plus réside dans l'effet d'ombre (discret) qui donne un peu de relief au badge. Vous verrez aussi comment appliquer une couleur précise en utilisant un code couleur.

      Pour suivre le tutoriel, vous aurez besoin des éléments suivants :

      Icônes à télécharger

      Les icônes utilisées ici sont disponibles dans PowerPoint avec l'abonnement à Microsoft 365. Si vous ne les voyez pas, vous pouvez les télécharger ci-dessous (utilisez le format PNG si le SVG ne fonctionne pas).


      Télécharger les icônes


      Police à télécharger

      Les polices utilisées sont : 

      Pour en savoir plus sur l'installation des polices : référez-vous au support de Microsoft ou au support d'Apple.

      Vous pouvez utiliser une autre police si vous le souhaitez, mais vous devrez sûrement faire des ajustements par rapport à ce qui est montré dans le tutoriel.

      Couleur utilisée

      Un code couleur précis est indiqué dans le tutoriel. Vous pouvez simplement le copier et le coller dans PowerPoint.


      N'oubliez pas de sauvegarder de temps en temps votre document pour éviter de tout perdre en cas de problème (raccourci clavier : Ctrl + S ou Cmd + S sur Mac).

      En cas d'erreur, vous pouvez revenir en arrière (raccourci clavier : Ctrl + Z ou Cmd + Z sur Mac).



      Si vous le souhaitez, vous pouvez m'envoyer votre visuel à cette adresse : viet.jeannaud@unit.eu

      Vous pouvez aussi essayer de déposer votre badge sur une plateforme dédiée, comme Open Badge Passport (création de compte nécessaire). Le poids du fichier est limité à 250Ko, si votre image est plus lourde pensez à diminuer sa taille pour réduire son poids.

    • Badge 2

      Ce visuel est un peu plus difficile à réaliser que le premier. Il va demander de créer des zones de texte avec des dimensions précises, de les déformer (pour leur donner l'effet arrondi) et de les aligner correctement. 

      Les cercles sont souvent utilisés dans les visuels de badge. Ainsi ce tutoriel vous permettra de savoir comment procéder pour arrondir le chemin d'un texte et le reproduire dans d'autres projets de badges similaires.


      Pour suivre le tutoriel, vous aurez besoin des éléments suivants :

      Image à télécharger

      Il s'agit du logo de Callisto que nous allons intégrer dans le badge. Le logo est nécessaire pour suivre le tutoriel.


      Télécharger l'image


      Police à télécharger

      La police utilisée est Berlin Sans FB, téléchargeable ici : https://fontsgeek.com/fonts/Berlin-Sans-FB-Regular.

      Pour en savoir plus sur l'installation des polices : référez-vous au support de Microsoft ou au support d'Apple.

      Vous pouvez utiliser une autre police si vous le souhaitez, mais vous devrez sûrement faire des ajustements par rapport à ce qui est montré dans le tutoriel.

      Couleur utilisée

      Un code couleur précis est indiqué dans le tutoriel. Vous pouvez simplement le copier et le coller dans PowerPoint.


      N'oubliez pas de sauvegarder de temps en temps votre document pour éviter de tout perdre en cas de problème (raccourci clavier : Ctrl + S ou Cmd + S sur Mac).

      En cas d'erreur, vous pouvez revenir en arrière (raccourci clavier : Ctrl + Z ou Cmd + Z sur Mac).




      Si vous le souhaitez, vous pouvez m'envoyer votre visuel à cette adresse : viet.jeannaud@unit.eu

      Vous pouvez aussi essayer de déposer votre badge sur une plateforme dédiée, comme Open Badge Passport (création de compte nécessaire). Le poids du fichier est limité à 250Ko, si votre image est plus lourde pensez à diminuer sa taille pour réduire son poids.

    • Badge 3

      Ce visuel est le plus long et difficile à réaliser car il va demander de créer une forme point par point, de jouer sur la symétrie, de dupliquer et unir des formes... L'intérêt est de voir comment il est possible de reproduire une forme simple. Ici par exemple, nous allons reproduire la forme d'un bouclier à partir d'une image trouvée sur le web. Après avoir suivi ce tutoriel, vous pourrez suivre ce même procédé pour le reproduire à partir de n'importe quelle autre image.


      Pour suivre le tutoriel, vous aurez besoin des éléments suivants :

      Image à télécharger

      C'est l'image du bouclier que nous allons reproduire en créant une forme à la main. Elle est nécessaire pour suivre le tutoriel.


      Télécharger l'image


      Police à télécharger

      Les polices utilisées sont :

      Pour en savoir plus sur l'installation des polices : référez-vous au support de Microsoft ou au support d'Apple.

      Vous pouvez utiliser une autre police si vous le souhaitez, mais vous devrez sûrement faire des ajustements par rapport à ce qui est montré dans le tutoriel.

      Couleur utilisée

      Un code couleur précis est indiqué dans le tutoriel. Vous pouvez simplement le copier et le coller dans PowerPoint.


      N'oubliez pas de sauvegarder de temps en temps votre document pour éviter de tout perdre en cas de problème (raccourci clavier : Ctrl + S ou Cmd + S sur Mac).

      En cas d'erreur, vous pouvez revenir en arrière (raccourci clavier : Ctrl + Z ou Cmd + Z sur Mac).



      Si vous le souhaitez, vous pouvez m'envoyer votre visuel à cette adresse : viet.jeannaud@unit.eu

      Vous pouvez aussi essayer de déposer votre badge sur une plateforme dédiée, comme Open Badge Passport (création de compte nécessaire). Le poids du fichier est limité à 250Ko, si votre image est plus lourde pensez à diminuer sa taille pour réduire son poids.

  • Replier Déplier

    Références

  • Replier Déplier

    Merci d'avoir suivi ce cours !

    • Forum

      Ce forum est à votre disposition pour toute question. Vous pouvez aussi nous aider à améliorer ce cours en nous donnant votre avis. 

    • Sur le même thème

      Cours: Vidéos, diaporamas, présentations graphiques : créer vos propres sons d’accompagnement
      Cours: Créer le visuel d'un open badge
      Cours: Utiliser des GIF dans ses formations
      Cours: Créer une Ressource Éducative Libre (REL)