Catégorie : Com-Créa

Ressources de la formation “Communication Créative”

Catégories
CC3-exos Com-Créa

Créer des personnages typographiques

L’objectif de cette activité est la construction modulaire de personnages à partir de signes typographiques appartenant à une même police de caractères. Ces personnages formeront une série à incorporer dans divers produits de communication :

  • affiches et flyers promotionnels
  • encarts pour le Web et les réseaux sociaux
  • couvertures et pages intérieures de livres pour la jeunesse
  • jeux de cartes traditionnels
  • packaging de jeu de cartes
  • présentoirs sur lieu de vente
  • objets publicitaires divers
  • etc.
Image publiée sur https://cemreyesil.wordpress.com

Comment procéder

Il s’agit donc de procéder de la manière suivante :

  • choisir une police de caractères (entièrement libre de droits) dans une famille typographique donnée ;
  • inventorier tous les signes typographiques disponibles dans la police choisie, dans une fonte donnée (grasse de préférence) ;
  • assembler les signes typographiques de son choix pour réaliser une collection de personnages.
Personnages typographiques réalisés
pour communiquer autour d’un championnat de jeu d’échecs

Règles du jeu de construction

  • Utiliser le logiciel Adobe Illustrator. Enregistrer le fichier au format natif d’Illustrator (.ai).
  • Vectoriser tous les glyphes disponibles avant de construire les personnages.
  • Construire des personnages simples. Ne pas détailler les formes des personnages en cherchant à produire des dessins réalistes.
  • Ne pas déformer les signes typographiques choisis. Jouer seulement sur l’échelle, l’orientation, la transformation horizontale ou vertical.
  • Ne pas utiliser la palette pathfinder dans la phase de recherches vectorielles.
  • La suppression de points ou d’accents est autorisée, ainsi que la suppression éventuelles des contreformes.
  • D’éventuelles silhouettes d’accessoires peuvent être utilisées (avec modération).
Personnages typographiques avec accessoires

Séries de personnages réalisables

Personnages de jeu d’échecs

Les exemples ci-dessus présentent des personnages de jeu d’échecs (Roi, Dame, Cavalier, Tour, Fou (ou Évêque), Pion). Ces personnages ont été utilisés dans un projet de communication pour l’annonce d’un championnat.

Personnages de jeux de cartes

Il est possible de créer la série suivante (les 3 premiers peuvent servir à la réalisation d’un jeu de cartes) :

  • Roi
  • Reine
  • Valet
  • Prince
  • Princesse
  • Nourrice

Les attributs/caractéristiques iconographiques du roi, de la reine et du valet peuvent être trouvés en examinant les figures d’un jeu de carte.

Image : https://www.wikiwand.com/fr/Figure_(carte_%C3%A0_jouer)

Jeu des 7 familles

L’ensemble de ces personnages est utilisable pour créer un jeu des 7 familles. Ces familles peuvent être des grandes familles typographiques. Dans ce cas, 1 série de 6 personnages est créée pour chacune des 7 familles suivantes :

  • Sans serif ou Neutre
  • Serif ou Sérieuse
  • Display ou Expressive
  • Script ou Amicale
  • Monospaced ou Monospace
  • Bitmap ou Pixelisée

Personnages d’un conte

La même série de personnages est utilisable pour illustrer un conte pour enfants. Pour ce type de réalisation, il est suggéré d’utiliser des signes typographiques très agrandis, positionnés en arrière plan, pour suggérer des paysages.

Des élements de décor (bâtiments, mobilier, accessoires, etc.) peuvent être créés en complément pour rendre les illustrations du conte plus intelligible. Un tel projet éditorial nécessite une collaboration avec un ou une rédacteur-rédactrice spécialisée dans la littérature jeunesse.

Documentation en ligne

Voici quelques réalisations similaires, publiées en ligne, montrant aussi des portraits et des dessins d’animaux :

Conseils techniques

La fabrication d’un jeu de cartes nécessite une préparation spécifique.

Format et nombre de cartes par planche

Le format standard des grandes cartes à jouer est 80 x 120 mm. Ce format est choisi dans une optique d’utilisation pédagogique en centre de formation. Il s’agit donc, dans le cas d’un jeu des 7 familles, de créer 42 cartes (6 x 7) et Quelques cartes supplémentaires pour présenter la règle du jeu en plusieurs langues.

