Catégories
VIT

Mener une veille informationnelle

Dans ce cours, nous allons voir comment mener une veille informationnelle efficace en utilisant au mieux les moteurs de recherche et les plateformes numériques disponibles

➜ Nous allons voir en quoi consiste la veille informationnelle et comment elle se déroule. Nous verrons aussi quelles sont les pratiques et méthodes à mettre en œuvre pour rendre la veille pertinente. Nous en tiendrons au contexte de la préparation des titres pros Infographiste Metteur en page (IMeP) et Concepteur Designer Web (CDUI).

Repérer en quoi consiste la veille informationnelle

La veille informationnelle est l’ensemble des stratégies mises en place pour rester informé en y consacrant le moins de temps possible. La veille informationnelle désigne des méthodes et des dispositifs (automatisés ou semi-automatisés) de recherche, de collecte, de traitement et de publication des informations.

Inscrire la veille dans une démarche éditoriale

Une veille informationnelle sérieuse se traduit par la production de livrables partagés. L’intérêt de la démarche repose sur les modalités de collecte, de traitement et de publication des informations choisies. C’est en optimisant la manière dont il partage les résultats de sa veille que le veilleur donne du sens à son activité.

Lors du passage des titres professionnels IMeP et CDUI, le jury se montre très attentif aux moyens mis en œuvre pour mener une veille informationnelle. Pouvoir montrer les résultas concrets de sa veille est déterminant pour l’obtention du titre visé.

Le savoir se construit en établissant des connexions transversales entre des domaines de connaissances différents. La veille informationnelle oblige à activer notre mémoire et nos facultés d’analyse, renforcant ainsi notre capacité à croiser les informations puis à les rendre significatives. Elle s’inscrit dans un processus documentaire, préalable à toute démarche éditoriale. Le public cible de la publication des résultats de veille est ici l’entourage professionnel du veilleur (et par ricochet, le veilleur lui-même).

L’objectif visé, au delà de la publication des résultats de veille, est l’exploitation des informations collectées. Il s’agit d’optimiser le fonctionnement du secteur professionnel dans lequel le veilleur et son public exercent leurs compétences.

Distinguer veille passive et veille active

La veille passive repose sur une implication volontaire des acteurs de l’entreprise. Ceux-ci font remonter aux décideurs les informations jugées importantes glanées ici ou là, sans objectif clairement défini auparavant.

La veille active est une démarche planifiée, organisée, répondant à des objectifs précis, confiée à des acteurs qualifiés et outillés pour cela. Les deux démarches se complètent au sein d’une entreprise.

Pour plus de détails :

Identifier le processus de la veille informationnelle

La veille informationnelle est un processus itératif (une séquence d’instructions destinée à être exécutée plusieurs fois et autant de fois qu’on peut en avoir besoin). Elle est souvent schématisée par un cycle en plusieurs étapes.

Source : https://www.slideshare.net/SverineBalaska/de-la-veille-stratgique-la-capitalisation-des-savoirs-65849821

Le nombre des étapes et leur nom varie selon les schémas. Dans le cadre de ce cours je développerai quatre phases :

  • la recherche (comprenant l’identification des besoins, le choix des sources et les recherches effectives)
  • la collecte des données (sur diverses plateformes)
  • la traitement (analyse, tri et commentaires des données collectées)
  • la publication des informations (partage des résultats de veille)

Effectuez une recherche dans Google Images en saisissant l’expression « Cycle de veille informationnelle ». Collectez les schémas qui vous semblent les plus intéressants (de votre point de vue).

Distinguer plusieurs concepts clés

La relative jeunesse des métiers du Web, l’évolution des pratiques rédactionnelles et la pratique quotidienne de la recherche en ligne contribuent à flouter les contours des différentes quêtes professionnelles d’information. Les technologies et les méthodes évoluent plus vite que les mots utilisés pour les désigner !

Distinguer recherche informationnelle et veille informationnelle

La recherche informationnelle se distingue de la veille par le fait qu’elle répond généralement à un besoin d’information plus urgent, dans le but d’une exploitation plus immédiate de l’information.

La recherche informationnelle se positionne généralement en début de processus de veille, lorsqu’il s’agit de repérer les sources d’information fiables auxquelles le veilleur se réfèrera par la suite.

Distinguer veille informationnelle et surveillance des réseaux sociaux

La veille informationnelle et technologique se distingue de la surveillance des réseaux sociaux pratiquée par les gestionnaires de communautés.

Pour plus de détails à ce sujet, je vous invite à consulter la page Veille informationnelle et community management.

Distinguer veille informationnelle et veille rédactionnelle ou éditoriale

La veille informationnelle et technologique se distingue aussi de la veille rédactionnelle ou éditoriale. L’objectif de cette dernière est de collecter une documentation suffisante pour rédiger un écrit fiable sur tel ou tel sujet.

La veille rédactionnelle s’insère dans la pratique professionnelle de la rédaction pour le Web (ou rédaction Web).

Préparer une veille active

Définir le périmètre de veille

Définir le périmètre de veille dans le secteur de la communication visuelle

L’exercice des métiers de la communication visuelle impose de se tenir régulièrement informé concernant les évolutions technologiques, les tendances du moment, les pratiques émergeantes, etc.

Il s’agit également de collecter des informations touchant plusieurs domaines liés indirectement à notre activité professionnelle. Les secteurs commerciaux et juridiques sont des exemples. Il appartient à chacun de fixer ainsi le périmètre de sa veille informationnelle.

Les applications pratiques qui découlent d’une veille informationnelle effective dans le domaine du design graphique concernent les points suivants :

  • la stimulation de la créativité individuelle et collective
  • le renouvellement des outils utilisés lors du processus de design
  • la collecte de ressources prêtes à l’emploi (textes, images, enregistrements, modèles, gabarits, etc.)
  • les pratiques d’éco-conception orientées impression ou hébergement
  • les méthodes de marketing, de design, de suivi de publication, etc.
  • les tendances graphiques du moment
  • la réglementation juridique
  • le positionnement des concurrents directs
  • les opportunités collaboratives
  • etc.

Définir le périmètre de veille dans un autre secteur (community management, rédaction Web, etc.)

En utilisant des outils comme Text2mindmap, Text 2 Mindmap ou tout autre outil d’édition de cartes heuristiques, explorez le périmètre d’une veille informationnelle en lien avec votre activité professionnelle.

Vous pouvez resserrer le périmètre thématique de votre veille. Si vous choisissez par exemple “La communication sur les réseaux sociaux”, vous ciblez des résultats concernant un domaine spécifique du community management.

Avec le périmètre de veille se définit généralement le niveau de profondeur visé. Cela se traduira par le choix d’un niveau de précision et de détails dans les résultats attendus.

Vous en saurez davantage en consultant les sites suivants :

Répartir la veille entre plusieurs acteurs

La veille informationnelle est une activité chronophage à ses débuts. Une fois rodé, le processus s’effectue “naturellement”, cependant sa mise en place nécessite d’y consacrer le temps nécessaire.

Il est envisageable de répartir la charge de la veille informationnelle entre plusieurs acteurs. Il est alors nécessaire de s’organiser de manière à ce que chaque veilleur puisse optimiser ses actions de surveillance des secteurs choisis.

Le repérages des outils collaboratifs les mieux adaptés, celui des méthodes les plus efficaces et des veilleurs-curateurs les plus pertinents fait gagner par la suite un temps précieux.

Définir les paramètres et objectifs de la veille

La veille s’effectue à titre personnel et collectif. Les attentes individuelles et communautaires ne sont pas les mêmes. Le type d’information collectée est différent selon les objectifs visés.

Avant de se lancer dans des recherches sur Google ou d’autres moteurs de recherche en ligne, il est nécessaire, entre autres choses, de déterminer :

  • les formats numériques à collecter (images, textes en ligne, textes téléchargeables, diaporamas, vidéos, etc.)
  • la longueur et la complexité des informations à collecter (articles universitaires, articles de vulgarisation, infographies complexes ou simplifiées, résumés avec liens, etc.)
  • la réputation des sources d’information à solliciter
  • la forme de publication des résultats de veille et de leur curation préalable (traitement personnel des informations collectée)
  • la liste des outils à utiliser pour mener à bien l’ensemble de la veille
  • le temps, l’argent et l’énergie à consacrer à la veille informationnelle

