Créer le visuel d'un open badge
Topic outline
-
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 -
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
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.
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...)
-
-
Intéressons-nous plus particulièrement à l'image et aux éléments qui la composent à travers quelques exemples.
10 minutes de lecture
-
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
-
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.
-
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 !
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 :
- https://pixabay.com/fr/ ; gratuit sans droit d'auteur
- https://www.istockphoto.com/fr et https://www.shutterstock.com/fr/ ; payant, mais avec des contenus créés par
des créatifs qui peuvent donner de bonnes idées
- https://www.freepik.com/home ; contient des contenus gratuits et d'autres payants
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
-
-
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.
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.
-
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 :
- EB Garamond, téléchargeable ici : https://fonts.google.com/specimen/EB+Garamond
- Poppins, téléchargeable ici : https://fonts.google.com/specimen/Poppins?query=poppins.
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 :
- Berlin Sans FB, téléchargeable ici : https://fontsgeek.com/fonts/Berlin-Sans-FB-Regular.
- Poppins, téléchargeable ici : https://fonts.google.com/specimen/Poppins?query=poppins.
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.
- Berlin Sans FB, téléchargeable ici : https://fontsgeek.com/fonts/Berlin-Sans-FB-Regular.
-
-
- Open Badge Passport - Your Open Badges can make a difference
- MOOC culturels - Fondation Orange
- Reconnaître - Open Recognition Alliance
- Générateur de visuel pour Open badge - openbadges.ledome
- Makebadges - Digitalme
- BadgeBuilder - Accredible
- Créer un badge gratuitement en quelques minutes - Adobe Express
-
-
Ce forum est à votre disposition pour toute question. Vous pouvez aussi nous aider à améliorer ce cours en nous donnant votre avis.
-