Dans le cadre d’une impression à l’imprimerie du Pôle Plurimédia, le format de papier imprimé sera 320 x 450 mm. La largeur (320 mm) permet de positionner 3 cartes par leur petit côté, avec 3 mm de fond perdu pour chaque carte. La longueur (450 mm) permet de positionner 3 cartes par leur grand côté, toujours avec 6 mm entre chaque pose (3 mm de fond perdu autour de chaque carte).

Imposition de 9 cartes 80 x1 20 mm
avec 3 mm de fonds perdus pour chaque carte

Un total de 45 cartes est donc envisageable en imprimant 5 planches de 9 cartes chacune. La règle du jeu pourra être imprimée en français et en anglais, la dernière carte étant réservé aux mentions techniques (auteur, polices ce caractères utilisées, etc.).

Attention : le schéma d’imposition correspond à ce que réalisera l’imprimeur. Le fichier PDF à lui fournir sera non imposé (cartes les unes sous les autres), avec les fonds perdus.

Fichier Illustrator à importer

Pour faciliter la mise en place des figures dans les cartes d’une même famille, il est recommandé de positionner les différentes figures de la même famille typographique sur un même plan de travail. Ce plan correspondra à 6 carrés de 80 x 80 mm, ses dimensions seront 480 x 80 mm.

Type de fichier Illustrator à préparer

En effet, en réservant en haut et en bas de chaque carte une zone de 20 mm pour mentionner le nom de la famille et le nom de la figure, chaque figure se positionne dans une zone de 80 mm de hauteur et 80 mm de largeur (la largeur de la carte).

Dans InDesign, l’image de 480 x 80 mm sera importée dans un bloc image de 80 x 80 mm. L’image sera recadrée horizontalement pour montrer le personnage correspondant à la carte mise en forme.

Voici une prévisualisation de 2 cartes de la famille Expressive :

Exemple de cartes réalisées avec la police expressive Chi-Town

La couleur d’accompagnement est à choisir de telle sorte qu’elle puisse être utilisée avec une luminosité de 50 % en arrière plan des textes et à 40% en arrière plan des figures (et éventuellement en premier plan de quelques éléments des figures).

Exemple de palette de couleurs

Les éléments d’arrière plan peuvent être intégrés dans l’image importée ou dans le fichier de mise en page.

Attention : anticiper la présence de fonds perdus sur chaque carte.

Fichier à préparer pour l’impression

Le fichier à remettre à l’imprimeur sera réalisé dans InDesign en prévision d’un export en PDF haute définition avec traits de repérage.

Les pages sont à prévoir les unes sous les autres. L’utilisation d’un gabarit pour chaque famille typographique est vivement recommandée.

Même en limitant à 2 couleurs la présentation du jeu de cartes, le fichier sera réalisé en mode CMJN. Un tracé de découpe sera prévu en ton direct pour l’arrondi des angles du jeu de cartes.

Le tracé de découpe de chaque carte sera placé sur un calque indépendant. Le tracé de découpe sera en ton direct, nommé impérativement “CutContour”, paramétré en surimpression.

>> Il y a bien 2 C majuscules dans le nom du ton direct 😉

Pour le paramétrage en surimpression, dans InDesign, sélectionner le contour de découpe dans le gabarit, aller dans le menu “Fenêtre > Sortie > Options d’objet” et cocher “Surimpression du contour”.

Créer le verso des cartes

Pour le verso des cartes il faut réaliser, dans InDesign, un fichier de 278 x 398 mm présentant un motif régulier sur un seul grand rectangle. Ce rectangle couvrira toute la zone d’imposition et débordera de 10 mm tout autour de cette zone.

Catégories
CC1-exos Com-Créa

Créer une affiche avec une fonte géométrique

Au cours de cette activité, vous allez effectuer une mise en page simple en suivant une méthode progressive, en commençant par la structuration des contenus puis par la structuration des blocs d’information. La structuration de l’affiche complète s’effectuera en dernier, en appui sur une grille de composition.

Prérequis et objectifs

Prérequis

  • Être capable d’utiliser Illustrator pour déplacer, positionner et redimensionner des objets graphiques simples
  • Être capable de préparer et sauvegarder un fichier de dessin vectoriel en local et sur des supports externes