Distinguer la méthode push et la méthode pull

En matière de veille informationnelle, on distingue deux méthodes de recherche.

  • La méthode “pull” : le veilleur va rechercher les informations, en consultant divers médias et en utilisant si nécessaire un moteur de recherche en ligne.
  • La méthode “push” : l’information vient au veilleur, via des agrégateurs de flux RSS, des alertes Google ou des outils spécialisés.

Pour que la méthode push soit efficace, il est nécessaire de paramétrer convenablement les outils utilisés. Nous verrons dans la suite de ce cours comment paramétrer l’outil Feedly (agrégateur de flux RSS).

Effectuer une recherche ciblée avec les moteurs de recherche

Voyons maintenant plus en détail quelques outils mis en œuvre en pratiquant la méthode “pull”.

Utiliser les moteurs de recherche Google et Duckduckgo

L’outil le plus fréquemment utilisé pour effectuer des recherches en ligne est le moteur de recherche de Google. Ce moteur garde en mémoire l’historique des recherches effectuées à partir d’un poste ou d’un compte activé. Les résultats affichées en réponse à une requête sont donc biaisés par les recherches effectuées précédemment.

Cela présente à la fois des avantages et des inconvénients. D’une part Google accélère le signalement de ce que nous cherchons et d’autre part il freine la découverte d’autres résultats par sérendipité.

Pour élargir le champ de vos résultats de recherche, utilisez un moteur de recherche qui ne conserve pas en mémoire l’historique de vos recherches. Duckduckgo est un des plus connus.

➜ Je vous invite à effectuer la même recherche sur les 2 moteurs de recherche mentionnés plus haut pour constater les différences de résultats.

Vous pouvez faire le même exercice avec des concepts voisins comme “moodboard” et “style tile”.

Choisir les expressions et mots clés lors d’une recherche en ligne

Toute recherche en ligne, quelque soit le moteur utilisé, commence par la saisie d’une expression ou d’un mot clé. Diversifier les mots clés utilisés conduits à des résultats plus pertinents.

Utiliser des dictionnaires de synonymes

Les outils les plus simples à utiliser pour diversifier nos mots clés sont les dictionnaires de synonymes et les éditeurs de cartes heuristiques (les premiers pour les trouver de nouveaux mots clés, les seconds pour les noter puis les archiver…).

Noter les mots et expressions clés à utiliser

Rassemblez dans une carte mentale en ligne des synonymes de l’expression clé « veille informationnelle » et ajoutez à votre carte des termes ou concepts voisins. Utilisez pour cela le site https://tobloef.com/text2mindmap/ ou https://text2mm.com/. Vous exporterez ensuite une liste au format .TXT que vous pourrez consulter si nécessaire avec un éditeur de texte.

Voici d’autres sites permettant de réaliser des cartes mentales en ligne.

Utiliser les alertes Google

La plateforme Google propose un service très simple pour recevoir un mail dès qu’une nouvelle publication est repérée en lien avec un sujet défini par vos soins.

Le mode d’emploi détaillé du service est accessible à cet adresse : https://support.google.com/websearch/answer/4815696?hl=fr

Effectuer des recherches avancées avec Google

Google met à la disposition des internautes plusieurs outils pour aider chacun à mieux définir ses requêtes. Les plus simples à utiliser sont accessibles via des boutons personnalisés ou des menus complémentaires placés à proximité du champ de saisie.

Utiliser les fonctionnalités proposées visuellement par Google

En utilisant les fonctionnalités disponibles sur les pages de résultats de recherche, il est également possible d’affiner sa recherche.

  • Consulter les images associées
  • Consulter les actualités associées
  • Consulter les livres associés
  • etc.

Préciser ses recherches avec la syntaxe appropriée

Il existe de nombreux autres moyens d’affiner sa recherche sur Google. Utiliser des guillemets, le signe moins ou des opérateurs booléens permet de préciser la requête.

L’usage des guillemets pour rechercher des termes dans un ordre précis est désormais remplaçable par une recherche “Mot à mot” (Outils > Tous les résultats > Mot à mot)

Deux fonctionnalités s’avèrent très utiles pour préciser ses recherches. La première consiste à cibler des résultats en provenance d’un site précis. La seconde consiste à rechercher un type de fichier particulier.

➜ Pour trouver tous les articles traitant de typographie sur le site grapheine.com, faites une recherche en saisissant la requête suivante : typographie site:grapheine.com

➜ Pour trouver tous les portfolios de design graphique disponibles au format pdf, faites une recherche en saisissant la requête suivante : portfolio design graphique filetype:pdf (en français) ou graphic design portfolio filetype:pdf (en anglais)

Vous pouvez combiner les 2 filtres en ciblant un site de partage de fichiers pdf comme issuu.com ou calameo.com (le sujet est abordé plus en détails dans la section consacrée à la collecte des fichiers pdf).

Pour en savoir plus sur les recherches avancées avec Google, je vous invite à consulter ces sites :

Utiliser Google Scholar pour accéder à des textes universitaires

Google Scholar permet d’effectuer une recherche parmi des articles et des publications universitaires présentés sous différents formats.


Pour compléter votre formation, vous êtes invités à suivre le cours intitulé Collecter, traiter et publier les infos de veille.

Des ressources complémentaires sont disponibles sur y‑goguely.netboard.me/veille

Catégories
CC3-exos Com-Créa

Illustrer un kit de communication

Dans cet activité de mise en pratique (TD), vous devez concevoir un visuel modulaire destiné à illustrer un kit de communication. Ce kit sert à promouvoir un événement par le biais de plusieurs produits personnalisables. Vous vous appuierez sur une réalisation existante que vous optimiserez dans le cadre fictif d’une reconduction de l’événement.

Vous allez dans un premier temps étudier le kit d’aide à la communication mis en place par la Fédération Française de Cyclotourisme pour promouvoir la Fête du Vélo prévue en juin 2019. Vous imaginerez ensuite un nouveau kit pour promouvoir le même événement envisagé en juin 2021.

Prendre connaissance du cahier des charges

Consulter les documents fournis

Le bloc marque utilisé en 2019

Les documents à partir desquels vous allez travailler sont à télécharger sur votre poste de travail.

Le kit de communication de la FF Vélo avait été mis en ligne sur le site de la Fédération Française de Cyclotourisme. Il a été retiré depuis, remplacé par d’autres outils de communication que je vous invite à découvrir. Vous trouverez sur le site ffvelo.fr le lien de téléchargement de la charte graphique de la fédération.

Suivre la démarche de design vue au niveau précédent

Pour mener ce projet, vous reprendrez une démarche analogue à celle suivie pour la conception d’un logo (voir le cours précédent) : préparation-définition → idéation-conception → réalisation-publication.

Il vous faut donc mener un brief, analyser le cahier des charges, clarifier tous les points techniques relatifs aux livrables à produire. Vous allez vous documenter sur le sujet, prendre en compte la direction artistique du projet (la tendance et le style imposé), effectuer des recherches et faire des propositions. Vous allez finaliser la proposition retenue et décliner cette proposition sur tous les produits de communication envisagés.

Analyser le cahier des charges

➜ Après avoir analysé les éléments de la campagne 2019, une première version de cahier des charges a été rédigée. Ce cahier des charges doit être analysé et complété par les réponses aux questions à poser lors du brief (1re séance de cours).

Il s’agit de réaliser un kit d’aide à la communication, proposé en ligne par la Fédération Française de Cyclotourisme, pour la Fête du Vélo envisagée du 5 au 14 juin 2021.

Prendre en compte 4 axes positifs et négatifs

4 axes positifs sur lesquels s’appuyer :

  • communication festive
  • diverses pratiques (sportives, ludiques, touristiques, utilitaires, sur route, sur sentiers, sur circuits, etc.)
  • divers publics (hommes, femmes, ados, enfants, divers âges, etc.)
  • divers lieux (ville, campagne, montagne, littoral, complexes aménagés, etc.)

4 axes négatifs à éviter absolument (le contraire des 4 axes positifs…) :

  • communication formelle
  • 1 seule pratique
  • 1 seul public
  • 1 seul lieu

Identifier l’ensemble des livrables attendus

