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.
Dans ce cours, nous allons voir comment utiliser les fonctionnalités de base de plusieurs outils numériques pour collecter, traiter et publier les résultats d’une veille informationnelle.
Collecter les informations numériques
Il s’agit de collecter les informations numériques trouvées en ligne après avoir effectué des recherches ciblées. Les informations en ligne se présentent sous forme de textes, d’images, de vidéos, et plus généralement de pages Web présentant plusieurs types de contenus.
Le choix des outils de collectes dépend de la manière dont on envisage de traiter les résultats, de les synthétiser puis de les partager. Il est possible d’automatiser en partie cette collecte. Nous développerons ce point en fin de chapitre.
Collecter des textes
La collecte des textes s’effectue généralement dans le cadre d’un projet rédactionnel. Les outils de collecte sont généralement ceux utilisés habituellement pour éditer les textes rédigés par vos soins.
La publication de textes s’insère cependant dans un flux éditorial qu’il est utile d’examiner attentivement. En effet, la tendance actuelle est à l’édition d’un même contenu rédactionnel (rédigé en texte brut) vers différents formats de publication (résultats d’un export en texte riche).
➜ Combien de formats de documents numériques utilisez-vous couramment ? Faites en une liste et déterminez quels sont les logiciels qui vous permettent de lire ces documents ? Quelles sont les passerelles permettant de passer d’un format numérique vers un autre format ?
Texte brut et texte riche
On distingue 2 grandes catégories de textes : les textes bruts (non formatés) et les textes riches (formatés). Les uns sont éditables à l’aide d’éditeurs de textes, les autres sont éditables à l’aide de traitements de texte
La première catégorie regroupe les textes enregistrés en tant que “plain text” (terminologie anglaise). La seconde catégorie regroupe les textes enregistrés en tant que “rich text” (traduit parfois par “texte enrichi”). Le texte riche est nommé aussi en anglais “fancy text”.
Définitions, avantages et inconvénients
➜ Consultez les articles ci-dessous pour mieux distinguer les 2 catégories de texte et repérer quelles sont les qualités du texte brut.
Pour produire un texte destiné à être retravaillé par la suite il est donc recommandé d’utiliser du texte brut. Les fichier de texte brut n’étant pas tributaire d’un logiciel de traitement de texte pour être affichés correctement ils sont plus pérennes, plus sûrs, plus souples à l’usage.
Pour collecter des contenus textuels, rédiger des notes de travail, esquisser des contenus rédactionnels, il est conseillé d’utiliser des éditeurs de texte brut facilitant la gestion documentaire. En voici une liste d’outils de notation (en ligne et hors ligne :
Les notes sauvegardées en texte brut sont faciles à styliser puis à mettre en page, après avoir été regroupées et structurées (hiérarchisées et ordonnées).
Conversion en texte brut
Il existe un outil en ligne pour convertir du texte Word en texte HTML propre (sans balise malvenue) : https://word2cleanhtml.com/
Écrire, collecter et sauvegarder en Markdown
Un des moyens les plus simples d’écrire un texte pour divers usages numériques consiste à utiliser un éditeur Markdown. Tous les outils de notation mentionnés plus haut sont des éditeurs Markdown ! Ils sont simplement dotés de fonctions particulières de gestion documentaires.
Voici une liste d’éditeurs Markdown faciles à prendre en main (avec 2 liens vers des sélections de plusieurs éditeurs) :
➜ Collectez vos texte au format Markdown, vous en verrez très rapidement tous les avantages, quelque soit votre plateforme de travail (Windows, MacOs ou Linux).
Collecter des images
Utiliser les outils dédiés sur GOOGLE IMAGES
Certaines plateformes de collecte d’images proposent des outils de recherche par similarité de formes ou de couleurs. Ces fonctions se révèlent utiles dans divers contextes. Nous y reviendrons plus loin. Google Images étant souvent utilisé, voici comment affiner ses recherches d’images en utilisant les outils mis à la disposition des internautes par Google.
Ci-dessous, je vous présente le résultat partiel d’une recherche sur Google Images concernant des affiches de style Art Déco à dominante orange.
Il est possible d’aller plus loin. Voici le réglage à effectuer pour rechercher des grandes images d’affiches Art Déco à dominante orange :
Collecter des images sur FLICKR et PINTEREST
Flickr est une plateforme permettant de rassembler des images dans des albums. Les images collectées sur Flickr ne sont pas reliées à une page Web. Extraites de leur contexte éditorial elles sont rassemblées et triées par le collecteur-collectionneur. Flikr n’est pas la seule solution d’hébergement d’images en ligne, vous en trouverez 5 autres à cette adresse : https://www.journaldugeek.com/dossier/hebergement-dimages-cinq-services-feront-oublier-flickr/
Pinterest est une plateforme permettant d’épingler des images sur des tableaux virtuelx. Les images épinglées sont aussi des liens vers les pages Web d’où elles proviennent. La plateforme propose également des images similaires à chaque image collectée.
Pinterest dispose aussi d’un puissant outil de recherche par similarité de formes et de couleurs (voir l’image ci-dessous).
Pinterest permet à chacun d’accéder à la liste des tableaux auxquels est abonné un “épingleur”. Cela permet d’élargir considérablement le champ de collecte en s’appuyant sur les choix d’un utilisateur ayant déjà retenu notre attention. Voir les captures d’écran ci-dessous pour savoir comment procéder.
➜ Faites une recherche élargie à partir de l’image ci-dessous (cliquez sur l’image pour atteindre l’épingle). ➜ Collectez les URL de toutes les plateformes sur lesquelles Ethan Fender publie ses travaux. ➜ Explorez les comptes des utilisateurs auxquels il est abonné. ➜ Éditez les résultats de votre recherche sur un document partageable en ayant soin de lui donner un titre explicite.
Collecter des images sur les sites d’inspiration graphique
Il existe de nombreuses plateformes fonctionnant de manière similaire à Pinterest. La ligne éditoriale de certaines d’entre elles les désignent tout particulièrement comme source d’inspiration pour les designers graphiques. Les informations iconographiques y sont déjà collectées, triées et publiées. Vous pouvez à votre tour en extraire les images qui vous intéressent. Voici une liste de quelques sites (le dernier lien élargit le champ de la recherche).
Il est plus facile de collecter des liens vers des vidéoshébergées en ligne que de collecter les vidéos elles-mêmes. Aujourd’hui de nombreuses informations sont disponibles sous forme de vidéos ou capsules vidéos. Nous développerons la collecte des liens un peu plus loin dans ce cours.
Collecter à partir de YouTube, DailyMotion et Viméo
➜ Faites une recherche sur ces trois plateformes à partir du mot « infographie », les résultats sont très différents et ils vous permettent d’élargir votre compréhension du concept d’infographie.
Collecter des cours de design graphique en vidéo
Plusieurs playlists vidéos regroupent d’excellents cours de design graphique.
Notez que Flickr permet d’héberger des vidéos. Vous découvrirez peut-être une précieuse information sur cette plateforme…
Collecter des cartes mentales
Les cartes heuristiques et conceptuelles font partie de la grande famille des cartes cognitives ou cartes mentales. De plus en plus utilisées dans l’enseignement, les cartes cognitives permettent d’organiser visuellement l’information.
Les cartes heuristiques, construite autour d’un sujet central, sont un moyen très pratique de référencer et classer des liens vers des sites Web. En effet, la plupart des outils numériques de mind mapping intègrent les URL de manière dynamique.
J’utilise fréquemment cet outil, publiant ensuite mes cartes sur Biggerplate, le “YouTube” du mind mapping. Rendez-vous sur cette page Web pour visualiser quelques cartes établies par mes soins : https://www.biggerplate.com/dendrographe
D’autres cartes heuristiques sont consultables dans la galerie des cartes publiées sur le site xmind.net. Xmind est un éditeur de cartes heuristique dont une version gratuite, fonctionnelle à 90%, est proposé en libre téléchargement.
➜ Effectuez une recherche sur la base du terme « veille informationnelle » sur le site de biggerplate.com et sur xmind.net. Notez les différences de mode de publication des cartes sur ces 2 plateformes.
➜ Je vous propose d’effectuer la même recherche sur le site d’un autre éditeur de cartes heuristiques : Mindmeister. Notez les spécificités de cette plateforme de publication en ligne. ➜ Laquelle des trois plateformes vous paraît la plus adaptée à la veille informationnelle ?
Une carte heuristique est un excellent moyen de collecter des liens. Une carte mentale devient ainsi un véritable portail thématique qu’il est facile de partager avec ses collaborateurs.
Collecter des liens
Le plus pratique et le plus rapide, lors des opérations de veille informationnelle est indéniablement la collecte de liens. Plusieurs plateformes permettent de les collecter et de les publier simultanément.
Nous venons de voir qu’il était possible de collecter, trier et publier des liens sous forme de cartes cognitives (mind maps). D’autres outils permettent d’effectuer les opérations fondamentales de la veille informationnelle.
L’un des plus anciens est Pearltrees mais sa refonte, il y a quelques années, l’a privé de nombreux avantages face à ses concurrents. Vous trouverez cependant sur Pearltrees des « colliers » très intéressants consacrés à notre sujet (voir ci-dessous). Il est nécessaire de s’inscrire pour accéder aux ressources de la plateforme.
Pour collecter des liens, je vous propose d’utiliser deux autres outils : Netboard, Deskyo.
▶ NETBOARD
Netboard soigne particulièrement la forme sous laquelle sont publiés les liens collectés. Cet outil permet de publier de nombreux autres types de contenus (voir l’illustration ci-dessous) et son utilisation s’avère très simple pour collecter, classer et publier des liens.
Netboard a placé des vidéos d’explication sur son utilisation au début de sa page d’accueil.
➜ Pour effectuer des recherches sur des pages existantes créées sur Netboard, il est nécessaire de faire appel aux fonction avancées de Google. Ajoutez site:netboard.me après une expression clé dans Google (« veille », par exemple). La page de résultats de recherche affichera seulement les pages présentes sur le site de Netboard.
Netboard est un outil très puissant permettant de publier toutes sortes de contenus. Prenez le temps d’en approfondir l’utilisation. Il se pourrait que cette plateforme devienne votre outil principal de curation 😉
▶ POCKET
Pocket est un outil de collecte de signets dans le but de lire les contenus des sites comme sur une tablette et de partager des listes de contenus à un réseau d’abonnés.
➜ La lecture en mode tablette permet de modifier les paramètres de stylisation (couleur de fond et couleur de texte, taille des caractères) et de lire seulement le contenu principal du site.
Guillaume Vendé a écrit un article (en français) utile concernant l’utilisation de Pocket. Vous y découvrirez un avantage à utiliser Pocket sur MacOs, iOs, Android ou Kobo… Les précisions techniques sont disponibles sur l’aide en ligne de Pocket.
La principale recommandation est d’archiver les articles une fois qu’ils ont été lus… et bien sûr de lire les articles collectés (avant de les archiver) 😉
Sur mobile, les atouts de Pocket sont présentés par Gui sur cette vidéo :
▶ DESKYO
Simple d’utilisation et d’usage, la plateforme Deskyo permet de disposer de tous ses favoris en ligne. Si ceux-ci sont bien classés (cela ne tient qu’à vous…), vous disposez d’une formidable base de liens, toujours accessible, quel que soit le navigateur et le poste que vous utilisez.
Le partage des favoris n’est pas autorisés, en sorte que vos collections de liens restent privées.
Deskyo permet d’exporter au format HTML l’ensemble de tous les liens collectés, dans une page structurée respectant le classement effectué. Une fonctionnalité récente permet aux abonnés Premium de partager une collection de liens particulière.
La génèse de Deskyo est détaillée par son fondateur, Stéphane Gloriot, sur le forum de la plateforme Openclassrooms. Un article, publié sur Blogger, présente brièvement Deskyo et en détaille les fonctionnalités.
Si la sauvegarde des liens nécessite plusieurs clics, cela permet de conserver en mémoire les classements effectués.
Collecter des flux RSS
Technologie incontournable de la veille informationnelle, les flux RSS permettent d’être tenu informé automatiquement dès qu’une nouvelle publication est effectuée sur un site auquel on est abonné.
▶ FEEDLY
Parmi tous les outils disponibles pour centraliser les extraits en provenance des différents abonnements, je vous recommande l’usage de Feedly.
Un autre outil, très polyvalent, permet de gérer ses abonnements RSS et bien davantage, il s’agit de Netvibes. Je vous laisse découvrir en ligne ses fonctionnalités et son potentiel.
S’abonner à des newsletters
S’abonner à une newsletter est désormais entré dans les mœurs numériques. Le tout est de savoir comment s’abonner… et comment se désabonner. La plupart des sites publiant des articles à un rythme soutenu proposent des abonnements par mail. C’est un excellent moyen d’être tenu au courant des actualités d’un site.
Dans le secteur du “print design”, une stagiaire m’a recommandé la newsletter du site graphiline.com.
Collecter des documents PDF
La recherche et la collecte de fichiers PDF s’est développée en même temps que leur mise en ligne, facilitée par la croissance des débits de données sur Internet. Il est désormais très fréquent d’ouvrir un fichier PDF lors d’une navigation sur le Web, d’autant plus que les navigateurs récents les lisent directement.
Des plateformes comme Issuu et Calameo se sont spécialisées dans la publication de documents au format pdf. En rajoutant la mention site:calameo.com après la saisie des mots clés dans Google on effectue une recherche spécifiquement dans les fichiers PDF archivés sur le site de Calaméo.
➜ Petite astuce pratique : pour mieux visualiser vos résultats de recherche de PDF, assurez-vous d’être sur l’onglet “Images”. Vous pourrez vous faire une idée plus précise de la présentation du document PDF disponible en ligne.
De façon générale, pour trouver des fichiers PDF sur le Web, il suffit de rajouter la mention filetype:pdf après la saisie des mots clés dans Google. Cette requête trie les résultats de recherche par le type de fichier indiqué (vous pouvez tenter l’expérience avec ppt ou doc).
➜ Faites une recherche en saisissant dans Google : design graphique filetype:pdf ou typographie filetype:pdf. Passez ensuite sur l’onglet “Images” pour mieux apprécier la présentation visuelle des résultats.
Collecte des information publiées sur des livres blancs
Les livres blancs sont des documents distribués gratuitement par voie numérique, le plus souvent au format pdf. Conçus par des professionnel, les livres blancs présentent souvent une synthèse intéressante sur tel ou tel sujet. Un site répertorie les publications francophones et vous met en relation avec l’éditeur des documents, il s’agit du site leslivresblancs.fr
Voici un exemple de livre blanc, publié par Editoile, traitant de l’optimisation de la rédaction Web : Écrire pour être lu et référencé
Le développement des outils numériques n’a pas fait disparaître la recherche documentaire dans les documents imprimés ou manuscrits. Par contre elle en a fait évoluer de nombreux aspects, de l’indexation à l’archivage, en passant par la publication des catalogues des bibliothèques, des musées, des centres de documentation, etc.
Accéder aux versions en ligne des magazines
La numérisation des documents manuscrits et imprimés permet au grand public d’accéder à de très nombreux documents jusqu’alors relégués dans les bibliothèques. Il n’en demeure pas moins que de nombreuses ressources n’existent que sous une forme imprimée ou manuscrite.
Pour ceux que le format « papier » ne rebute pas, les magazines spécialisés sont une source précieuse d’information. Le traitement des informations qu’ils contiennent en vue de les partager professionnellement est par contre plus lourd à mettre en œuvre… Plusieurs magazine dispose d’un site, comme Étapes (ci-dessus), sur lequel il est possible d’accéder à des contenus complémentaires.
Partager les références d’un livre
L’information contenue dans les livres est précieuse. Partager le contenu d’un livre n’est pas toujours possible, pour des raisons techniques et surtout pour des raisons juridiques (propriété intellectuelle, droits d’auteur, etc.).
Il est toujours possible de partager un lien vers la page du site de l’éditeur sur laquelle le livre est présentée. Voici par exemple un lien vers l’éditeur du livre de Sonia Baibou : Oh my code ! Je crée mon premier site Web. Voir plus haut pour collecter un tel lien sur Deskyo (espace privé) ou Netboard (espace public).
Questionner les acteurs du secteur
Une conversation conduite dans une démarche d’écoute active permet d’en apprendre beaucoup sur les ficelles d’un métier, sur la meilleure organisation des tâches ou sur les ressources utilisées effectivement sur le terrain.
Sous sa forme la plus aboutie, cette écoute active devient management des connaissances. Cette activité permet de synthétiser l’ensemble des savoirs stratégiques et techniques sur lesquels repose le bon fonctionnement d’un secteur.
Le traitement de l’information collectée consiste à l’analyser, à en vérifier les sources, l’actualité (la fraîcheur) et la fiabilité. Il s’agit de trier, de cataloguer puis de préparer la publication des résultats de veille. Il est possible d’ajouter quelques commentaires personnels. Traiter une information c’est lui donner du sens, l’insérer dans un contexte, la mettre en perspective avec d’autres informations.
L’intérêt de la veille se fonde en grande partie sur la manière dont les données collectées sont traitées.
Une information non traitée est une simple donnée. Traitée, la donnée devient information qui, traitée à son tour, devient connaissance. Cette connaissance, traitée en dernier ressort devient compétence.
Pour devenir information, une donnée doit avoir du sens (ratio de contraste à 4.5). Pour devenir connaissance, une information doit être réutilisable (un ratio de 4.5 entre 2 couleurs est conforme à la norme d’accessibilité AA). Pour devenir compétence, une information doit être réutilisable dans un but précis (toute couleur présentant un ratio de 4.5 sur le noir et sur le blanc permet de constituer un nuancier normalisé de 3 couleurs utilisable en webdesign).
Annoter des captures d’écran
L’annotation des images et en particulier des captures d’écran est un traitement de données brutes donnant plus de sens à l’image. Skitch est un outil parfaitement adapté à cet usage. La plupart des images annotées de ce cours le sont avec Skitch.
Il existe plusieurs autres outils d’annotation. Vous en trouverez une sélection sur outilstice.com
Capture d’écran dont certaines parties ont été floutées avec Skitch
Éditorialiser les informations
L’un des meilleur moyens de donner du sens à une information est de l’éditorialiser. La veille informationnelle prend tout son sens quand les informations collectées sont regroupées, classées, résumées, commentées, mises en relations avec d’autres informations. La numérisation des informations et la publication sur le Web permettent de dynamiser ce processus. Les contenus sont alors continuellement mis à jour.
Regrouper et classer les données collectées
Les outils de collectes de liens permettent à leurs utilisateurs de classer les liens dans des dossiers et des sous dossiers. Le simple fait de classer des favoris collectés sur Deskyo dans des dossiers (collections) nommés avec précision est un premier pas vers une éditorialisation des informations.
Un classement évolue avec le temps. Il est souvent nécessaire de créer de nouveaux dossiers ou sous-dossiers, de renommer des dossiers existants, de modifier l’emplacement de tel ou tel favori. Ce travail de classement nous permet de mieux cerner les sujets auxquels nous nous intéressons.
Effectuer ce classement sous forme de listes ou de cartes cognitives (voir plus bas) est aussi un excellent moyen de traiter les données collectées.
Éditorialiser en Markdown pour publier en ligne
Ce point a déjà été abordé plus haut, dans le cadre du chapitre consacré à la collecte des textes.
Les outils de traitement de texte ou les éditeurs de textes balisés (HTML ou Markdown principalement) permettent de regrouper des liens, des commentaires voire des images dans des documents de synthèse structurés. La mise en ligne est facilitée par la possibilité d’exporter le travail effectué en HTML stylisé (avec menu interactif dans certains cas…).
Éditorialisation d’une liste d’ouvrages avec un éditeur Markdown
Éditorialiser sous forme de cartes mentales
Nous l’avons déjà vu, il est possible de collecter des liens avec les outils de cartographie cognitive (mind mapping). Nous avons vu plus haut que les plateformes publiques d’archivage de cartes heuristiques (XMind share, Biggerplate, MindMeister) sont des lieux d’investigation et de collecte de données. Les informations y sont présentées sous la forme de cartes mentales par les utilisateurs de ces plateformes.
Une carte cognitive autorise la prise de note, le commentaire audio, l’insertion d’image ou de pièce jointe. Pour ceux que la structuration en arborescence ne déroute pas, la carte heuristique est un formidable outil d’éditorialisation.
Publier ses résultats de veille
La publication des résultats de la veille informationnelle permet de partager les découvertes effectuées mais surtout de montrer aux autres quel traitement nous appliquons à ces découvertes. Notre sélection est porteuse de sens, notre classement est porteur de sens, la forme sous laquelle nous partageons nos découvertes est elle aussi porteuse de sens.
Il en est de même pour la préparation du passage d’un Titre Professionnel. La forme donnée aux documents présentés au jury compte autant sinon plus que le contenu des documents. C’est la manière dont les connaissances sont traitées qui révèle le plus les compétences de chaque candidat.
Publier les résultats de veille avec Pinterest, Pearltrees ou Netboard
Nous avons vu que plusieurs outils de collectes sont couplés avec des outils de publication. Les tableaux Pinterest sont accessibles à tous s’ils n’ont pas été “privatisés”. Les liens collectés sur Pearltrees sont également visibles par tous, sauf paramètres contraires. Sur Netboard, les sites Web de collecte sont privés par défaut mais ils peuvent être volontairement rendus publics.
Tableau de bord de netboard.me
D’autres outils permettent de partager des liens vers des ressources en ligne sous une forme plaisante à consulter. L’un de ces outils, dédié particulièrement à la veille collaborative, se nomme Scoop.it.
Scoop.it propose une formule gratuite avec la possibilité de publier une seule page comprenant 50 liens commentés… C’est déjà beaucoup sur une thématique particulière. Vous pouvez consulter une page de ce type, animée par mes soins, intitulée Design Graphique.
Vue éditeur d’une page Scoop.it
➜ Scoop.it invite les utilisateurs d’un compte gratuit à se reconnecter régulièrement pour continuer à activer leur publication.
Faire valoir ses pratiques de veilles
Comme cela a été précisée en introduction, les résultats concrets de votre veille informationnelle seront évalués par le jury du titre professionnel. Vous serez questionnés à ce sujet et vous pourrez être amenés à montrer au jury de quelle manière vous procédez.
Je vous recommande donc a minima de disposer des comptes suivants, alimentés en fonction de vos centre d’intérêts professionnels :
un compte Deskyo avec plusieurs collections de favoris
un compte Pinterest avec plusieurs tableaux d’épingles
un compte Netboard avec plusieurs sites thématiques regroupant des présentations de sites pertinents
Dans le cadre d’une éventuelle recherche d’emploi, vous pouvez mentionner l’adresse de votre compte Pinterest ou Netboard.
Mieux encore, si vous éditez un blog sur votre métier, n’hésitez pas à communiquer son adresse sur votre portfolio et sur votre cv.
Considérez une fois pour toute que la publication de vos connaissances professionnelles est un aspect incontournable de votre métier. Soignez votre travail, soyez exigeant(e)s et choisissez une forme de publication en adéquation avec votre secteur d’activité.
Conclusion
Les outils et les pratiques présentées dans ce cours permettent de personnaliser une veille informationnelle mise en place dans le secteur du graphisme. Celle-ci s’insère dans une démarche de documentation personnelle, de formation individuelle de partage communautaire d’informations et de connaissances.
Dans le cadre des formations à l’exercice des métiers touchant à la communication, établir et mener veille informationnelle est une compétence à acquérir sans tarder.
➜ Créez un blog, publiez des sites sur les sujets que vous maîtrisez, écrivez, illustrez, alimentez les plateformes de curation de contenus, etc. Ne vous contentez pas d’apprendre des techniques, devenez de véritables acteurs de votre secteur professionnel en produisant des informations pertinentes et utiles à tous.
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.
Lors de cette activité pratique (niveau 3 de la formation Com-Créa), vous allez réaliser une mascotte simplifiée en lien avec l’identité visuelle d’une entreprise. Vous effectuerez des recherches sur le sujet, guidés par les consignes données et les ressources mises à votre disposition sur Netboard et sur Pinterest.
Prérequis : avoir suivi les niveaux 2 des formations Com-Créa et PAO-Tech.
Suivre un processus de design
La création d’une mascotte suit le même processus que la création d’un logo (voir niveau 2). Les étapes du processus sont celles du design graphique en général :
Brief et rédaction du cahier des charges
Documentation marketing et sectorielle
Planche de tendances
Arbre thématique
Planche de stylisation (formes, proportions, couleurs, traitement graphique)
Recherches graphiques (premières esquisses)
Vectorisation et prototypage
Tests et affinage
Propositions au client
Finalisation et charte d’utilisation
Utilisation et retours sur l’utilisation
Débriefing avec l’équipe de design et le client
Schématiser la succession des étapes de création
Processus de design adapté au design de mascotte
Il s’agit dans un premier temps de s’immerger dans le projet, les besoins du client et des utilisateurs, les tendances du moment dans le domaine concerné (étape formalisée par le brief, la documentation au sens large, la rédaction du cahier des charges et la planche de tendances).
Dans un second temps, il s’agit de définir le ou les axes de création sur lesquels vont se baser les recherches graphiques (arbre thématique, planche de style, premières esquisses)
Dans un troisième temps, il s’agit de réaliser vectoriellement la ou les propositions au client, en prenant soin de les tester et de les affiner si nécessaire au préalable.
Enfin, la dernière série d’étapes concerne la finalisation de la mascotte en la déclinant pour les différents usages envisagés et en concevant sa charte d’utilisation (charte graphique).
Visionner un processus complet
Vous pouvez visionner un processus complet de création de mascotte sur behance.net, depuis les croquis préparatoires jusqu’aux intégrations en vidéo et sur salons promotionnels.
➜ Sans aller jusqu’à ce niveau de professionnalisme, vous êtes invités, au cours du niveau 3 de la formation Com-Créa, à réaliser une mascotte simple en suivant la démarche indiquée. Vous pouvez vous baser sur les projets de logo menés au niveau 2 de la formation ou entreprendre une création pour répondre aux besoins d’une marque que vous connaissez.
Incarner les caractéristiques d’une entreprise
La mascotte incarne des valeurs de l’entreprise, elle donne corps à tel ou tel aspect de la vie de l’entreprise (sa production, ses services, son point fort, sa raison d’être, etc.).
Inventorier toutes les possibilités
Voici une liste de quelques éléments d’une entreprise “incarnables” par une mascotte :
Le nom de l’entreprise (ex : Miss Queen > mascotte reine)
Un produit créé par l’entreprise (ex : fruit > mascotte fruit)
Un ingrédient d’un produit (ex : chips aux crevettes > mascotte crevette )
Le bâtiment de l’entreprise (ex : tour Eiffel > mascotte tour Eiffel)
Les utilisateurs du service de l’entreprise (ex : le stade G. Guichard > mascotte footballeur)
Les bénéficiaires des services de l’entreprise (ex : société de protection des ours blancs > mascotte ours blanc)
Mascotte citron (produit) et mascotte diagnostique (service)
Utiliser la symbolique animalière
Selon les cultures, les animaux sont dotés de traits de caractère qui leur permettent d’incarner des valeurs, des conduites à tenir. Dans la culture occidentale, je vous propose quelques repères.
Identifier les traits de caractères animaliers
Les nourriciers : vaches, pélicans
Les protecteurs : lions, tigres
Les voyageurs : hirondelles, oies
Les royaux : aigles, lions, cerfs
Les laborieux : abeilles, fourmis
Les donateurs : cigognes, geais
Les bâtisseurs : castors, hirondelles
Les résistants au froid : ours polaires, manchots, pingoins
Les bavards : peroquet, maynate
Les sorciers et magiciens : hiboux, chouettes, corbeaux, chats noirs, araignées, chauve-souris
Les colériques : rhinocéros, bouledogues
Les économes : écureuils, fourmis
Les gourmands : ours, fourmilier (tamanoir)
Les voraces : cochons, sangliers
Les météorologues : grenouilles, hirondelles
Les malins : renards, singes
Les méchants : loups, araignées, chauves-souris, guêpes, crocodiles
Le choix du style graphique d’une mascotte est guidé par les recherches effectuées sur les tendances et les codes du secteur concerné. Les mascottes ci-dessus (guêpe et taureau) sont adaptées à l’identité visuelles de clubs sportifs. Un puissant contour, un relief contrasté mis en valeur par le trait, un traitement vectoriel franc et une expressivité agressive correspondent aux attendus des clubs et de leurs supporters.
Choisir un niveau de complexité et un mode de rendu
Le style graphique d’une mascotte repose sur le mode de rendu graphique et sur le niveau de complexité du dessin.
Le tableau ci-dessous différencie trente styles graphiques combinant niveaux de complexité et modes de rendu.
Il est plus facile de créer une mascotte dans les styles des trois premières colonnes du tableau. Le choix du style “cartoon modulaire” (3e colonne) permet assez facilement la réalisation d’animations détaillées.
Animer ou ne pas animer la mascotte
En tenant compte de votre niveau de technicité, tant en dessin qu’en PAO, choisissez un style graphique que vous pourrez exploiter sans difficulté dans la suite du projet.
En effet, il importe de prendre en compte l’éventuelle animation de la mascotte et le nombre de dessins à réaliser pour cela.
Quand le moment sera venu d’animer votre mascotte, consultez l’activité proposée à part, en lien avec ce cours.
Attention : l’expression “animer une mascotte” renvoie très souvent au fait d’utiliser un acteur costumé pour incarner la mascotte (lors d’un événement en lien avec la marque promue par la mascotte).
Choisir l’angle de vue et la pose de la mascotte
Pour rendre la mascotte plus vivante aux yeux des utilisateurs de la marque, il est souhaitable de pouvoir la représenter sous plusieurs angles de vue.
Dessiner des “model sheets” et des “turnarounds”
Les créateurs de mascottes les représentent ainsi dans des planches nommées en anglais model sheets ou turnarounds.
Il est évidemment plus facile de proposer des poses et des angles de vue différents dans les styles graphiques les plus simples.
Utiliser des poses dynamiques
Les poses des planches précédentes sont souvent statiques. Pour élargir l’expressivité de la mascotte, il est recommandé de la présenter dans des poses dynamiques.
Étudiez le travail des designers de personnage (character designers) pour diversifier vos dessins.
➜ Effectuez des recherches avec les mots clés characters poses ou chibi action. Collectez des exemples et donnez à vos personnages le mouvement des modèles retenus.
Pour gagner du temps ou suppléer à des compétences de dessin insuffisantes, vous pouvez personnaliser des gabarits vectoriels proposés en ligne sur diverses plateformes.
Mascotte créée en personnalisant une des poses de la planche précédente
Charter le design de la mascotte
Une fois les tests d’utilisation effectués et les correctifs apportés au design du personnage, il convient de consigner les points clés du dessin de la mascotte dans une planche de synthèse ou une charte graphique plus complète.
Préciser les formes, les proportions et les couleurs
Pour faciliter l’utilisation ultérieure de la mascotte, il est intéressant de mettre au point des versions modulaires du personnage. Plusieurs poses sont réalisables en assemblant différentes parties du personnage.
Intégrer la mascotte dans les produits de communication
Associer un univers à la mascotte
Une mascotte est comme un héros de bande dessinée ou un personnage de dessin animé. Elle évolue dans un univers personnel. Elle est porteuse d’une histoire et peut être accompagnée d’un(e) ou plusieurs ami(e)s ou partenaires.
Faire interagir les produits et la (les) mascotte(s)
Dans les exemples présentés ici, les petites mascottes utilisent le produit et le produit les montre en train d’évoluer dans l’univers associé à la marque. Photos et dessins sont combinés pour mêler réel et imaginaire.
Sur les sites mentionnés sur y-goguely.netboard.me, vous pouvez voir des mascottes imprimés sur des badges, des magnets, des coques de téléphone, des supports de PLV (Publicité sur Lieu de Vente), etc.
Animées à des degrés divers, elles sont aussi présentées sur les réseaux sociaux et sur les sites web de la marque.
➜ Mettez vos mascottes en situation et anticipez les besoins en communication de votre client.
Dans ce cours, vous allez apprendre à présenter professionnellement vos propositions graphiques. Il s’agit du développement de la phase finale du travail de création. Les indications données dans ce cours s’appliquent en premier lieu à la création d’un logo mais aussi de tout produit de communication (affiche, flyer, site Web, etc.).
Ce cours vise l’acquisition de compétences professionnelles avancées.
Le premier chapitre en dit assez pour les débutant-e-s. Celles ou ceux qui souhaitent aller plus loin tireront profit des données partagées dans la suite du cours. De nombreux liens sont proposés pour approfondir les sujet.
Présenter visuellement et oralement ses travaux
La présentation des propositions d’un designer graphique au(x) commanditaire(s) est le résultat d’une véritable démarche de communication visuelle. Le produit de communication le plus utilisé est une présentation visuelle, la plupart du temps commentée oralement.
Comme tout produit de communication, un diaporama doit être envisagé comme le fruit d’une interaction entre 4 éléments indissociables :
La production de contenus (rédaction, illustration, commentaires)
Le contexte de communication (les modalités de lecture)
Le style de présentation des contenus (couleurs, typos, formes, séparateurs, motifs, textures, visuels)
La structuration des contenus (plan rédactionnel, découpage, hiérarchisation, ordonnancement sur une grille)
Cela se traduit par la nécessité d’accorder contenus, styles et structure au public visé, dans le contexte de lecture du message à transmettre.
Concrètement, il s’agit de :
regrouper les visuels les plus significatifs de l’ensemble du travail réalisé
choisir un plan de présentation (chronologique, méthodologique, SPRI, etc.)
mettre au point ou collecter un gabarit de diaporama adapté à l’outil de présentation envisagé
rédiger les textes et les commentaires prévus pour accompagner les visuels
Les décideur-euse(s) à qui sont présentées les propositions graphiques doivent être informé-e(s) le plus clairement possible sur les critères pris en compte pour parvenir aux solutions présentées. Il s’agit donc de veiller à mettre en œuvre les opérations suivantes :
expliquer la démarche suivie, centrée sur les besoins de l’utilisateur-trice final
immerger les participant-e(s) dans l’univers graphique envisagé en tenant compte de toutes les données collectées
recueillir les remarques éventuelles pour la suite du travail à fournir.
Suivre des recommandations
Voici une liste de documents ou d’articles traitant de la proposition des solutions graphiques au client :
Il n’est pas toujours possible de défendre son projet de vive voix. Le plan B consiste alors à envoyer le diaporama au client (sous forme de pdf, le plus souvent), en inscrivant les commentaire dans les diapositives, sans oublier les détails pratiques comme vos coordonnées sur chaque diapo, le foliotage des diapositives, etc.
Voici comment procède Balo, un jeune graphiste et youtubeur belge. Sans doute envoie-t-il une loupe virtuelle avec son pdf pour permettre à ses clients de lire ses commentaires 😉
La solution détaillée dans cette vidéo est plus simple à mettre en œuvre qu’un diaporama commentée oralement !
Suivre les conseils d’un pro
➜ Voici ce qu’affirme Jean-Philippe Cabaroc, designer graphique stéphanois, concernant la présentation du design d’un site Web. Les principes énoncés s’appliquent en grande partie pour d’autres produits de communication.
la promesse faite à la cible (les réponses apportées aux attentes de l’utilisateur-trice)
les bénéfices à retirer pour la cible en utilisant le produit
le ton adopté en fonction du contenu, de la cible et du média choisis — Voir le dossier “Communication” surmanager-go.com
la mission du (de la) designer graphique (élaborer une solution centrée sur les attentes de l’utilisateur-trice final-e du produit) — Lire les articles deGeoffrey Dorneet celui deTancrède d’Aspremont Lynden
Il s’agit de présenter l’univers visuel choisi :
planches de tendances (moodboards ou tableaux Pinterest) — Découvrir les alternatives à Polyvore
planches de style (ébauches de planches de marque ou guides de style montrant le parti pris du designer graphique)
planches de recherches manuscrites et assistées numériquement
planches de propositions
Pour terminer, il s’agit de s’assurer que :
l’ (les) interlocuteur-trice(s) a (ont) bien compris ce qui a été énoncé et montré
les remarques effectuées par les participant-ante-s ont bien été collectées
les besoins de l’utilisateur-trice final-e demeurent au centre des travaux de finalisation à venir
La mise en œuvre d’un tel argumentaire relève de la fiction dans le cadre des attendus de la préparation au titre pro Infographiste Metteur en Page. Cet exposé met cependant en relief le niveau de professionnalisme des designers graphiques exerçant depuis de nombreuses années ou ayant suivi des études poussées dans de grandes écoles de design.
Élargir son champ de compétences
L’exercice du métier de designer graphique nécessite des compétences allant bien au delà de la maîtrise des outils de PAO et des méthodes de création graphique. La défense d’un projet de design graphique s’inscrit dans une stratégie marketing touchant à la fois le graphiste et son client. Le lexique utilisé par jean-Philippe Cabaroc est celui des stratèges de la mercatique.
Simplifier sa présentation
➜ Ayant pris connaissance des avis des professionnels du secteur, je vous invite à trouver le moyen le plus adapté pour défendre vos propositions graphiques.
La gamme des réalisations possibles va de la simple planche de proposition (voir les propositions au client, dans le cours sur le design d’un logo) au diaporama détaillé destiné à être commenté oralement face à des décisionnaires expérimentés.
Le facteur temps entre aussi en ligne de compte dans le cadre de la formation suivie au Greta. La finalisation d’un diaporama complet est en effet particulièrement chronophage.
Dans cet exercice, vous allez composer un flyer au format A4, en utilisant la plateforme d’édition en ligne Canva.
Vous allez utiliser une image de fond, une forme structurante et un bloc texte. Vous allez décliner le flyer et créer plusieurs variantes dans le même document, en envisageant divers positionnements de la forme structurante et du texte.
➜ Toutes les instructions nécessaires vous sont communiquées sur cette page Web.
Dans cet exercice, vous allez repérer des blocs-dates composés de différentes manière et les collecter dans un tableau Pinterest.
L’ordonnancement visuel des éléments constitutifs d’un texte dans une page doit se faire en tenant compte de la nécessité de produire non pas une seule mise en page mais de nombreuses déclinaisons d’un même message.
Pour simplifier la mise en œuvre de ces déclinaisons sur divers supports ou produits de communication, il est souhaitable de constituer des blocs informatifs dont l’ordonnancement des éléments ne varie pas.
Sur l’image ci-dessus vous pouvez repérer plusieurs éléments typographiques constituant des blocs informatifs dont le bloc-titre et le bloc-date, ainsi que le bloc-url.
Je vous invite à faire un relevé de blocs-dates sur plusieurs documents. Vous allez créer un tableau Pinterest regroupant des flyers, des affiches ou des encarts Web sur lesquels figurent des blocs-dates tous différents.
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 ici 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 une succession logique
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.
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
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.
➜ Effectuez des recherches sur le sujet, c’est peut-être la chose la plus productive que vous puissiez faire pour commencer votre formation !
Des outils numériques d’aide à l’apprentissage
Voici une sélection d’outils simples à prendre en main. Ils vous serviront pour mieux apprendre en écrivant, en dessinant, en capturant, en collectant, en commentant, en structurant vos notes.
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 😉
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 ? Quels conseils donneriez-vous à des personnes qui ne les utilisent pas encore ?
Ce cours présente une série de schémas de synthèse, conçus dans le but de vous permettre d’avoir un aperçu global de l’ensemble des sujets abordés en formation Com-Créa.
La plupart des schémas présentés mettent en évidence une relation chronologique entre des opération de design graphique. La manière dont ces opérations se succèdent dans la pratique est souvent itérative, c’est à dire qu’une série d’opérations est souvent répétée avant de passer à la suite du processus.
Améliorer une mise en page (CC niveau 1)
Le cycle éditorial
Le cycle éditorial peut se résumer en 6 étapes désignées chacune par un terme commençant par la lettre P :
Préparation (définition du projet, planification, etc.)
Production de contenus (réalisation textes, images, etc.)
Présentation (mise en page, écran, diapo, etc.)
Publication (reproduction, diffusion, etc)
Post-publication (suivi, mises à jour, etc.)
Préservation (archivage, indexation, etc.)
Ramené à 4 étapes, le cycle éditorial se résume aux étapes suivantes (les 4 P) :
Préparation (définition du projet, brief, documentation)
Production de contenus (réalisation des textes, des images, des des graphiques, des cartes, des infographies, etc.)
Présentation (mise en page, en écran ou en diapo, pré-publication, etc.)
Publication (reproduction, diffusion, suivi de publication, archivage, débrief)
Développé en 8 étapes, le même cycle voit se succéder les étapes suivantes :
Préparation (définition du projet, brief, documentation)
Pré-Production (choix de la stylisation et de la structuration des contenus)
Production de contenus (mise au point des textes, des images, des graphiques, des cartes, des infographies, etc.)
Post-Production (choix de la structuration et de la stylisation du support)
Présentation (mise en page, mise en écran, mise en diapo, etc.)
Pré-Publication (validation des maquettes finalisées)
Post-Publication (promotion, suivi de publication, archivage, débrief)
Les opérations de création graphique
Les étapes de la création graphique proprement dite (entre préparation et publication) se résument en 3 opérations :
Structuration
Stylisation
Composition
Chacune de ces étapes se résume à son tour par une série de choix et d’opérations primordiales. La structuration combine 3 opérations clés, la stylisation combine 7 choix (dont 3 choix primordiaux) et la composition combine 3 choix importants (de nombreux autres s’ajoutant à ces derniers).
Le contraste, en phase de composition, peut être remplacé (ou complété) par le choix de l’orientation, du rythme ou des proportions.
Concevoir, présenter et finaliser un logo (CC niv 2)
Le brief
Tout projet de communication visuelle commence par un brief. Les lettres BRIEF synthétisent le déroulement de la première étape de tout processus de design graphique :
Brief — questionnement
Recherches — documentation thématique
Information — prise en compte du contexte d’utilisation
Empathie — prise en compte de l’expérience des utilisateurs
Formulation — rédaction d’un cahier des charges précis (avec reformulation des attentes du commanditaire ou du client)
Les étapes de création d’un logo
La création d’un logo suit une série de 8 étapes, du brief à la finalisation de la charte graphique ou de la planche de marque :
Brief (rédaction d’un cahier des charges)
Tendances (réalisation d’une moodboard)
Styles (mise au point d’une planche de synthèse avec nuancier, combo typo, formes, etc.)
Recherches (production d’une planche manuscrite et d’une planche vectorielle)
Propositions (présentation de 3 propositions : 1 sûre, 1 originale et 1 créative)
Validation (acceptation d’une seule proposition ou d’une combinaison de plusieurs propositions)
Déclinaisons (développement d’une véritable identité visuelle)
Charte graphique (livraison d’une planche de marque plus ou moins détaillée)
Un débrief est envisageable en fin de processus.
➜ Dans un contexte de production où il s’agit avant tout de gagner du temps, un processus court est envisageable (fléchage ocre ci-dessus) :
Brief
Recherches
Propositions
Validation
➜ Lors des mises en situation professionnelles ou TP, en fin de niveaux 2 et 3, le processus adopté est le suivant :
Brief
Planche de tendances
Recherches manuscrites et vectorielles
Validation
Planche de marque (charte graphique simplifiée)
Illustrer des produits de communication (CC niv 3)
La mise en œuvre d’un projet de communication visuelle (création d’une mascotte, par exemple) suit les mêmes étapes que la création d’un logo. La dernière étape est remplacée par la livraison des éléments attendus pour l’impression ou la publication en ligne.
Les points abordés au niveau 3 dans le cadre d’un projet d’illustration de produits de communication se résument en 3 opérations dont les premières lettres forment l’acronyme MDR :
Modularisation (pour optimiser les déclinaisons)
Développement (pour diversifier les modes de publication)
Rationalisation (pour gagner globalement du temps)
Dans ce cours, vous allez prendre connaissance des principes de l’illustration modulaire, de son potentiel et de ses limites.
Définir l’illustration modulaire
Dans le contexte de l’illustration et du graphisme, le principe de modularité correspond à la possibilité d’assembler des éléments graphiques simples (nommés modules) pour construire une image.
Illustration modulaire ornementale
Dans une approche ornementale, le module graphique est une forme simple, souvent géométrique, facile à juxtaposer dans les 2 dimensions du plan. Le plus souvent, le module s’inscrit dans un carré. Il peut cependant facilement s’inscrire dans un hexagone ou un triangle.
L’illustration modulaire ornementale n’est pas nécessairement répétitive, comme le sont les textures formées de motifs juxtaposés et répétés à l’infini.
Le dessin d’un module ornemental peut être abstrait ou figuratif. Sur la capture d’écran ci-dessous, la première composition est un assemblage de d’éléments figuratifs évoquant la nature.
Illustration modulaire ornementale programmée
Le principe de construction modulaire est facilement programmable. Il existe donc des applications permettant de construire automatiquement des images modulaires ornementales.
PatternPad permet de personnaliser de nombreux paramètres, même si la composition finale est mise au point de manière aléatoire. Cette application autorise le paramètrage de pourcentage d’occupation des motifs dans l’espace de composition. Les compositions sont exportables au format SVG (exploitable avec Adobe Illustrator).
Couverture aléatoire de motifs sur 50% de la grille de composition
Illustration modulaire figurative
Une illustration modulaire figurative ne s’inscrit pas nécessairement dans une grille. Les modules à assembler sont juxtaposés ou superposés pour former l’image voulue.
Personnages modulaires
Tous les personnages ci-dessous sont composés d’éléments modulables, à la manière des 2 personnages ci-dessus.
Source : https://www.humaaans.com/
On trouve de nombreuses ressources en ligne pour assembler des éléments dessinés en vue de composer des illustrations adaptées à différents besoins graphiques.
La composition par assemblage de modules permet, en remplissant certaines conditions, de simuler un espace en 3 dimensions. C’est notamment le cas de l’illustration isométrique dont le potentiel a été pleinement utilisé dans le secteur des jeux vidéos.
Faire varier le style d’une illustration modulaire
À partir du moment où vous disposez des éléments modulables avec lesquels vous envisagez de composer vos illustrations, vous pouvez faire varier le style de vos illustrations en jouant sur de nombreux paramètres.
Faire varier la surface et le trait
Des surfaces vectorielles pleines se transforment très facilement en formes linéaires dotées d’un contour. Cette simple opération modifie totalement la perception d’une image.
➜ En réduisant le nombre des couleurs et en alternant zones pleines et zones vides avec contours, on obtient des images différentes dont l’impact est souvent plus fort.
Les contours vectoriels sont stylisables et les surfaces peuvent être texturées ou ornées de motifs. L’utilisation d’un nombre de couleurs restreint renforce l’impact visuel et les contrastes d’une image.
Compositions modulaires en 2 couleurs (dont certaines avec dégradé linéaire)
Compositions modulaires texturées
Faire varier les contrastes
Une image modulaire est riche des contrastes qui l’animent. Dans l’illustration ci-dessus vous pouvez repérer plusieurs contrastes :
foncé (obscur) vs clair (lumineux)
coloré vs non-coloré
texturé (varié) vs non-texturé (uniforme)
grand vs petit
ligne vs point
surface vs trait
gras (épais) vs maigre (fin)
séparé vs associé
orthogonal vs incliné
rectiligne vs courbe
terrestre (lourd) vs aérien (léger)
etc.
➜ Je vous propose d’utiliser une check-liste interactive pour lister tous les contrastes utilisables en composition visuelle.
Voir des applications pour des identités visuelles
Le site multimedialab.be propose un cours sur modularité et identité graphique où est analysé l’aspect modulaire d’une ancienne charte graphique mise au point pour Arte