Objectifs

  • Être capable de structurer un texte en vue de la réalisation d’une affiche simple présentant plusieurs blocs d’information
  • Être capable de composer des blocs d’information utilisables de manière modulaire pour composer une affiche simple en utilisant un style typographique imposé
  • Être capable de composer une affiche simple en utilisant des blocs d’information préalablement composés et validés

Outils et matériels

  • Feuilles quadrillées (carreaux de 5mm de côté) et stylo à bille (ou équivalent)
  • Logiciel de dessin vectoriel Illustrator (fichier en mode RVB)
  • Police de caractères italique cursive géométrique (voir la fiche d’activité intitulée Création d’une police de caractères)

Consignes et livrables

Consignes

Typographie

Vous respecterez l’une ou l’autre des contraintes typographiques suivantes : utiliser les polices de caractères mises au point lors de l’activité Créer une police de caractères ou utiliser une des polices librement téléchargeables proposées en exemple pour l’activité de création d’une police de caractère cursive géométrique.

Structuration

  • Découper, hiérarchiser et ordonnancer le texte suivant : Du 10 octobre au 10 novembre 2024, exposition Architectures typos, Galerie COA, Montréal.
  • Composer 3 blocs d’information distincts en utilisant la police de caractères conçue lors de la séance précédente, remise sous forme vectorisée sur une page Illustrator. Conserver la même grille de positionnement (carrés de 5mm de côté, page A4 orientée en mode portrait, grille magnétisée)
  • Composer l’affiche de présentation de l’expo “Architecture typos” en utilisant les blocs d’information composés préalablement.

Illustration

Aucune illustration n’accompagnera le texte de l’affiche. Seuls des jeux typographiques (motifs typographiques répétitifs, textures typographiques, filigranes, etc.) pourront agrémenter la composition.

Livrables

  • Remettre au formateur un fichier PDF de l’affiche, créé en effectuant un “Enregistrer sous” dans Illustrator, ainsi qu’une image JPEG de l’affiche, créée en effectuant un “Exporter pour les écrans”.

Critères de réussite

Critères élémentaires de réussite

  • Le texte est découpé en blocs cohérents.
  • Chaque bloc est composé de manière à faciliter la lecture des informations.
  • Les blocs sont assemblées dans l’affiche de manière à favoriser la lecture des informations importantes.

Critères avancés de réussite

  • Des marges équilibrées, minimales ou confortables, séparent les contenus des bords des blocs, des cadres ou de l’affiche.
  • Le potentiel graphique de la police de caractères géométrique est exploité de manière créative.
  • Les blocs d’informations et leurs contenus sont alignés de manière cohérente sur des axes directeurs.
  • Des zones de repos du regard ont été aménagées dans l’espace de composition.

Source d’inspiration

Composition de blocs d’informations

Catégories
Com-Créa

Créer un abécédaire

Il s’agit de créer un abécédaire pictographique, vectoriel, linéaire, monochrome et personnalisable 😉

Toutes les consignes sont détaillées dans le document PDF ci-dessous.

Public cible :

  • Élèves des écoles primaires et collèges

Produits imprimés dérivés :

  • Affiche/poster de grand format présentant toutes les lettres de l’alphabet et les pictogrammes associés à chaque lettre.
  • Livret/brochure présentant l’abécédaire complet. Le format, le type de reliure et la mise en page sont à déterminer.
Catégories
CC1-cours Com-Créa Non classé

La symbolique des couleurs

Ce cours résume les points essentiels d’une dimension incontournable de la couleur : ce que les couleurs disent à ceux qui les perçoivent. Un designer graphique anticipe cette signification culturelle pour styliser ses produits de communication de manière à s’adapter aux utilisateurs des produits.

Les connotations culturelles des couleurs

➜ Exercices
Répondez au sondage lancé par le site pourpasunrond.fr

Regardez la vidéo ci-dessous. Elle pose les bases de ce qui est ensuite développé dans le cours.

Couleurs, histoire et cultures

Chaque période de l’histoire européenne a eu ses couleurs attitrées. Des ouvrages spécialisés permettent de repérer ces couleurs. Un site en présente une synthèse :