Les éléments à personnaliser devront prévoir un espace suffisant pour intégrer en impression numérique le nom de la ville où se déroulera l’événement ainsi que le lieu du principal rendez-vous (ex: Clermont-Ferrand | Place de Jaude).

En respectant la charte graphique publié par la FFC (couleurs, typographies, formes, etc.) Il est attendu la production des éléments suivants :

  • Un bloc marque optimisé (agrandir la zone événement et améliorer la présentation du texte)
  • Un bloc date optimisé (amélioration de la lecture des données)
  • Un visuel en appui sur les 4 axes définis plus haut – Format 297 x 297 mm – Résolution 300 dpi
  • Deux affiches (1 aff. A3 et 1 aff. A4 )avec zone de personnalisation
  • Un flyer A5 recto verso avec zone de personnalisation
  • Une couverture de guide pratique + gabarits pages intérieures (gauche + droite) – format fermé : 210 x 148 mm
  • Trois bannières Web (FB = 820 x 312 px + TWT 1500 x 500 px + ISTGRM = 1080 x 1080 px)
  • Trois GIF animés (billboard  970 x 250 px + leaderboard  970 x 90 px + pavé 300 x 250 px)

Il est également attendu la production des éléments graphiques permettant le marquage des objets suivants :

  • Stickers
  • Sacs
  • Gourdes
  • T-shirts
  • Casquettes

Préparer le travail de conception

Avant de se lancer dans le travail de conception de l’illustration il est nécessaire de mener à bien plusieurs opérations.

Analyser les documents fournis

Une rapide analyse des éléments existants (campagne 2019) montre que le visuel utilisé ne correspond pas aux axes proposés pour 2021.

Le visuel présente un vélo de femme, pour une utilisation ludique ou utilitaire, placé devant un paysage rural de plaine. Le visuel 2019 est trop axé sur un seul type de pratique, dans un seul type d’environnement et pour un public trop spécifique !

Analyser une collecte d’affiches sur le même thème

➜ Pour trouver des éléments de réponse à la question posée par la nécessité de cibler diverses pratiques, divers publics et divers lieux, consultez les sites de quelques studios graphiques ayant travaillé sur un projet de communication en rapport avec la fête du vélo.

Une collecte d’affiches portant sur le même thème permet de mieux cerner les données du problème. La question posée pourrait-être Comment traduire visuellement la multiplicité des usages cyclistes ?

➜ Chaque graphiste a trouvé une manière différente de répondre à la question. Certains ont produit plusieurs visuels pour la même campagne, d’autres ont multiplié les figures de cyclistes, des graphistes ont inventé des vélos aux usages multiples… d’autres sont tombés dans le même biais que le graphiste du projet retenu par la fédération concernée en 2019.

Tenir compte de la direction artistique imposée

Pour vous permettre d’expérimenter un type de mise en page très pratique dans ce type de contexte, je vous propose une ligne directrice à suivre concernant le type d’illustration à mettre en œuvre.

Le cahier des charges nous invite à produire une illustration de format carré. Par ailleurs, vous serez amenés à décliner cette illustration dans plusieurs autres formats rectangulaires, horizontaux ou verticaux.

➜ Je vous propose donc de réaliser un visuel en appui sur une grille de carrés de 3×3 (9 carrés), dans une optique modulaire, chaque carré ou carreau de la grille pouvant être déplacé dans la composition en fonction des besoins.

Dans le diaporama ci-dessous, des exemples d’assemblages de carrés sont présentés. Les carrés blancs figurent des zones de texte et les carrés noirs des zones d’image.

➜ Il s’agit donc :

  • de mettre en place, sur une grille de 9 carrés (3 colonnes x3 rangées), une image d’arrière-plan composée de carrés juxtaposés indépendants, eux-mêmes composés de formes géométriques simples évoquant un environnement paysager ;
  • d’incorporer dans la composition des éléments graphiques (formes, couleurs, textures, motifs) évoquant la mer et la montagne, la ville et la campagne, le bâti et le naturel ;
  • d’ajouter à cet environnement des illustrations ou éléments figuratifs évoquant le cyclisme sous toutes ses formes et pour tous les âges (avec ou sans personnages-cyclistes).

Se documenter sur le style imposé

➜ Avant de se lancer dans le maquettage de l’illustration, il est nécessaire de se documenter au sujet des compositions graphiques sur une grille de carrés. Pinterest offre un premier champ de recherches.

https://www.pinterest.fr/dendrographe/composition-grilles-de-carr%C3%A9s/

Pinterest mentionne la présence de motifs géométriques sur le site de Freepik. Une recherche plus détaillée vous donnera accès à des éléments vectoriels susceptibles de fournir une base sur laquelle vous appuyer pour mettre au point composition sur grille.

Sélectionner le visuel le plus pertinent

Prenez le temps d’examiner avec soin les motifs collectés. Dans Illustrator, créez un masque qui vous permette d’examiner le rendu d’une grille de 3×3 carrés, comme indiqué sur la capture d’écran ci-dessous.

Vous découvrirez ainsi le type de formes qui répondra le mieux au cahier des charges du projet. Il s’agit de trouver des formes qui soient ni trop urbaines ni trop rurales, évoquant un univers à la fois masculin et féminin, adulte et enfantin…

L’alternance des zones claires et des zones foncées entre aussi en ligne de compte. Veillez à ce que le regard circule facilement entre les différents motifs. Si les formes vous conviennent mais que les couleurs vous semblent mal réparties, n’hésitez pas à faire des modifications.

Le carré sélectionné servira de charpente à l’illustration définitive. Il est prévu d’insérer dans les formes du motif global des éléments visuels plus significatifs (photos, dessins figuratifs, etc.) ainsi que des textures si cela est jugé nécessaire.

L’équilibre final sera atteint quand toutes les composantes graphiques seront intégrées dans la composition. Ne cherchez à équilibrer trop tôt votre composition !

Affiner le visuel sélectionné

Les visuels collectés sur Freepik ne sont pas toujours construits avec rigueur. Suivant le temps dont vous disposez et surtout si vous envisagez de décliner une série de motifs géométriques de plusieurs manières, envisagez de rectifier l’alignement des traits.

➜ Pour effectuer ce travail de rectification des tracés, il est nécessaire de travailler en aperçu “Tracés”.

Vous pouvez régler le pas de la grille sur la dimension des modules et activer le magnétisme de la grille. Le reste est une question de persévérance…

➜ Rectifiez a minima les 9 carrés (3X3) que vous avez sélectionnés pour construire votre illustration. Utilisez les fonction d’alignement horizontal et vertical, dans Illustrator, pour rectifiez votre dessin.

Utiliser les couleurs de la charte

La FFC dispose d’une charte graphique proposant plusieurs couleurs.

Étager les couleurs fournies

Les couleurs imposées ne sont pas présentées de manière à mettre en évidence l’étagement de leur valeur de gris, base de toute composition visuelle structurée. Il est primordial, lors de la colorisation définitive du visuel, d’optimiser le contraste entre les différentes parties de votre composition.

Cela donne du rythme à l’image, en évitant toute impression de sous-exposition (image trop sombre) ou de surexposition (image trop claire). La lecture des formes clés doit être optimisée quelque soit les conditions d’éclairage et le visuel est plus impactant.

➜ Il convient donc de trier les couleurs fournies en utilisant 3 catégories (couleurs foncées, couleurs moyennes, couleurs claires). Je vous propose de compléter pour votre usage, la planche ci-dessous.

Vous pouvez ajouter une couleur dont la symbolique dans le monde cycliste est très forte, il s’agit du jaune (maillot jaune). Cette couleur est curieusement absente du nuancier de notre “client”.

Vérifier l’équilibre des valeurs

➜ Une fois que vous avez réparti vos couleurs dans votre composition, en veillant à utiliser les 3 catégories de couleurs (foncées, moyennes et claires), exportez votre travail en tant qu’image matricielle (ou faites une capture d’écran).

Ouvrez cette image matricielle dans Photoshop et convertissez l’image en niveaux de gris. Vous verrez alors au premier coup d’œil si votre composition est bien rythmée et bien contrastée. Si ce n’est pas le cas, vous saurez immédiatement quelle est la couleur à changer pour obtenir une valeur plus claire ou plus foncée dans les zones concernées.