Notre culture occidentale contemporaine a non seulement ses couleurs préférées mais elle a développé une symbolique globale des couleurs, souvent prise en compte en design graphique.

Attention, la symbolique des couleurs change selon les régions du monde. Dans l’article ci-dessous, Epson France fait le point sur la question.

Les usages des couleurs

Dans les limites de la culture à laquelle s’adresse tel ou tel produit de communication, des outils et certaines études permettent d’affiner la connaissance des codes chromatiques en vigueur dans tel ou tel secteur.

Couleurs et secteurs d’activité

Interface de picular.co

➜ Exercice
Faites des recherches de couleurs dans picular.co en utilisant exactement les expressions suivantes :

  • yaourt
  • yaourt bio
  • yaourt 0%
  • voiture
  • voiture de sport
  • parfum
  • parfum de luxe
  • lait entier
  • lait demi-écrémé
  • lampe de chevet
  • lampe de bureau
  • chaussure femme
  • chaussure homme
  • magazine de voyages
  • magazine de mode
  • etc.

Impact émotionnel des couleurs

Les couleurs ont un impact sur nos ressentis affectifs. Certaines couleurs apaisent quand d’autres au contraire exitent ou dynamisent.

Couleurs et marketing

Les couleurs font vendre. De nombreuses décisions d’achat repose sur la couleur du produit proposé, la couleur de son emballage ou celle de son étiquette.

Couleurs et identités visuelles

Dans une identité visuelle les couleurs choisies ont autant sinon plus plus d’impact que la typographie ou le visuel utilisé. On ne choisit pas les couleurs d’un logo et d’une charte graphique à la légère (et surtout pas en fonction de nos goûts) !

Catégories
CC1-cours Com-Créa Non classé

La construction de nuanciers fonctionnels

Dans la pratique, vous serez confrontés à la nécessité d’utiliser des nuanciers de couleurs privilégiant la bonne lisibilité des textes. Vous devrez veillez à ce que le ratio de contraste entre la couleur de ces textes et la couleur du fond soit suffisant. Ce cours vous donne les indications nécessaires pour construire des nuanciers garantissant la lisibilité des textes.

Les normes d’accessibilité

Les normes d’accessibilité mettent l’accent (entre autres exigences) sur la nécessité de distinguer la forme sur le fond, pour toutes les personnes, y compris celles qui ne peuvent pas distinguer toutes les couleurs.

Ces normes mettent donc l’accent sur le contraste de luminosité entre la forme et le fond sur lequel cette forme se détache. Le contraste de luminosité entre deux couleurs joue un rôle clé dans la lisibilité des textes affichés avec ces couleurs.

Ces normes s’avèrent contraignantes dans le design des sites Web. Elles sont cependant nécessaires pour nous amener à prendre en compte les différents publics auxquels sont destinés nos produits de communication !

La traduction française agréée des WCAG 2.1 indique : « Afin de répondre aux besoins de divers groupes et de différents contextes, trois niveaux de conformité ont été définis : A (le plus bas), AA et AAA (le plus élevé). »

L’Union européenne recommande le niveau double A (AA). C’est également le niveau qu’on attend pour les sites concernés par le RGAA (Règlement Général d’Amélioration de l’Accessibilité, équivalent européen du WCAG). Pour être conforme au RGAA, il est nécessaire de valider l’ensemble des critères A et AA

Les textes officiels

Résumé des consignes officielles au niveau européen

La norme AA – RGAA 4.1.2 impose, concernant le texte d’une page Web, le respect des consignes suivantes (j’ai simplifié la formulation du texte officiel, beaucoup plus détaillé) :

  • Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px (18pt) doit vérifier la condition suivante :  le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ;
  • Dans chaque page web, le texte et le texte en image en gras d’une taille restituée inférieure à 18,5px (14pt) doit vérifier la condition suivante : le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ;
  • Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée supérieure ou égale à 24px (18pt) doit vérifier la condition suivante : le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ;

Définition d’un nuancier ou palette fonctionnelle

Nous nommerons palettes ou nuanciers fonctionnel(le)s ou accessibles les palettes ou nuanciers tenant compte des normes d’accessibilité. Nous parlerons aussi de palettes ou nuanciers dont les valeurs sont régulièrement étagées.

Voici un schéma mettant en rapport des niveaux de luminosité et des ratios de contraste normalisés :

➜ Exercices

  • Choisissez des couleurs dans hsluv.org en fixant leur luminosité sur les pourcentages proposés dans le schéma ci-dessus et vérifiez avec un outil de contrôle de ratio de contraste si les ratios affichés sur le blanc et le noir sont justes (à peu de choses près et dans la mesure où ils sont conformes aux normes visées).

➜ Il se peut, pour certaines teintes, que vous soyez amenés à légèrement éclaircir ou assombrir la couleur choisie pour atteindre la norme annoncée. Comme il est précisé sur le schéma, les valeurs de luminosité sont approchantes. Nous sommes ici confrontés à ce que nous pourrions nommer les niveaux clés de luminosité.

  • Choisissez une couleur moyenne (49% de lumnosité) et trouvez une couleur proche du blanc présentant, avec la couleur moyenne, un ratio de 4,5 (norme AA). Utilisez pour cela un outil de contrôle du ratio de contraste (liste ci-dessous).

➜ Vous disposerez alors d’une teinte de blanc coloré (blanc cassé), utilisable à la place du blanc pure dans les nuanciers de 3 couleurs réversibles respectant la norme AA.

Interface de Colorable
  • Construisez une palette de 5 couleurs dont le noir et le blanc, intégrant une couleur claire et une couleur foncée. Conservez la palette mise au point en utilisant l’outil “Export” proposé sur coolors.co.

Sur coolors.co, les palettes sont sauvegardables sous forme d’URL (dans Deskyo, par exemple). L’URL de la palette ci-dessus est la suivante : https://coolors.co/ffffff-f5cd70-d0404f-1c2f36-000000.

Sur l’image ci-dessous figurent les ratios de contraste mesurés avec Colorable.

Annotations effectuées avec Skitch

➜ Quelles sont les couleurs qui ne doivent jamais être utilisées l’une sur l’autre pour présenter du texte ? Pensez-vous qu’il soit possible d’utiliser un blanc cassé à la place du blanc #fff, sans modifier les autres couleurs ?

Outils de contrôle du ratio de contraste des couleurs

Voici une liste d’outils permettant de contrôler le ratio de contraste entre deux couleurs.

➜ Exercices

  • Construisez un nuancier fonctionnel de 3 couleurs réversibles, respectant la norme AA Large, à partir d’une sélection aléatoire de 3 couleurs sourdes (avec Muted Colors sur CodePen).
  • Construisez (avec Color Review et Colorable), à partir d’une photo de votre choix, un nuancier fonctionnel de 3 couleurs réversibles respectant la norme AA Large.

Outils de construction de palettes fonctionnelles

Il existe des outils mis au point pour (sur le papier…) faciliter le travail des designers graphiques en matière de création de palettes fonctionnelles. Ils ne sont pas d’une prise en main aisée. Leonardo Color a été un temps relativement fonctionnel, de mon point de vue il ne l’est plus du tout.

  • https://leonardocolor.io/theme
    — Outil mis au point par Adobe et donc l’interface s’est terriblement compliqué au fil des années !
  • https://palettte.app
    — Outil à l’interface attrayant mais dont l’utilité pratique reste à démontrer pour les débutants.

Construire des nuanciers normalisés en se basant sur la luminosité

En recherchant prioritairement à construire des nuanciers fonctionnels constitués de couleurs réversibles, le schéma suivant permet de construire de tels nuanciers en se basant uniquement sur la luminosité des couleurs (toujours mesurée dans hsluv.org).

Les nuanciers constitués de couleurs réversibles permettent de produire des variantes d’une composition en changeant juste le rôle attribué aux couleurs. Par exemple, le changement de la couleur dominante modifie complètement la perception d’une composition. Si toutes les couleurs peuvent se lire les unes sur les autres, le changement de fonction des couleurs s’effectue sans perte de lisibilité.

➜ Exercice

  • Vérifiez la pertinence du schéma ci-dessus en créant, d’après les indications de pourcentage de luminosité indiqués, des nuanciers fonctionnels de 3 couleurs réversibles respectant au moins la norme AA Large (ratio de contraste supérieur à 3, entre la couleur de premier plan et la couleur d’arrière plan). Utilisez hsluv.org et l’outil de contrôle de ratio de votre choix. Sauvegardez vos nuanciers en utilisant coolors.co.