Pour améliorer la qualité visuelle de votre image, vous pourrez ajouter ponctuellement des petites zones de blanc (ou de couleurs claires sur fond blanc).

Prévoir les fonds perdus

Il est maintenant nécessaire d’anticiper l’intégration du visuel créé dans les différents produits de communication. Le premier livrable est une affiche A3 sur laquelle le visuel occupe toute la partie supérieure.

➜ Prévoyez 5 mm de fonds perdus et anticipez le résultat d’un massicotage imprécis de l’affiche en disposant de manière cohérente les éléments débordants. faites bien attention de ne pas déformer les triangles et les cercles en vous contentant de décaler des points de contrôle.

Décliner le visuel sur les différents produits

Composer l’affiche

Le moment est venu de mettre en page votre visuel pour composer l’affiche A3. Le schéma ci-dessous vous indique comment se positionne le visuel dans l’affiche.

Il est assez déroutant, pour un illustrateur débutant, de voir le visuel qu’il a patiemment mis au point passer au second plan lors de la mise en page. Les textes ou leurs blocs d’encadrement dissimulent les motifs ajustés avec soin : c’est parfois assez frustrant ! Soyez rassurés, dans d’autres produits de communication du projet (notamment la couverture du livret), le visuel mis au point sera moins “encombré” par les différents blocs d’information.

➜ Effectuez le positionnement de tous les éléments qui doivent figurer sur l’affiche et, si vous le jugez nécessaire, vous rectifierez votre image pour l’adapter à son utilisation dans l’affiche. Ne cherchez pas à équilibrer votre affiche avant d’avoir intégré tous les éléments qui doivent y figurer.

Pour enrichir votre travail de recherche, référez-vous au cours intitulé L’illustration modulaire.

Créer des gifs animés

La création des gifs animés nécessite de disposer de plusieurs “écrans” sur lesquels s’affichent successivement les textes proposés au lecteur.

Il est tout à fait envisageable de préparer les écrans dans Adobe Illustrator, sur des plans de travail distincts, puis d’exporter pour les écrans à la taille réelle (x1), en jpg ou en png.

➜ Pour transformer les images exportées en gif animé, je vous propose d’utiliser l’outil en ligne gifmaker.org (voir tutoriel ci-dessous).

Catégories
CC2-cours Com-Créa

Designer un logo

Au cours du niveau 2 de la formation Com-Créa, vous allez apprendre à mener de manière méthodique la création d’un logotype. Nous distinguerons cinq phases clés et nous insisterons sur les trois phases centrales du processus :

  • l’idéation
  • la conception
  • la réalisation

Ces trois phases sont encadrées par la phase de préparation et la phase de finalisation.

Préambule

Des ressources sont mises à votre disposition pour vous permettre d’approfondir les points abordés. Des liens vers des sites traitant de la création de logo ont été regroupés à cette adresse : https://y-goguely.netboard.me/designlogos/

La création de logo est une application concrète des fondamentaux de la communication visuelle vus au niveau 1. Vous pouvez revoir les points abordés précédemment en consultant les sites présentés sur https://y-goguely.netboard.me/basescomvi/

Pour situer la création d’un logo dans le contexte de l’identité visuelle d’une marque ou d’une organisation, je vous invite à visionner la vidéo ci-dessous.

Pour ce qui concerne le format idéal du logo, nous en reparlerons ultérieurement 😉

Les étapes de la création d’un logo

Les 5 étapes du design d’un logo vous sont présentées sur https://graphizm.fr/com-crea/etapes-design-logo

À chaque étape du processus, des productions sont mentionnées, de même que les livrables attendus. Il s’agit des productions que allez mettre en œuvre au fil de votre formation. Vous les repèrerez en gras dans les encadrés déroulants de l’infographie. Les livrables sont indiqués dans les encadrés bleus.

Le support de cours

Un support de cours complet sur le design de logos est accessible en ligne à cette adresse : https://graphizm.fr/com-crea/design-logos. Ce cours complet vient compléter celui-ci. Vous disposez ainsi de toutes les informations utiles pour mettre en pratique la méthode préconisée.

1 – Préparation et Idéation

Quand un client vous demande de lui réaliser un logo, il est inutile de se lancer bille en tête sur son logiciel de dessin préféré pour concrétiser les premières idées qui vous viennent à l’esprit. Vous iriez droit au casse-pipe !

Voici un tableau présentant les étapes par lesquelles vous devez passer, avant d’entreprendre la conception proprement dite (qui précède elle-même la phase de réalisation). La première rangée concerne les livrables de la phase de préparation, assimilée ici à la phase d’idéation.

Tableau interactif consultable en ligne

Le tableau ci-dessus est une page Web interactive. En cliquant sur chaque case vous pouvez la marquer comme étant validée (la case se retourne) au fur et à mesure de l’avancée de vos travaux.

Pour vous permettre d’utiliser ce tableau dans le contexte de votre future activité professionnelle, je vous invite à télécharger le dossier de cette page Web. Vous pourrez même la personnaliser quand vous maîtriserez les langages HTML et CSS ;-).

La réalisation de ces différents documents fait appel à vos facultés littéraires, logiques et imaginatives, ainsi qu’à vos facultés de synthèse et d’anticipation. L’objectif visé est la stimulation de votre attention créative, dans le respect des contraintes du cahier des charges.

➜ En rédigeant ou en finalisant un cahier des charges, en collectant sur un tableau Pinterest des images thématiques, en construisant une planche de style, vous élaborez les outils de conception qui vous serviront dans la suite du projet.

Le brief

La première chose à faire est donc de bien cerner la demande du client et pour cela, rien de tel qu’un brief créatif ou un questionnaire à compléter…
Pour vous guider vers les réponses dont vous allez avoir besoin, je vous invite à télécharger des gabarits de questionnaire (format XMIND et PDF) puis à les utiliser au plus vite.

Dans le questionnaire mis à votre disposition, les questions 4 et 5 vont se révéler cruciales pour la suite de votre travail :

  • Citez 3 mots que vous aimeriez que les gens associent à votre entreprise lorsqu’ils verront votre nouveau logo
  • Citez 3 mots que vous ne voulez pas que les gens associent à votre entreprise lorsqu’ils verront votre nouveau logo

Notez bien que ce questionnaire s’adresse à votre client et que les gens dont il est question ici sont les clients de votre client ! Il ne s’agit donc pas de mentionner en réponse à ces questions les qualités attendues ou constatées du logo (impactant, univoque, simple, clair, …) ou les défaut à éviter ou malheureusement manifestes du logo (trop fouillis, peu lisible, trop coloré, pas assez marquant,…). Il s’agit de mentionner ce qui vient à l’esprit des gens, par association d’idées (forêt, grand air et randonnée, par exemple ou diététique, sobriété et bonne santé).

Ces six mots (3 concepts attendus et 3 concepts à éviter) pourront être repris pour réaliser l’arbre thématique (voir plus bas).

La documentation

Sachant un peu mieux de quoi il en retourne, vous allez pouvoir commencer à vous documenter. Vous collecterez un maximum d’informations pertinentes sur le secteur d’activité de votre client, sur ses concurrents, sur ses habitudes en matière de communication, etc.

Utilisez Pinterest ou pour conserver une trace de vos collectes thématiques. Elles sont suceptibles de vous resservir en d’autres circonstances…

La planche de tendance

La planche de tendance, aussi appelée moodboard, est un moyen graphique de synthétiser le résultat des recherches effectuées. Elle permet de commencer à prêter une attention plus soutenue à certaines couleurs, certaines formes, certaines polices de caractères, etc.

Moodboard du blog lapetitefreelance.com

Les planches de tendance sont réalisables en utilisant des gabarits disponibles en ligne. Faites une recherche (avec l’entrée “free mood board layout”, par exemple…) et choisissez le gabarit qui correspond le mieux à votre projet. On en trouve sur freepik

Sa réalisation sous forme de planche soignée est une sorte de bonus, un plus pour la présentation des résultats de la documentation. Il est de plus en plus fréquent qu’une planche de tendance soit intégrée dans une planche de style ou dans une planche de marque. Elle offre alors une ouverture sur les éléments visuels qui ont présidé à l’élaboration de l’identité visuelle.