Palettes de couleurs moyennes

En disposant d’une couleur dont la luminosité se situe entre 40 et 60%, vous êtes certains que cette couleur présentent un contraste suffisant sur le blanc et le noir pour répondre à la norme AA Large (ratio de contraste supérieur à 3).

Pour répondre à la norme AA (ratio de contraste supérieur à 4,5), il convient d’être plus prudent. La luminosité de la couleur moyenne doit alors se situer autour de 50%. Cependant, si nous voulons vraiment viser la norme AA, à la fois sur le blanc et sur le noir (pour garantir la réversibilité des couleurs) cette luminosité varie selon les teintes. Il convient alors d’effectuer un contrôle de ration de contraste.

Voici des pages Web sur lesquelles vous pouvez trouver ces couleurs moyennes “idéales” (les ratios de contraste sur le blanc et le noir ont été vérifiés).

➜ Cette palette de 63 couleurs moyennes a été réalisée par mes soins. Vous constaterez une chose : bien que les ratios de contraste de chacune de ces couleurs sur le noir et le blanc soient très proches, les texte en blanc sur chaque couleur moyenne se lisent majoritairement mieux que les textes en noir sur ces couleurs. J’en ignore la raison, mais ce constat doit cependant être pris en compte pour améliorer le confort de lecture des sites Web que vous réaliserez.

Nuanciers fonctionnels prêts à l’emploi

À la fin de la page Web ci-dessus, plusieurs liens conduisent vers des chartes graphiques de grandes entreprises utilisant des palettes de couleurs fonctionnelles. Il est tout à fait possible de les utiliser pour des projets de communication en ligne. Les nuanciers de couleurs ne sont pas soumis aux droits liés à la propriété intellectuelle !

Si vous souhaitez les utiliser, prenez le temps d’examiner comment fonctionnent ces palettes de couleurs étagées.

Le fonctionnement de ces palettes normalisées repose souvent sur le principe de saut de couleurs. Le nuancier mis au point par Matthew Howel (section suivante) repose sur le même principe.

Les nuanciers fonctionnels de Matthew Howel

Matthew Howel a mis au point une série de palettes étagées monochromes de telle sorte que :

  • en intercalant 1 couleur, on obtient un ratio de contraste de 3 (norme AA Large) entre les 2 couleurs de part et d’autre de la couleur intercalée ;
  • en intercalant 2 couleurs, on obtient un ratio de contraste de 4,5 norme AA) entre les 2 couleurs de part et d’autre des 2 couleurs intercalées.
  • en intercalant 3 couleurs, on obtient un ratio de contraste de 7 (norme AAA) entre les 2 couleurs de part et d’autre des 3 couleurs intercalées.

24 palettes monochromes sont disponibles, plus la palette des gris. 25 teintes disponibles, en 6 valeurs chacune, font 150 jetons de couleurs (150 color tokens) à combiner. Il vous suffit de piocher parmi les 150 couleurs proposées pour construire vos nuanciers fonctionnels.

Vous remarquerez que Matthew Howel n’utilise dans ses palettes ni le noir ni le blanc. Avec les couleurs proposées, il n’est donc pas possible de créer un nuancier fonctionnel de plus de 2 couleurs réversibles respectant la norme AA.

Les nuanciers fonctionnels de Yves Goguely

Je vous propose maintenant une palette réalisée par mes soins. La page mérite un traitement stylistique plus sympathique, je vous l’accorde, mais en attendant mieux cette palette élargit le champ des nuanciers possible. Prenez en compte les indications mentionnées sur l’échelle des gris pour comprendre quels sont les ratios de contraste entre les couleurs de chaque rangée (il s’agit des ratios présentés sur le schéma montré en tout début de cours).

Outils nécessitant plus de travail de mise au point

Plusieurs outils proposent depuis de nombreuses années la création de palettes de couleurs. Certains d’entre eux autorisent la personnalisation des couleurs choisies. En sachant donc ce qu’il convient d’obtenir (tel nombre de couleur, réversibilité des couleurs ou non, telle norme d’accessibilité, telle symbolique de la couleur dominante), il est possible de partir d’un nuancier et d’en personnaliser chaque couleur pour rendre le nuancier fonctionnel. Cela dit, l’exercice peut s’avérer une belle prise de tête !

Outil de construction de nuanciers basé sur la théorie des couleurs

Adobe a fait évoluer un de ses outils phare de création de palettes de couleurs. Adapté à la création de palettes pour l’illustration, il s’avère moins pratique pour créer des nuanciers fonctionnels.

➜ Exercice

  • Essayez de construire un nuancier fonctionnel de 5 couleurs (dont le blanc et le noir), basé sur un accord analogue avec la roue chromatique d’Adobe Color.

Vous allez vite constater que même en utilisant le mode TSL (Teinte Saturation Luminosité) un résultat cohérent est laborieux à obtenir !

Outils de construction de nuanciers étagés allant d’une teinte à une autre

Quelques outils permettent de générer automatiquement un nombre déterminé de couleurs intermédiaires allant d’une couleur initiale à une autre. L’idée n’est pas mauvaise en soi mais la volonté de respecter une norme d’accessibilité nous amènera inévitablement à des ajustements.

➜ Exercice

En utilisant chacun des outils proposés ci-dessus, construisez un nuancier étagé de 3 couleurs réversibles, respectant la norme AA Large. Quel est l’outil le plus approprié pour construire un tel nuancier ?

Catégories
CC1-cours Com-Créa

La théorie des couleurs

Vous trouverez sur le Web et dans de nombreux livres (voire dans tous les livres traitant de design graphique…) des explications plus ou moins détaillées sur la théorie des couleurs. La formule est facile à comprendre mais son application pratique en webdesign nécessite un énorme travail de correction ! La théorie des couleurs ne permet pas de régler les problèmes de contraste et donc de lisibilité des textes. Elle ne résout pas non plus les problèmes de cohérence symbolique des couleurs d’un nuancier. Alors à quoi sert-elle ? Je vous le dis d’emblée : elle ne sert à rien… mais comme tout le monde en parle, je vais vous en parler aussi. Et je vais vous prouver son inutilité (… du moins en webdesign) !

La théorie des couleurs et de leur harmonie

J’ai sélectionné deux sites pour vous permettre d’en apprendre un peu plus sur la théorie des couleurs. Prenez le temps d’examiner de quoi il est question et ce qu’il nous est proposé de faire pour créer des nuanciers harmonieux.

Image extraite du site wix.com

La planche ci-dessus montre quels sont les types d’accords colorés réalisable en utilisant un cercle chromatique.

➜ Exercice

  • Téléchargez puis convertissez en niveaux de gris l’image présentée plus haut. Évaluez à l’œil nu le nombre de couleurs ayant approximativement la même valeur (même luminosité) dans les accords proposés (couleurs placée dans les cercles, aux sommets des figures géométriques). Que constatez-vous ?

Je vous rappelle qu’un des impératifs auquel doit répondre un webdesigner est la lisibilité des textes présentés à l’écran. Si des couleurs du nuancier qu’il choisit ont la même valeur (luminosité) — voire une luminosité voisine — il ne peut les utiliser pour présenter du texte. Il peut les utiliser pour les images du site… mais il y a toutes les chances qu’il ait besoin de les assombrir ou de les éclaircir pour qu’on distingue quelque chose dans ces images !

Un designer n’a pas besoin d’accord coloré (… une palette de couleurs harmonieuses), il a besoin de couleurs qui fonctionnent les unes avec les autres pour garantir la visibilité des contenus mis en page.

Les outils basés sur la théorie des couleurs

➜ Exercice

  • Utilisez la roue chromatique Adobe Color pour créer un nuancier (ou thème coloré, selon la terminologie d’Adobe). Passez votre écran en niveaux de gris ou faites une capture d’écran que vous convertirez ensuite le thème créé en niveaux de gris. Constatez-vous la même chose que lors de l’exercice précédent ?
  • Vous ferez les mêmes constats en utilisant la roue des couleurs de Canva. Vous les ferez d’autant plus rapidement que son fonctionnement est plus rudimentaire que celle d’Adobe. On dirait que tout est fait pour que les valeurs des couleurs soient les plus proches possibles ! Allez vers le centre de la roue : plus vous approchez du centre plus les couleurs se rapprochent de la valeur du gris neutre. Éclaircissez ou assombrissez les couleurs en utilisant le cercle externe : plus vous forcez dans un sens ou dans l’autre, plus les couleurs obtenues ont une valeur proche !