Si vous êtes pressés, un tableau Pinterest fait parfaitement l’affaire. Pensez à y intégrer des images qui nous permettent de repérer des couleurs dominantes, des figures et des symboles, des caractères typographiques, des motifs ou ornements,… tout élément graphique susceptible d’être ensuite isolé et repris pour constituer le logo et l’identité visuelle de la marque.

Vous pouvez voir de tels tableaux Pinterest, constitués par une professsionnelle du design graphique sur designisvital.co. Julie Lebraud y présente notamment un tableau d’inspiration sur le thème des identités visuelles en lien avec le luxe. Elle a également constitué un autre tableau sur le thème des identités visuelles de food trucks. D’autres thématiques ont été traitées, que vous pouvez exploiter à votre tour en collectant les images présentées ici dans vos propres tableaux de tendances.

L’arbre thématique

L’arbre thématique est un moyen plus littéraire de synthétiser le résultat de ses recherches documentaires. C’est aussi un moyen d’explorer les territoires thématiques voisins de celui sur lequel le brief nous a conduit.

Je vous invite à utiliser deux outils simples :
• text2mindmap (https://tobloef.com/text2mindmap/), un outil très simple d’utilisation et dont le système de sauvegarde des cartes au format TXT est universel.
myMindmap (https://mymarkmap.netlify.app), un outil basé sur l’usage du Markdown, à la manière de Markmap.js

Recommandations pour élaborer l’arbre thématique

La manière la plus cohérente de bâtir un arbre thématique consiste en effet à partir des 3 mots clés positifs, disposés autour du sujet central (la thématique du logo). Il s’agit ensuite de faire grandir l’arbre en ajoutant des branches à partir des 3 nœuds correspondant au 3 mots positifs (ce à quoi doit immédiatement penser le lecteur en voyant le logo).

Travaillez sur 3 niveaux. Restez très concrets. Évitez de mentionner des termes généralistes tels que « aspect”, ”caractéristique”, ”simple”, etc. Veillez à ne pas mentionner de couleurs ni de formes. Cela sera fait à l’étape suivante. Il ne s’agit pas non plus de trouver des simples synonymes mais d’élargir véritablement le thème central en tendant vers des concepts voisins.

Sur le document ci-dessus, vous repèrerez l’usage qui a été fait des 3 mots clés attendus et des 3 mots clés à éviter (6 mots en bleu). Les informations collectées servent d’un côté de concepts attractifs et de l’autre de concepts répulsifs.

Déterminer un ou plusieurs axes de création

Des axes de création se dégagent très simplement de l’arbre thématique en reliant entre eux trois termes choisis dans les branches issues de chacun des 3 mots clés positifs. Dans l’arbre présenté ci-dessus se trouvent par exemple les axes suivants :

  • Technologie – Ouverture diaphragme – Lumière (d’étoile)
  • Réseau (informatique) – Polaroïd – Planète avec anneaux

La grille de détermination de l’axe de stylisation (facultatif)

Ce dernier outil est un autre moyen de préparer la réalisation de la planche de style (livrable de la phase d’idéation). Il s’agit de remplir un tableau de synthèse des éléments collectés puis de choisir parmi les options possibles celles qui forment un axe de stylisation cohérent.

➜ Je vous invite à télécharger le gabarit de grille de détermination de l’axe de stylisation si vous souhaitez l’utiliser.

Gabarit de grille de détermination d'un axe de conception

➜ Pour compléter la partie des visuels (ou symboles) de la grille de détermination, il est pratique d’utiliser des pictogrammes ou des icônes. Des sites permettent de s’en procurer librement, sur de très nombreuses thématiques.

Les cadres sont des formes enveloppantes utilisées pour encapsuler l’image, le texte ou les deux, dans certains logos ou variantes d’un logo.

Les visuels sont les figures ou les symboles utilisés pour composer la partie iconographique d’un logo (quand le logo fait appel à une image).

La planche de style

Tout le travail de documentation est synthétisé sur la planche de style. Il s’agit d’un livrable clé dans la démarche proposée ici. La planche de style est la traduction du brief en langage visuel. Elle va plus loin que la planche de tendances en sélectionnant des options particulières parmi toutes celles que la planche de tendances laisse entrevoir.

Il est envisageable de faire valider la planche de style par le client (ou le DA…), “officialisant” ainsi la direction graphique qui sera prise lors de la phase de conception proprement dite.

Je vous propose de télécharger un gabarit de planche de style puis de le personnaliser en fonction de votre propre identité visuelle (en tant que graphiste). Faites attention toutefois que l’identité graphique de votre studio ne vienne pas parasiter l’identité qui est présentée sur la planche (soyez discrets et assez neutres).

➜ Pour vous permettre de créer rapidement des nuanciers de couleurs et des nuanciers de gris régulièrement étagés (nuanciers fonctionnels), utilisez une des palettes de couleurs étagées utilisées au niveau 1 de la formation (cours sur les couleurs en design graphique).

Si vous envisagez d’utiliser un nuancier de 3 couleurs régulièrement étagées, pensez d’abord en terme de webdesign et utilisez la palette des couleurs moyennes normalisées.

palette de couleurs moyennes

Voir de cours annexe intitulé Le design de logo pour plus de précisions.

Concernant les polices de caractères, spécifiez des grandes familles de caractères (expressives, sérieuses, neutres, etc.) . Vous pouvez mentionner une police de caractères spécifique à titre d’exemple (entre parenthèses) mais conservez une marge de manœuvre dans votre esprit. Vous pourrez affiner votre choix typo à l’étape suivante.

Concernant les textures et les motifs, il s’agit souvent de “patterns” répétitifs, vectoriels ou matriciels. Ces “patterns” permettent d’enrichir l’identité visuelle, d’enrichir les planches de présentation au client et dans certains cas (si, si…) de caractériser le logo et la marque à laquelle le logo se réfère.

Vous trouverez une très large collection de textures, matricielles ou vectorielles, sur le site cssauthor.com… et il est toujours possible de les créer « from scratch » 😉

Exemples de logos utilisant des trames de point (source : logolounge.com)

Synthèse des étapes menant à la planche de style

Voici une synthèse des étapes précédentes. Vous remarquerez que pour établir la planche de style à faire valider par le client, avant de passer à l’étape de la création proprement dite, 3 planches de styles intermédiaires ont été mises au point pour élargir le potentiel des choix graphiques fixés sur la planche de style finale.

synthèse des premières étapes de la création d'un logotype

Comme toujours en design graphique, on alterne des phases d’élargissement des choix avec des phases de choix définitifs. Cela offre au concepteur l’opportunité de justifier chaque option prise en cours de processus, face à des alternatives laissés de côté pour telle ou telle raison (ces raisons doivent pouvoir être expliquées).

Choisir le gabarit de la planche de style

Le choix du gabarit de la planche de style n’est pas anodin. C’est souvent le premier livrable proposé au client. Il est d’une certaine manière un reflet de l’image de votre propre entreprise de conception graphique.

Le gabarit proposé plus haut est tout à fait adapté à l’étape de mise au point des 3 planches de style intermédiaires réalisées à partir des mots clés de l’axe de conception. S’il vous convient, vous pouvez le personnaliser et l’utiliser pour vos projets professionnels. Prenez toutefois connaissance des tendances en matière de brand board (planche de marque).

Modèles de planches de marques disponibles sur Canva

En effet, il peut être intéressant de ne pas reprendre toute la mise en page en passant de la planche de style à la planche de marque. Une planche de marque est une planche de style intégrant la présentation du logo et souvent un extrait de moodboard. Consultez la fin de ce cours pour en voir des exemples.

2- La création

Après avoir fait valider votre planche de style par votre DA préféré, soumettez-la au client. Après cela, plus question de changer de nuancier, de familles typos, de formes de cadres et de visuels (figures, symboles, motifs et textures) !

L’axe de conception doit être très clair dans votre esprit. Il est la base sur laquelle repose désormais vos choix graphiques. Examinez les identités visuelles réalisées par l’agence Graphéine. Vous trouverez souvent, en début de présentation un schéma très simple permettant de comprendre le concept utilisé (l’axe ce conception ou de création).

Axe de conception du logo Love Radius par l’agence Graphéine

Voici quelles vont être vos réalisations pendant la phase de création. Le tableau ci-dessous vous permettra de visualiser votre progression (en retournant chaque case d’un simple clic).

Tableau interactif consultable en ligne

Pour mener à bien vos travaux, plusieurs outils sont mis à votre disposition. Vous les trouverez tous sur le support principal du cours, à la rubrique “Création”.

rubrique du cours sur le design de logos consacrée aux outils utilisés en phase de création

Les esquisses manuscrites

Pas de design graphique sans un minimum de croquis ou d’esquisses. Que vous utilisiez, un crayon, un stylo à bille ou un stylet numérique, prenez le temps de noter vos idées sous forme de dessins manuscrits. Les designers pensent avec leur main.

Croquis préalables à la mise au point du logo de New Look Refinishing, par Del Mauricio (source : behance.net)

Vous noterez que les designers graphiques soucieux de la qualité de leur portfolio soignent la disposition de leurs croquis préparatoires. D’autres graphistes travaillent de façon plus désordonnée (mais non moins efficace)… et publient le contenu de leurs carnets sans complexe.

Croquis préalables à la mise au point du logo de Bloovi, par Claire Coullon (source : coullon.com)

Le maquettage vectoriel

Vous serez tentés de squeezer l’étape précédente pour passer directement à la création vectorielle. Après avoir lancé votre logiciel de dessin vectoriel préféré et commencé à combiner quelques typos et visuels, vous aurez du mal à résister à l’envie de finaliser tout de suite les premières idées cohérentes. Si vous souhaitez revenir en arrière vous vous apercevrez très vite que vous n’avez pas sauvegardé vos premières versions.

➜ Relisez ce premier paragraphe après 2 heures de travail sur écran… je suis sûr que vous vous retrouverez dans au moins deux de ces affirmations. Tous les débutants passent par là… et si vous voulez gagner du temps (et de l’argent, plus tard…), travaillez méthodiquement.

Maquettage vectoriel du logo Atlassian (source : atlasian.com)
  • Ayant fait des choix préalables, ne partez pas dans d’autres directions. Gardez le cap de votre axe de conception et de votre planche de style.
  • Ne vous contentez pas de deux ou trois esquisses ou maquettes, utilisez les outils mis à votre disposition pour explorer des solutions toujours plus pertinentes
  • N’effacez jamais vos croquis manuscrits ou vos maquettes numériques. Sauvegardez, dupliquez, partez d’une version précédente dupliquée et changer un ou deux points à le fois, puis dupliquez à nouveau et ainsi de suite (sans oublier de sauvegarder).
Planche de recherche vectorielle pour la mise au point du logo de Yul Traiteur
Recherches vectorielles pour la mise au point du logo Yul Traiteur, par Fabien Vielcazal (source : backsidepixels.com)

Recherches typographiques

Pour vous aidez dans le choix des polices de caractères, vous pouvez utiliser les services des plateformes de distribution de polices de caractères. Celles-ci proposent généralement de saisit le texte de votre choix pour le visualiser dans telle ou telle police sélectionnée.

Le site fontspace.com propose l’affichage du texte de votre marque dans une sélection de caractères classés “caractères de logos”. Il est possible de paramétrer la couleur du texte et celle du fond, de visualiser le texte dans plusieurs styles typographiques quand ils sont disponibles, de sélectionner des polices libres de droits pour un usage commercial, etc.

Si vous souhaitez tester votre texte avec un visuel, le site fontflipper.com propose un outil permettant de tester la juxtaposition de votre marque affiché dans l’une des polices disponibles sur Google font par dessus le visuel de votre logo. Prévoyez la place disponible à côté, sur ou dessous votre visuel et téléchargez l’image sur fond blanc !

Ces solutions en ligne sont ne permettent pas d’effectuer toutes les manipulations envisageables mais elles peuvent, dans certains cas, permettre de découvrir des options typographiques qu’il s’agira d’affiner dans la suite du processus.

Les tests et l’affinage

L’étape des tests peut commencer… À vrai dire, si vous avez suivi jusque là les conseils de votre formateur, il y a toutes les chances que vos propositions passent brillamment les tests de lecture en conditions extrêmes.

Pour plus de détails sur le sujet, consultez le support principal du cours et pour faire vite, rendez-vous sur logolab.app

Les propositions au client

La formule des 3 propositions SOC (1 sûre, 1 originale, 1 créative) est tirée du livre de George SINCLAIR Design graphique et stratégie de marque. Francis COURT, de son côté propose généralement à ses clients 4 propositions, qu’il montre dans son portfolio, à la rubrique “Réalisations > charte graphique”. David GARDNER, quant à lui, envisage sans complexe la dizaine de propositions, même si rien n’est dit à ce sujet sur le site gardnerdesign.com. Il explique sa démarche dans son livre La création de logo.

La présentation des propositions au client peut prendre de nombreuses formes, de la simple diapositive à l’infographie détaillant toute la démarche d’idéation et de création. Je vous propose, dans le cadre de la formation, d’utiliser la base du gabarit de la planche de style pour montrer l’essentiel d’une proposition en un seul écran.

C’est une formule minimaliste qui anticipe la réalisation de la planche de marque (brandboard), lors de la phase de réalisation.

➜ En explorant la documentation mise à votre disposition sur https://y-goguely.netboard.me/designlogos/, vous découvrirez d’autres types de présentation. Je vous en propose quelques unes, sous forme d’image verticale à faire défiler, disponibles dans une archive à télécharger.

➜ Vous trouverez sur le site 99design.fr des conseils sur la manière de présenter votre design au client de manière plus aboutie.

Il existe aussi des planches sur lesquelles il est possible de décliner l’usage d’un logo sur différents supports. Il convient de les utiliser avec discernement car, le plus souvent, les formats de papeterie proposés ne sont pas ceux utilisés en Europe. Vous en trouverez toutefois un grand nombre sur freepik.com

3- La réalisation

Ayant examiné vos propositions, votre client en a choisi une. Super ! … mais il peut vous avoir demandé de mixer 2 propositions. Quoi qu’il en soit, le moment est venu de finaliser le logo en tenant compte des attentes formulées.

Dans son livre intitulé Design graphique et stratégie de marque George Sinclair nous montre un exemple de combinaison de 2 propositions, à la demande du client.

Une fois cette combinaison effectuée, le designer aurait pu se satisfaire du résultat. Il a cependant poussé plus loin ses recherches pour aboutir à la solution définitive présentée ci-dessous.

La combinaison texte-image est différente. La seconde version se lit plus facilement, même si la référence à la planche ronde est moins visible.

Un logo, dans sa forme “brute”, peut d’emblée avoir été validé sous différentes formes. Il sera alors plus facile de mettre au point les variantes nécessaires pour répondre aux différentes utilisations du logo.

La finalisation des variantes

➜ Une fois le logo mis au point sous une forme standard, il va être nécessaire de finaliser ses principales variantes. Cela se réalise en tenant compte des données du cahier des charges et des besoins du client.

Les premières variantes découlent de l’utilisation du logo sur des écrans de différentes tailles. Il s’agit de supprimer des détails sans pour autant altérer la reconnaissance de la marque. Vous en avez plusieurs exemples ci-dessous, pour 4 marques bien connues.

Les secondes variantes concernent l’usage du logo en une seule couleur ou en niveaux de gris. Des recherches doivent parfois être de nouveau menées pour trouver des solutions adaptée à un usage du logo dans un cadre ou sans cadre. Le logo de Slack se présente sous des formes différentes en couleurs ou en noir et blanc.

La planche suivante montre les variantes en noir et blanc et en couleurs du logo des musées de Cambridge. Deux types de formats sont présentées, permettant une utilisation optimale du logo en fonction des proportions de l’espace allouée à la marque. Une série de variantes s’inscrit dans un rectangle et l’autre série s’inscrit dans un carré.

Les variantes suivantes découlent de l’existence éventuelle de filiales de la marque. Une unité s’impose pour les logos de l’ensemble des secteurs concernés. Voyez comment le problème a été résolu pour bTV Television.

La brand board ou planche de marque

Une brand board ou planche de marque est le livrable minimum à fournir au client (ou au DA…) en fin de projet.

La planche de marque est, sous sa forme la plus rapidement mise en œuvre, une proposition au client finalisée (proposition qui est elle-même un aménagement de la planche de style).

Cette planche doit permettre aux utilisateurs du logo de disposer des informations minimales pour développer l’identité visuelle de la marque. C’est une charte graphique minimaliste. Bien d’autres choses restent à faire pour construire une identité visuelle complète mais l’essentiel est là.

Il existe de nombreux gabarits de brand boards disponibles sur le Web. Ceux qui vous sont présentés ci dessous proviennent de AM Studio, sur Creative Market. Ils sont payants !

On trouve aussi des gabarits gratuits, sur Canva par exemple. Vous trouverez également sur hellonobo.com la liste des éléments à insérer dans une brand board, ainsi q »un modèle de présentation (voir ci-dessous)

Dans le cadre de la formation Com-Créa, le niveau 2 prend fin à ce stade de la production. Dans un cadre professionnel, en agence de communication ou en studio graphique, les choses peuvent aller beaucoup plus loin. Je vous donne quelques indications dans la suite du cours.

Le développement de l’identité visuelle

Si vous vous êtes convenus avec le client pour développer une identité visuelle plus complète, bien des choses restent à réaliser. Les premières productions porteront sur la mise au point de la papeterie d’entreprise.

Il s’agira ensuite d’anticiper les formes que prendront couleurs, typographies et variantes du logo sur les divers supports utilisés dans la communication interne et externe de l’entreprise. De la publicité sur objets au site Web “responsive”, en passant par le marquage des véhicules et des tenues de travail, la présentation des “Powerpoints”, etc.

➜ Tout cela devra être charté, normalisé… et présenté avec soin sur un guide ou manuel de marque, une charte graphique de l’identité visuelle de la marque.

Vous pouvez prendre connaissance de plusieurs “brand guidelines” ou chartes graphiques en ligne sur plusieurs sites spécialisés :

Certaines chartes graphiques sont très succintes. Il est facile de les mettre en œuvre à partir d’une simple brand board. Par contre, produire des chartes graphiques complètes représente un énorme travail. Assurez-vous que ce travail fait bien partie du contrat signé avec votre client avant de vous lancer dans un tel chantier !

➜ Pour faciliter cette mise en œuvre et le partage de la charte graphique avec l’ensemble de ses utilisateurs potentiels, il existe des plateformes de création et de publication en ligne de “brand guidelines”. brandpad.io en est un exemple intéressant (cliquez sur l’image ci-dessous pour consulter le charte graphique en ligne de Pancake Skateboards).

Plus simple, la plateforme canva.com, propose aussi des gabarits de “brand guideline” à personnaliser en fonction des besoins identifiés.

Catégories
CC1-cours Com-Créa

Les fondamentaux de la communication visuelle

Ce rappel des fondamentaux de la communication visuelle marque la fin du niveau 1 de la formation com-créa. Vous allez mettre en pratique vos nouveaux acquis lors d’une première mise en situation professionnelle (le fameux TP1).

Nous allons faire le point sur les enseignements les plus importants à retenir et à appliquer pour la réalisation de tout projet de design graphique. Il s’agira principalement des règles apprises pour finaliser les aspects suivant d’un projet de comvi :

  • la structuration des contenus
  • La couleur et les nuanciers
  • La typographie et les accords typographiques
  • La composition et les styles graphiques

Affirmations de designers

Je vous propose, pour commencer à réviser, de compléter une courte bande dessinée mettant en scène deux designers graphiques. Ceux-ci énoncent, à tour de rôle, six maximes sur le design graphique.

➜ À vous de formuler les conséquences techniques de ces maximes dans la pratique de la communication visuelle.

Six affirmations de designers sous forme de bande dessinée.

➜ Téléchargez le dossier de cette bande dessinée publiée sous forme de page Web et complétez les dialogues en utilisant un éditeur de code (Brackets ou Notepad++ en local ou encore Repl.it en ligne).

Si vous ne pouvez pas installer sur votre poste l’éditeur de code Brackets et que ne pouvez pas utiliser Notepad++, je vous montrerai comment utiliser Repl.it.

➜ Après avoir complété la page, vous me transmettrez simplement le fichier « index.html » (en pièce jointe, via Slack, sans les fichiers-dossiers dépendants, si nous sommes en distanciel…)
➜ Pensez à renommer le fichier index et à ajouter vos initiales. Je vous propose cette nomenclature : index-XX.html (XX étant vos initiales).

Si vous avez le temps, vous pouvez personnaliser les personnages utilisés dans la bande dessinée. Si vous souhaitez qu’un seul personnage prenne la parole, pensez à modifier légèrement l’expression d’une case à l’autre, en réalisant plusieurs versions du même personnage.

Pour cela dupliquez et renommez une des images fournies. Ouvrez-la dans Illustrator, faites vos modifications et enregistrez l’image au format SVG. Modifiez les appels des images dans le fichier HTML.

La page Web originale est en ligne à cette adresse : http://graphizm.fr/bd-pedagos/six-affirmations/.

Structuration des contenus

Concernant la structuration des contenus avant toute composition, vous retiendrez la formule “Découper à chaud c’est structurer” ou DHO=S. Les lettres D, H et O sont des initiales de 3 mots désignant 3 opérations fondamentales (définissant la structuration en design graphique).


  • Découpage du texte en blocs d’informations cohérents
  • Hiérarchisation des informations selon leur importance
  • Ordonnancement des infos dans des blocs d’information (… et des blocs dans la page, puis des pages dans le livret, etc.)

La structuration précède toutes les opérations qui concernent le look ou l’apparence des contenus. Quand la structuration des infos est négligée ou volontairement zappée, les informations clés sont difficiles à localiser et le message essentiel est noyé dans l’ensemble des autres messages.

Source : litoole.wordpress.com

Certains styles graphiques se caractérisent par une hiérarchisation minimale. Il s’agit donc de faire un choix clair dans ce domaine et d’éviter une hiérarchisation indécise.

➜ Créez un tableau Pinterest consacré à des publications sur lesquelles le texte est fortement hiérarchisé. Créez ensuite un second tableau regroupant des publications sur lesquelles le texte est très peu hiérarchisé.

Couleurs et nuanciers

Dans le domaine de l’utilisation des couleurs, Je n’ai pas de formule mnémotechnique à vous proposer.


Quatre points importants sont à retenir.

  • Contraste basé sur la luminosité (ou valeur de gris)
  • Étagement régulier des valeurs des couleurs d’un nuancier
  • Répartition inégales des surfaces colorées (dominante, médiante, tonique)
  • Symbolique prise en compte dans le contexte culturel d’utilisation du produit de communication

En design graphique comme en peinture, dans la pratique, le nuancier utilisé dans une composition est décomposé en de nombreuses nuances, en particulier dans les images. Si vous deviez déterminer le nuancier utilisé dans l’affiche ci-dessous, vous seriez contraints de trancher concernant le nombre de jaunes ou de gris utilisés. Un choix similaire s’impose pour déterminer le nuancier de l’affiche Gedimat présentée plus bas.

On décide souvent de ne pas prendre en compte les nuances des couleurs présentes dans les images. Dans ce cas, pour l’affiche ci-dessous, le nuancier se limite à 3 couleurs, le gris très clair (blanc), le jaune et le noir.

Le gris très clair visible sur l’image de l’affiche Kiloutou est en vérité du blanc. Pour s’en assurer, il suffit de prendre connaissance de la charte graphique de Kiloutou, revue en 2016 par l’agence AKDV. Lisez la critique de cette charte sur le blog de Graphéine (lien ci-dessus), vous mesurerez l’enjeu d’un choix typographique pour le design d’un logo. Nous approfondirons ces questions au niveau 2 de la formation Com-Créa.

Source : grenade-sparks.com

Note sur le rapport quantitatif des couleurs

Un peu plus haut, il est question de couleur dominante, de couleur médiante et de couleur tonique. Le vocabulaire est ici le même que dans la musique… ou dans la peinture (de chevalet) ! Pour faire simple nous parlerons de rapport quantitatif concernant les couleurs. Il s’agit de répartir les couleurs du nuancier sur des surfaces inégales : une (très) grande surface, une ou plusieurs surfaces moyennes et une (toute) petite surface.

La couleur couvrant la plus grande surface est nommée couleur dominante. Il s’agit souvent de la couleur du fond. La couleur couvrant la plus petite surface est nommée couleur tonique. Il s’agit souvent d’une couleur qui se détache visuellement dans le contexte chromatique de la composition.

Les couleurs médiantes sont celles qui se répartissent sur les surfaces intermédiaires. Avec un nuancier de 2 couleurs, il peut ne pas y avoir de tonique ou ne pas y avoir de médiante (c’est une question de surface de répartition). Avec 3 ou 4 couleurs, il est plus facile de faire jouer le rôle de tonique, d’accent ou de focus à l’une des couleurs.

Sur l’affiche Kiloutou présentée plus haut, quelles sont la couleur dominante et la couleur tonique ?

Note sur la fonction des couleurs

Pour décrire les couleurs en design graphique, on focalise parfois le propos sur la fonction de chaque couleur dans la composition. Quand on dit que la couleur dominante est généralement la couleur de fond, l’expression “couleur de fond” se rapporte à la fonction de la couleur (et non à sa quantité).

Ainsi, on parle de couleur de focus ou de couleur d’accentuation pour désigner une couleur servant à mettre en valeur un élément de la composition, la partie d’un texte ou la partie d’une image.

On peut aussi parler de “couleur de texte” ou de “couleur de titrage”, pour désigner les couleurs utilisées respectivement pour le texte courant et pour les titres.

Source : designe.fr

Sur l’affiche Gedimat présentée ci-dessus, vous remarquerez que le rouge est la couleur dominanteLa tonique est le bleu vif, sur la gauche de la coque du bateau.

➜ Toujours sur l’affiche Gedimat, présentée ci-dessus, quelle est la couleur de texte ?

D’un point de vue fonctionnel, vous noterez que le rouge est réutilisé comme couleur de focus dans la partie inférieure de l’affiche (pour mettre en valeur les dates).

➜ Combien de couleurs sont utilisées dans l’affiche Gedimat ? Quel est le nuancier utilisé pour composer cette affiche ?

Typographie et lettrage

En matière de choix typographiques, rappelez-vous que nous avons classé les polices de caractères dans 4 grandes catégories (acronyme ANSE…) :

  • les sérieuses (caractères à empattements triangulaires ou polices “serif” comme le Times ou le Merriweather)
  • les neutres (caractères sans empattement ou police “sans serif” comme l’Arial ou le Roboto)
  • les amicales (caractères cursifs ou manuscrits comme le Comic Sans ou le Pacifico)
  • les expressives (caractères très contrastés à la forte présence comme le Bodoni Poster ou l’Abril Fatface et caractères à usage limité du fait de leurs particularités, comme le Blippo Black ou le Monoton)

Chacune de ces 4 catégories peut être divisée selon les mêmes termes pour créer des sous-catégories (expressives-amicales, expressives neutres, expressives-sérieuses, expressives-expressives, etc.)


Vous vous souviendrez de quatre principes fondamentaux.

  • Utilisez les typos expressives et amicales pour le titrage seulement (jamais pour le texte courant)
  • Utilisez, pour le texte courant, les typos neutres ou sérieuses, dans la mesure impérative où elles sont disponibles en au moins 4 styles (Regular ou Normal, Bold ou Gras, Italic ou Italique, Bold Italic ou Gras Italique)
  • Utilisez un système de ratio proportionnel pour étager la taille de vos caractères en fonction du niveau hiérarchique du texte
  • Prenez en compte la symbolique culturelle des typos que vous utilisez dans vos projets

Source : behance.net

Compo et styles graphiques

La composition graphique fait appel à de nombreuses compétences. Elle est mise en action après avoir choisi les couleurs (le nuancier), l’accord typographique (la combinaison de polices de caractères) et éventuellement les formes structurantes.


Vous essaierez de vous rappeler de la nécessité de mettre en œuvre les quatre opérations clés listées ci-dessous.

  • Aligner les informations qui doivent être lues ensemble
  • Espacer les blocs d’informations pour bien les individualiser
  • Équilibrer les masses graphiques de telle sorte que la composition ne bascule ni à droite ni à gauche
  • Rythmer la disposition des blocs et des formes dans la page

Au cours du niveau 1 de la formation “Com-créa” et “PAO-Tech”, vous avez pris connaissance de plusieurs styles graphiques et de plusieurs types de composition. Avez-vous pris le temps d’en sélectionner et d’en analyser quelques uns en détails pour être capables de les mettre en œuvre de manière cohérente dans des projets de communication ?

Charlotte, sur le blog Studio Pop Com, présente très simplement quelques styles graphiques.

Concernant le style graphique vintage, il est nécessaire de faire des distinctions entre les décennies du XXe siècle. Consultez l’article Graphic design styles (… à faire traduire en français par Google) pour mieux vous y retrouver.

Source : onlinedesignteacher

Les types de compositions ne doivent pas être confondus avec les styles graphique. le type de composition est une des caractéristiques d’un style graphique.

Prenons l’exemple du style du style suisse et international. Choix des typos : linéales. Choix des couleurs : très peu de couleurs et souvent du noir ou du blanc dans le nuancier. Choix des formes : géométriques et/ou épurées. Choix des compositions : utilisation d’une grille, orthogonalité et/ou inclinaison du texte, composition asymétrique.

Source : onlinedesignteacher

Complétez votre compte Pinterest en consacrant un tableau aux style ou type de composition que vous souhaitez utiliser ultérieurement.

Les intitulés de vos tableaux et sous-tableaux dans Pinterest doivent être précis et véritablement en rapport avec leur contenu. Constituez des tableaux ou des sous-tableaux présentant au moins une dizaine d’épingles pertinentes. Plus votre classement sera logique, plus vous pourrez exploiter facilement les ressources collectées.


Se souvenir des opérations à effectuer en design graphique

Une carte, disponible sur Mindmeister, vous propose un moyen de vous souvenir des principes essentiels à mettre en œuvre lors d’une composition graphique.

➜ Repérez dans les illustrations publiées dans ce cours la mise en œuvre de compositions CHARTÉES. Annotez ces images de manière à mettre en évidence les opérations mentionnées et partagez-les via Slack.

Vous retrouverez d’autres résumés des opérations fondamentales à mettre en œuvre pour le TP1 sur le site du Studio BenZiv. Présentés sous forme de diaporamas ils vous parlent de compositions MALINES et de design ÉCLAIRÉ.

Je termine ce rappel des notions essentielles du niveau 1 de la formation com-créa en vous rappelant que le premier principe de design est le principe de simplicité.

Un petit ouvrage disponible en ligne semble résumer tout cela sur pro-actif.ca. Enfin… sur la couleur, c’est un peu léger 😉

Il y a un article de Henri Lotin qui aborde ces points assez frontalement, sur lotincorp.biz… et au passage, jetez un œil sur un autre de ses articles à propos du principe de simplicité, vous apprendrez des trucs intéressants !

J’aime bien le “blogue” de Mlle Rouge… elle nous y parle clairement de fondamentaux (de son point de vue) ! Allez voir ce qu’elle dit dans ses autres articles, c’est plutôt sensé 😀

Regroupez ces liens pour nourrir votre veille informationnelle. Je vous recommande l’utilisation de Deskyo pour regrouper vos favoris à titre personnel. Partagez vos trouvailles en créant des sites Netboard.

Check list des opérations à effectuer

J’ai composé une liste de toutes les opérations à effectuer lors de la mise en œuvre d’un produit de communication visuelle. Chaque case mentionne une opération.

En cochant les 25 cases, vous êtes sûr d’avoir pris en compte tous les aspects essentiels du design graphique. La dernière case oriente le travail vers une publication imprimée mais il suffit de remplacer « imprimeur » par « hébergeur » pour modifier l’orientation de la publication 😉

Le dossier que vous êtes invités à télécharger est un dossier de page Web. Celui-ci contient deux dossiers, « css » et « js », avec les fichiers qui vont bien à l’intérieur. Vous trouverez aussi un fichier « index.html »…

➜ Un double clic sur le fichier index et vous voilà parés pour faire le point à la fin des prochains TP 😉

Approfondir le sujet

Voici quelques adresses pour trouver en ligne plus de documentation sur le sujet :

Catégories
CC1-exos Com-Créa

Identifier l’écriture – 01

Catégories
CC1-exos Com-Créa

Identifier l’écriture – 02

Catégories
CC1-exos Com-Créa

Le cycle de publication du livre