Mes remarques concernant la roue des couleurs de Canva concernent son utilisation non personnalisée. En effet, chaque couleur peut être éditée et personnalisée. Dans le cas d’une personnalisation des couleurs d’une palette, quels sont les objectifs visés par cette personnalisation ? Ces objectifs ont-ils un rapport avec la théorie des couleurs telle qu’elle est présentée le plus souvent ? Y aurait-il des critères d’harmonie que peu d’experts mentionnent et qui ne sont pas implémentés dans les outils de créations de nuanciers ?

Les palettes de couleurs issues des outils basés sur la théorie des couleurs ne sont pas utilisables à l’état brut en webdesign (voire même en print-design) !

Pourquoi encourager l’utilisation d’outils soit disant “professionnels” pour créer des nuanciers qui, dans la majorité des cas vont entraîner des problèmes de visibilité et de lisibilité s’ils ne sont pas totalement modifiés ou presque ?

Un remède à la théorie des couleurs

Remettons les priorités dans le bon ordre. Un designer graphique ou un webdesigner doit penser la couleur en termes de fonctionnalité (visibilité et lisibilité), en termes de symbolique (culturelle et sectorielle) et enfin en terme d’impact émotionnel.

➜ Le choix de couleurs fonctionnelles dépend du ratio de contraste entre chaque paire de couleurs du nuancier choisi. Les outils à utiliser sont ceux qui permettent de mesure ce ratio de contraste ou ceux qui proposent des couleurs respectant telle ou telle norme d’accessibilité.

➜ Le choix de couleurs cohérentes sur le plan symbolique dépend de l’étude des codes chromatiques en usage dans le contexte culturel du public cible. Plus précisément encore, ce choix dépend de l’étude des codes chromatiques en usage dans le secteur d’activité du public cible.

➜ Le choix de couleurs ayant un impact émotionnel approprié dépend de l’objectif de communication visé. S’agit-il de choquer, d’apaiser, de stimuler, de faciliter la mémorisation, la concentration, l’action ?

Aucun outil ne peut effectuer ces choix chromatiques de manière mécanique. Il se peut cependant qu’une intelligence artificielle convenablement questionnée apporte des réponses pertinentes. Il faudra toutefois évaluer le degré de pertinence des propositions de l’IA. Il faudra donc disposer de critère d’évaluations… autrement dit avoir fait les observations et les analyses requises au préalable !

Pour ce qui est de l’harmonie des nuanciers utilisés, vous constaterez très vite que les nuanciers fonctionnels sont toujours harmonieux, en particulier quand il prennent en compte la répartition quantitative des couleurs !

Catégories
CC3-exos Com-Créa

Animer une mascotte

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

Animer en boucle image par image

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

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

Trouver des modèles

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

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

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

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

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

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

Animation GIF avec gifmaker.me

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

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

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

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

Intégration dans canva.com

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

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

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

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

Cliquer sur l’image pour voir l’animation

Utilisation éventuelle d’After Effect

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

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

Catégories
CC1-exos Com-Créa

Créer un gabarit de livret dans Canva

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

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

Découvrir l’application Canva

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

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

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

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

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

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

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

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

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

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

Étapes de réalisation du gabarit

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

Composer un livret dans Canva

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

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

Catégories
CC1-cours Com-Créa

Ressources pour la comvi

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

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

Catégories
CC1-cours Com-Créa

Fondamentaux de la communication

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

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

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

Les différents types de communication

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

Communication sectorielle

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

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

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

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

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

Types de communication selon d’autres critères

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

Les critères choisis sont les suivants :

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

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

Principaux composants d’un projet de communication

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

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

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

Canaux sensoriels et communication

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

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

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

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

Ces types de communication s’associent pour former :

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

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

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

Angle perceptif et angle expressif

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

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

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

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

Carte mentale de la communication sensorielle

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

Produits, dispositifs et projets de communication

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

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

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

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

Communication digitale ou numérique

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

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

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

Catégories de produits ou supports de communication

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

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

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

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

Composants des produits ou supports de communication

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

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

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

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

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