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
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.

Catégories
CC1-cours Com-Créa

Les contrastes typographiques

Cet article est un complément d’information sur l’utilisation du contraste en design graphique.

Pour créer des tensions visuelles dans une composition et pour favoriser la lecture du message à transmettre, le designer graphique utilise plusieurs types de contraste. Concernant la structuration, la stylisation et la composition des textes, plusieurs contrastes peuvent être mis en œuvre. Ils s’appliquent généralement à la différenciation entre :

  • les titres (lecture de repérage – textes courts) et les paragraphes (lecture suivie – textes longs).
  • les textes normaux et les textes mis en évidence (textes importants ou emphatiques) ou mis en retrait (mentions obligatoires, conditions de ventes, etc.)
Tableau extrait de “Aide au choix de la typographie”, de Gérard BLANCHARD, publié aux ateliers Perrousseaux.

Sommaire

Inventaire de contrastes typographiques

Les contrastes d’écriture

Les contrastes d’écriture ont été utilisés très tôt dans l’histoire de l’écriture, pour distinguer le début des chapitres (lettrine ou incipit) et le texte lui même. Cette distinction par un changement d’écriture s’est étendue à l’inscription des titres.

Les contrastes d’écriture sont une forme particulière des contrastes de forme et de structure.

  • romain (humanistique) / italique (chancelière)
  • romain (humanistique) / anglaise (cooperplate)
  • onciale (celtique) / romain (humanistique)
  • onciale (celtique) / italique (chancelière)
  • autres contrastes d’écriture

Les contrastes de famille typographique

Les contrastes de famille typographique sont une forme particulière des contrastes de forme ou de structure et une généralisation des contrastes d’écriture.

  • serif (sérieuses) / sans serif (neutres)
  • display (expressives) / sans serif (neutres)
  • handwriting (scriptes et cursives manuscrites – amicales) / sans serif (neutres)
  • handwriting (scriptes et cursives manuscrites – amicales) / serif (sérieuses)
  • lettres toscanes (tuscan letters) / lettres
  • autres contrastes de familles de polices

Les contrastes de forme ou de structure

Les contrastes de forme ou de structure précisent les différences identifiables entre plusieurs types d’écritures ou de lettrages.

Notez que le terme “lettre contrastée” désigne un type de lettres
présentant une différence de graisse entre ses parties (https://fonts.google.com/knowledge/glossary/contrast).
On parle de pleins et de déliés pour les lettres calligraphiques.

  • contrasté (différence entre pleins et déliés) / uniforme (traits de lettre de même épaisseur)
  • haut de casse (capitales ou majuscules) / bas de casse (minuscules)
  • avec empattements rectangulaires / sans empattement
  • avec empattements filiformes / sans empattement
  • avec empattements triangulaires / sans empattement
  • avec empattements fourchus / sans empattement
  • scripte (détaché) / cursive (attaché)
  • droit (vertical) / incliné (penché)
  • élargi (étendu) / étroitisé (condensé)
  • grand ou très grand / petit ou très petit
  • gras / maigre
  • rectiligne / curviligne
  • rectangulaire / circulaire
  • géométrique / organique
  • avec bordure ou contour / sans bordure ou contour
  • avec motif ou texture / sans motif ou texture
  • avec relief / sans relief
  • autres contrastes de forme ou de structure

Les contrastes de couleur

Les contrastes de couleur concernent la couleur des textes et la couleur du fond sur lequel le texte est présenté.

Notez que l’expression “couleur typographique” ou “gris typographique”
désigne l’intensité du gris produit par le mélange optique du texte
sur la couleur du papier.

  • couleur / noir et blanc
  • couleur foncée / couleur claire
  • couleur chaude / couleur froide
  • couleur vive (saturée) / couleur terne (désaturée)
  • autres contrastes de couleur

Les contrastes de composition typographique

Les contrastes de composition typographique concernent des moyens déployés pour différencier deux textes par leur positionnement dans la page. Il n’est plus question de formes ou de dessin des lettres, mais plutôt de mise en page des lettres, des mots, les lignes, des colonnes et des textes.

  • ligne de texte horizontale / ligne de texte verticale
  • ligne de texte horizontale / ligne de texte inclinée
  • lettres disposées horizontalement / lettres disposées verticalement
  • lettres normales ou espacées / lettres serrées
  • lettres normales ou serrées / lignes espacées
  • autres contrastes de composition typographique

Contrastes et combinaisons typographiques

Les combinaisons typographiques proposent d’associer 2 polices de caractères de manière harmonieuse. À vrai dire, l’esthétique n’est pas le seul critère d’association. la combinaison des polices de caractères doit aussi répondre à un besoin fonctionnel.

Pour associer 2 polices de caractères, il convient de définir quel est le type de lecture des textes utilisant l’une et l’autre des fontes sélectionnées. Une lecture suivie de texte courant de petite taille n’exige pas les mêmes caractères typographique qu’une lecture de repérage de titres courts présentés dans un corps important.

Si vous recherchez une police de caractères pour les textes de titrage et une police de caractères pour les textes de labeur, éliminez d’emblée les propositions associant deux polices expressives ou amicales décoratives. En effet aucune d’entre elles ne pourra être utilisée pour la lecture suivie.

En savoir plus

Voir des illustrations sur le sujet

Articles traitant du contraste et des combinaisons typographiques

Articles en anglais sur le même sujet

Catégories
CC1-cours Com-Créa

Structuration, stylisation et composition

Dans ce cours, vous allez apprendre à identifier les trois opérations fondamentales de la mise en page.

Dans ce cours, les opérations de structuration sont envisagées avant les opérations de stylisation et de composition. Dans la pratique, ces opérations sont souvent menées de manière itérative (en revenant sur l’une ou l’autre au fil de la conception).

Introduction

Les 3 opérations fondamentales (structuration, stylisation et composition) sont encadrées par 2 opérations importantes : la préparation du projet et la réalisation des produits de communication. La phase de préparation commence par la définition des objectifs du projet et la phase de réalisation se termine par la publication des produits mis en page. J’ai schématisé cela dans le dessin ci-dessous.

La cuisine graphique

Pour mieux saisir l’articulation des 3 opérations centrales de la mise en page, nous pouvons comparer la mise en page (ou infographie — au sens de PAO) à la restauration (gastronomie).

schéma sur la publication de contenus
Schéma sur la présentation d'ingrédients

1- La structuration du texte

Dans la première partie de la formation Com-Créa, nous nous intéressons prioritairement au texte. La première chose à faire avant d’effectuer la mise en page d’un texte est, comme nous l’avons vu plus haut, de le structurer.

Cette structuration comprend trois opérations incontounables : le découpage en blocs d’information, la hiérarchisation des informations et leur ordonnancement selon l’ordre de présentation souhaité.

Le découpage du texte

Le découpage du texte s’effectue en deux temps, celui du découpage fonctionnel et celui du découpage visuel.

Le découpage fonctionnel

Le découpage fonctionnel permet d’identifier les blocs d’information ayant une fonction spécifique dans le texte à mettre en page (bloc-accroche, bloc-titre, bloc-date, bloc-lieu, bloc d’informations utiles, etc.).

Le découpage visuel

Le découpage visuel permet ensuite de déterminer à quels endroits les textes (titres, accroches) ou les lignes vont être coupés lors de la mise en page.

Mis en œuvre par des designers aguerris, ce découpage visuel peut enfreindre les règles habituelles de la typographie et produire un effet visuel original.

L’affiche ci-dessus montre comment le mot PHOTOGRAPHIE
est présenté en étant découpé en 3 parties, les tirets de césure
étant placés (hors règle orthotypographique…) en début de ligne.
Le but de cette disposition est de présenter le titre de l’affiche
sur une grille de 5 x 7 modules.

La hiérarchisation des informations

La hiérarchisation des informations consiste à attribuer à chaque partie du texte un niveau d’importance — numéroté de 1 à n… (n variant selon les types de texte).

Les niveaux hiérarchiques seront clairement perçus après la stylisation et la composition. Cependant, ils sont à définir assez tôt dans le processus de mise en page.

Le modèle de cette affiche, disponible sur Canva, est moins nettement hiérarchisé…

Saisissez “Brocante” dans le champ de recherche des modèles d’affiches, sur la plateforme Canva. Vous trouverez le modèle de l’affiche présentée ci-dessus.

Vous constaterez que la hiérarchisation des informations placée sur le modèle a été améliorée.

L’ordonnancement du texte découpé et hiérarchisé

Découpé et hiérarchisé, le texte à mis en page se présente souvent dans un ordre différent de l’ordre hiérarchique défini plus tôt.

➜ Dans l’exemple de l’affiche sur la brocante, le texte de la version améliorée est constitué de 4 niveaux hiérarchiques présentés dans l’ordre 2-1-3-4.

L’ordre dans lequel ce texte a été rédigé ou celui dans lequel il a été communiqué au designer graphique n’est pas nécessairement l’ordre de répartition du texte dans la page.

2 – La stylisation des contenus

La stylisation des contenus et du texte en particulier consiste à déterminer quelles sont les polices de caractères (fontes) à utiliser et la manière dont celles-ci doivent être utilisées. La stylisation détermine aussi quelles sont les couleurs à utiliser et la manière dont celles-ci doivent être étagées et réparties. Elle détermine aussi quelles sera la morphologie dominante des formes structurantes, des figures, motifs et textures éventuellement utilisées.

La combinaison typographique

La stylisation typographique détermine quelle est la famille de caractères envisagée pour les titres et quelle est la famille typographique est envisagée pour les paragraphes. Une troisième famille de caractères peut être envisagée pour les accroches ou slogans.

Cette étape de la stylisation est nommée en anglais font pairing. De très nombreuses ressources sont disponibles en ligne à ce sujet.

Source : designmantic.com

Vous trouverez des informations à ce sujet sur netboard.me, sur le site de ressources intitulé Fondamentaux du lettrage et de la typographie – Combiner des caractères.

L’étagement des valeurs des couleurs

L’étagement des valeurs des couleurs consiste à ménager un contraste de luminosité suffisant et si possible constant entre toutes les couleurs du nuancier envisagé.

➜ Le but de cette règle est de favoriser la création des variantes et des déclinaisons d’un produit de communication. En effet, les couleurs aux valeurs étagées sont permutables sans perte de qualité de contraste. Le confort de lecture est préservé, quelque soient les combinaisons de couleurs utilisées.

Permutations de 4 couleurs aux valeurs étagées sur une même composition

Dans l’exemple des permutations ci-dessus, les valeurs des couleurs ne sont pas étagées régulièrement. On se rend compte sans peine que le vert clair sur le blanc se lit moins bien que le rouge sur le blanc. Il en est de même du jaune sur le blanc en comparaison du rouge sur le blanc (cela se verrait encore plus si le texte le plus petit avait été stylisé en jaune).

La sélection des formes structurantes

La sélection des formes structurantes repose sur la cohérence entre le sujet traité et la symbolique ou la connotation culturelle (ou entreprenariale) des formes envisagées.

Cette sélection répond cependant le plus souvent à des impératifs de structuration visuelle, les formes structurantes permettant notamment d’isoler les textes des images en leur offrant un fond uni ou faiblement contrasté pour en faciliter la lecture. Ces formes peuvent servir de cadre ou d’enveloppe à certaines informations.

Ce visuel est un modèle de mise en page provenant du site Pix Teller

Le choix des figures et motifs utilisables

Le choix des figures et des motifs utilisables s’ajoute à la sélection des formes structurantes. Photographies et illustrations, icônes et pictogrammes sont choisis en cohérence avec la thématique abordé et les objectifs de communication fixés. Il en est de même pour les motifs et les textures devant figurer dans la composition.

La réalisation d’une planche de style

La stylisation se traduit par la réalisation d’une synthèse visuelle des choix effectués sous forme de planche de style (nommée aussi guide de style — style guide).

La réalisation d’une planche de style à partir d’une planche de tendances sera vue lors du niveau 2 de la formation Com-Créa. par ailleurs, dans la suite du niveau 1, la question de l’étagement des couleurs sera abordée de façon détaillée.

3 – La composition des éléments graphiques

Aligner, espacer, contraster

La composition consiste à organiser dans la page les contenus structurés en respectant les choix de stylisation effectués en amont.

Plusieurs opérations de composition sont généralement mis en œuvre à cette étape de la mise en page mais nous en retiendrons 3 dans un premier temps : l’alignement des contenus sur des axes directeurs, l’espacement des contenus et des blocs informatifs (voir plus bas) pour les différencier clairement et la mise en œuvre de plusieurs contrastes pour mettre en valeur les niveaux hiérarchiques.

Aligner pour guider le regard du lecteur

L’alignement des contenus permet au lecteur de repérer la structure visuelle sur laquelle est construit le document.

➜ L’alignement des contenus sur des lignes allant de point remarquable en point remarquable (début ou fin de ligne, angle de forme, etc.) crée des axes directeurs (ou lignes directrices) qui structurent visuellement la mise en page.

Il est opportun d’associer structure visuelle et structure rédactionnelle.

Espacer pour relier ou séparer des informations

L’espacement joue un rôle clé dans la mise en page. Il intervient dans la différenciation ou l’association des lettres, des mots, des lignes, des paragraphes, des colonnes et des sections de page.

Souvent utilisé de manière instinctive, il peut être mis en œuvre de façon consciente et créative, autant pour rapprocher que pour éloigner.

Divers espaces utilisés dans une composition

Prendre appui sur une grille

La troisième opération de composition consiste à prendre appui sur une grille pour positionner les différents éléments graphiques dans l’espace du cadre.

Plusieurs type de grilles sont utilisables, les plus simples sont des division du cadre de composition en surfaces égales proportionnelles.

Ces grilles sont obtenues en divisant la largeur et la hauteur du cadre en 2, en 3, ou en 4. D’autres divisions sont envisageables, à commencer par celles qui sont le double des deux dernières (6 et 8). Il n’est pas rare d’être amené à diviser des quarts en tiers et inversement (voir ci-dessous).

Division d’une page en tiers et quarts avec utilisation des diagonales

Opération annexe : contraster

D’autres opérations s’effectuent parallèlement lors d’une mise en page. L’une d’entre elles consiste à mettre en évidence les informations clés en jouant sur plusieurs contrastes. Il s’agit d’une opération touchant à la fois la stylisation et la composition.

Contraster pour différencier les niveaux hiérarchiques

Pour différencier les niveaux hiérarchiques au sein d’un bloc informatif ou de la page dans son ensemble, le graphiste peut mettre en œuvre plusieurs contrastes :

  • le contraste de taille
  • le contraste de graisse
  • le contraste de gris
  • le contraste de couleur
  • la mise en valeur par encadrement, surlignage, soulignage, ornementation, etc.
Cet exemple de mise en page a été réalisé sur la plateforme Pablo

Il est possible de combiner plusieurs contrastes mais n’oubliez le principe de design suivant : entre deux solutions choisir toujours la plus simple.

Catégories
CC1-cours Com-Créa

Les écritures latines

Dans ce cours, vous allez apprendre à reconnaître une douzaine d’écritures latines. Certaines d’entre elles jouent un rôle important dans de design typographique des polices de caractères que vous utiliserez dans votre pratique professionnelle.

Histoire de l’alphabet

Toutes les écritures latines s’enracinent dans la graphie de l’alphabet latin dont la forme de référence, pour les lettres capitales ou majuscules, demeure l’alphabet monumental romain. Les lettres minuscules dérivent toutes de l’écriture caroline, imposée par Charlemagne dans tout son empire.

L’alphabet latin a été transmis au romains de l’antiquité par les étrusques qui l’avaient emprunté aux grecs. Ceux-ci le tenait des phéniciens qui le partageait avec plusieurs peuples de l’ancienne Palestine. Ceux-ci l’on développé en mixant langue sémitique et écriture hiératique égyptienne.

Vous trouverez des précisions à ce sujet sur les documents et les sites rassemblés sur netboard.me dans une page intitulée Les fondamentaux du lettrage et de la typographie .

Prenez le temps de vous documenter sur le sujet et faites une synthèse de l’itinéraire suivi par l’alphabet, de l’Égypte des pharaons à la Rome antique. Réalisez ce travail sous forme de sketchnote, en associant textes manuscrits et dessin, le long d’un itinéraire graphique que vous traduirez comme vous l’entendez.

Vous trouverez dans les albums Flickr d’Eva-Lotta Lamm des exemples de sketchnotes : https://www.flickr.com/photos/evalottchen/albums

Écritures latines fondamentales

Quand vous avez réalisé votre sketchnote sur l’itinéraire de l’alphabet, cliquez sur l’image ci-dessous, vous accèderez à un document pdf proposant le mot “graphisme”, écrit dans plusieurs écritures latines, de la capitale romaine à l’italique scolaire d’aujourd’hui.

En effet, l’alphabet latin a continué son évolution et les formes des lettres ont évoluées au fil des siècles, donnant naissances à de nombreuses écritures, dont la plupart sont encore utilisées de nos jours. Apprendre à les reconnaître permet d’identifier l’ancrage historique des formes de telle ou telle police de caractères.

En haut à droite de chaque planche, un lien permet d‘accéder au site de téléchargement de la police de caractères utilisée pour présenter l’écriture choisie. Des indications vous sont données concernant l’outil utilisé pour tracer les lettres et la période historique de conception de l’écriture mentionnée.

Imprimez chez vous les planches du document pdf ci-dessus. Découpez chaque planche de telle sorte que soit séparées l’illustration et la légende. Entraînez-vous à reconstituer les planches après avoir mélangé respectivement les légendes et les illustrations.

L’outil détermine la forme du trait

Vous avez certainement remarqué que pendant longtemps, les copistes et les calligraphes ont utilisé des outils dont l’extrémité formait un trait large (brosse ou pinceau plate, calame, plume d’oie taillée en biseau). Cette pratique se perpétue aujourd’hui.

Les pleins et les déliés de nombreuses polices de caractères utilisées sur nos ordinateurs ont leur origine dans l’angle de la plume large, maintenu lors du tracé de la lettre.

Il est possible d’obtenir un résultat similaire sans disposer d’un matériel spécialisé. Deux crayons ou stylos à bille suffisent.

Faites des essais sur une feuille de papier, en vous inspirant des modèles sur le document pdf mis à votre disposition/

Vous pouvez utiliser l’application en ligne sketchpad.io pour tracer vos premières lettres calligraphiques à la plume biseautée numérique. Sélectionnez l’outil “Calligraphy” et réglez la largeur (Size) de la plume à 30px. Réglez l’angle de la plume (Tip angle) à 140°.

Premiers tracés calligraphiques

Une tablette graphique et son stylet facilitent la pratique de la calligraphie et du lettrage numérique. Le top est l’utilisation d’un iPad compatible avec le stylet Apple… et le budget qui va avec !

Distinguer les formes romaines et italiques, scriptes et cursives.

Les formes romaines et italiques identifiables dans les textes imprimés aujourd’hui ont pour origines des écritures différentes. Cliquez sur l’image ci-dessous pour lire le document complet sur le sujet.

Les écritures dans l’histoire

Les écritures ont évolué au fil de l’histoire, la typographie aussi. Cependant, le développement de la typographie mécanique, électronique et numérique n’a pas empêché le développement des écritures calligraphiques.

Pour vous permettre de visualiser les évolutions ayant eu lieu depuis le bas Moyen-Âge, je vous propose une vision de l’histoire récente par sauts de 3 générations en 3 générations (75 ans).

Les lettres associées aux personnages figurés sur les schémas sont les initiales de leur prénom. Téléchargez le pdf complet (bouton plus bas) pour en savoir davantage. Ce pdf a été actualisé et le prénom de celui qui est né en 2020 est Léo (le prénom le plus attribué cette année là).

Les écritures calligraphiques

D’autres écritures sont nées avant les écritures mentionnées ci-dessus. Certaines d’entres elles sont toujours en usage aujourd’hui (capitales romaines et onciales celtiques, notamment).

Les écritures typographiques

Il existe de très nombreuses classifications des écritures typographiques. Les écritures mentionnées ci-dessus coïncident en partie avec la classification Vox-ATYPI.

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…)

➜ 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. Transmettez-moi la ou les nouvelle(s) image(s) avec votre fichier index-XX.html modifié. Je mettrai le tout en ligne à cette adresse : http://graphizm.fr/bd-pedagos/six-affirmations/.

➜ En rajoutant à cette adresse index-XX.html (XX étant vos initiales), vous pourrez voir votre travail et celui de vos collègues (… en changeant les initiales). 😉


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é.

➜ Vous partagerez ensuite, via Slack, les adresses de ces tableaux.

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 devez déterminer le nuancier utilisé dans l’affiche ci-dessous, vous êtes 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 moyennes surfaces 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 surfaces 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 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 5 grandes catégories (acronyme DANSE…) :

  • 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
  • les décoratives (caractères à l’usage très limité du fait de leurs particularités comme le Blippo Black ou le Monoton)

Vous vous souviendrez de quatre principes fondamentaux.


  • Utilisez les typos expressives, décoratives ou 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 ?

Concernant le style graphique vintage, il est assez vite 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 styles de compositions ne doivent pas être confondus avec les styles graphique. Il s’agit d’une des caractéristiques d’un style graphique.

Prenons l’exemple du style que nous avons étudié de manière plus approfondi, celui 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 à chaque style ou type de composition que vous souhaitez pouvoir 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.

Je vous proposent deux résumés des opérations fondamentales à mettre en œuvre pour le TP1. Présentés sous forme de diaporamas ils vous parlent de compositions MALINES et de graphisme ÉCLAIRÉ. Le premier correspond à des critères minimum d’attendus au niveau 1 de la formation. Le second diaporama présente des critères plus exigeants (mais toutefois réalistes à ce niveau de la formation).

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 (l’inscription est gratuite).

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-cours Com-Créa

Utiliser les couleurs en design graphique

Ce cours est une liste de références en ligne sur la couleur, complétée par des exercices simples et quelques commentaires. Vous y trouverez des liens vers des outils incontournables, en particulier pour le choix des couleurs en webdesign.

La couleur au quotidien

Un designer graphique est sans cesse confronté à la couleur. Son impact sur l’utilisation des produits qu’il réalise est ÉNORME !

Dans cette vidéo, Pierre Appell, enseignant, peintre et musicien, présente sans parole le rôle de la couleur et son importance dans le monde du design graphique et du marketing.

Le lexique de la couleur

➜ Activité en préambule
Listez les termes que vous utilisez pour décrire la couleur et ses variations. Ajoutez à ces termes ceux que vous allez découvrir en consultant les sites mentionnés ci-dessous.

Attention : dans le dernier article mentionné ci-dessus, les définitions de la saturation et de la luminosité ne font pas consensus !

Il est nécessaire de clarifier le sens des termes que nous utilisons. Qu’est ce qu’une couleur assourdie, une couleur ternie, une couleur amortie, une couleur rompue, une couleur rabattue, une teinte désaturée, une couleur dominante, une couleur tonique, un camaïeu de couleurs, etc. ?

Teinte, saturation et luminosité

La couleur se définit le plus simplement par 3 paramètres faciles à différencier et à percevoir :

  • la teinte ou tonalité (bleu turquoise, rouge orangé, jaune citron, vert bouteille, etc.)
  • la valeur ou luminosité (couleur très sombre, couleur foncée, couleur claire, couleur pastel, blanc coloré, etc)
  • la saturation ou intensité (couleur vive, couleur pure, couleur ternie ou amortie, couleur assourdie, gris coloré, etc.)

Dans cette vidéo Pierre Appell présente les variations de teinte, de valeur et de saturation dans la peinture digitale.

Dans notre pratique du design graphique nous élargirons le concept de palette tel qu’il l’envisage ici, nous rapprochant davantage de l’ensemble des couleurs présentes sur la palette d’un peintre, au sens propre du terme “palette” (le support sur lequel le peintre dispose toutes les couleurs qu’il utilise pour peindre un sujet).

Un schéma de synthèse sur les variations de la couleur

Un concept voisin de la saturation : le chroma ou la chromaticité

➜ Exercice
Sur l’illustration ci-dessus, extraite du sélecteur d’andrewwerth.com , dans quelle direction s’échelonne la luminosité ?

L’échelle de variation de la chromaticité varie entre une couleur donnée (plus ou moins lumineuse et saturée) et son équivalent sur une échelle de gris. Autrement dit, toutes les couleurs présentes sur le même niveau (échelon horizontal) d’une échelle de chromaticité ont toutes la même valeur (le même degré de luminosité).

Le système de Munsell (système HVC, Hue – Value – Chroma)

Les planches visibles dans le sélecteur de couleurs d’andrewwerth.com  sont construites sur la base du système de Munsell.

➜ Vous rencontrerez souvent le schéma ci-dessus sous une forme dans laquelle l’auteur assimile chromaticité et saturation (exemple ci-dessous). Cette assimilation importe peu pour notre compréhension de l’articulation entre teinte, valeur et luminosité.

L’image ci-dessus est issue d’un article publié unesciencesouslarobe.com

Les schémas précédent illustrent très bien le dispositif à partir duquel se construit un arbre de Munsell. Cet arbre nous permet de visualiser concrètement les faits suivants :

  • Toutes les couleurs pures n’ont pas la même valeur ou luminosité.
  • Plusieurs couleurs, de même teinte ou non, peuvent avoir la même valeur.

L’image ci-dessus est issue d’un article du site programmingdesignsystem.com

La perception de la couleur et les normes d’accessibilité

Discrimination chromatique

➜ Exercice
Faites avant tout le test de discrimination chromatique proposé par le site de X-Rite. Si vous constatez une difficulté à distinguer certaines nuances, refaites le test une seconde fois. Si les difficultés persistent n’hésitez pas à consulter un spécialiste pour identifier plus précisément votre trouble de la vision.

Il est indispensable de situer votre perception des couleurs par rapport à la majorité des utilisateurs des produits colorés que vous allez concevoir en tant que designer graphique. Plusieurs graphistes et illustrateurs sont daltoniens (exemple de Loïc qui en tire même quelques avantages !).

➜ Plus de détails en ligne

Simulation des troubles de la vision des couleurs

Voici des sites sur lesquels une personne ayant une vision normale des couleurs peut se rendre compte de la manière dont les personnes ayant des difficultés à percevoir toutes les couleurs voient les choses.

Perception contextuelle des couleurs

Même si nous distinguons très bien les couleurs, plusieurs facteurs perturbent notre perception des couleurs dans l’environnement où se trouvent les objets colorés observés. En prendre conscience vous conduira à plus de rigueur dans les tests précédant la réalisation de vos projets de communication.

Contrastes de couleurs

Les couleurs voisines s’influencent mutuellement. C’est ce qui est expliqué dans la vidéo ci-dessous.

Métamérisme

Deux couleurs perçues identiques dans un contexte lumineux donné sont perçues différentes sous un autre éclairage. Cet effet se nomme le métamérisme

Illusions d’optique

Notre cerveau nous joue des tours. Plusieurs illusions d’optique nous permettent de nous en rendre compte.

N’hésitez pas à télécharger les images proposées par les sites ci-dessus pour mesurer les couleurs indiquées comme identiques et vues comme différentes !

La notation informatique de la couleur

Les modes colorimétriques et les synthèses de couleurs

Le mode RVB s’appuie sur la synthèse additive (on ajoute des rayonnements les uns aux autres pour obtenir du blanc, soit le maximum de lumière). Le mode CMJN s’appuie sur la synthèse soustractive (on retire de la lumière en opacifiant le support pour obtenir du noir, soit le minimum de lumière).

Image provenant du site mitaki-design.com

L’affichage numérique des couleurs à l’écran s’appuie sur une synthèse additive par juxtaposition de pixels dont les 3 composants (luminophores) émettent chacun un rayonnement plus ou moins intense de rouge, de vert et de bleu.

Image du site math.univ-lyon1.fr

L’impression en quadrichromie s’appuie sur un mélange de synthèse soustractive (pigments mixés sur le papier) et de synthèse additive (rayonnements réfléchis mélangés au niveau perceptif) obtenu par superposition et juxtaposition de points de trames.

Les différentes techniques de reproduction de la couleur ne couvrent pas toutes le même champ de couleurs. Les techniques d’impression utilisant des encres pigmentées couvrent les champs de couleurs les plus restreints.

Image du site icb-imprimerie.com

Les conversions d’un mode colorimétrique dans un autre doivent donc se faire avec beaucoup de prudence et de précautions. Il en est de même pour la validation à l’écran de documents destinés à l’impression (la restriction du champ des couleurs imprimable doit être simulée à l’écran par le choix du mode colorimétrique approprié).

RGB, RGBa et notation hexadécimale

La notation hexadécimale est une notation “simplifiée” de la notation RGB. La notation RGBa prend en compte la transparence (canal alpha).

Le système de notation RVB (ou RGB) et le système de notation hexadécimal répondent au même besoin : indiquer au système informatique une valeur entre 0 et 255 pour chaque canal de couleur primaire, en synthèse additive.

➜ Exercices
Pour ceux qui souhaitent s’entrainer à manipuler les couleurs en mode RVB (ou RGB), il existe un jeu intéressant sur CodePen. Il s’agit de deviner, parmi plusieurs couleurs, celle qui correspond aux paramètres affichés. Un autre jeu fonctionne sur le même principe avec les couleurs codées en hexadécimal : Guess a Color.

Les webdesigners utilisent principalement le système HEXADÉCIMAL (notation spécifique du codage RVB) pour paramétrer leurs feuilles de style. Les graphistes travaillant avec les imprimeurs privilégient la notation CMJN, associée au mode colorimétrique des documents qu’ils destinent à l’impression. Toutefois, plusieurs de leurs travaux étant publiés en ligne, ils utilisent aussi le codage RGB.

Se souvenir du code hexadécimal de quelques couleurs (gag !)

Le site http://bada55.io propose une liste de couleurs hexadécimales dont le nom dérive de leur codification informatique. Pour cela, l’auteur du site utilise le code suivant pour transposer les chiffres en lettres :

1 = I ou L • 2 = R • 3 = E • 4 = A • 5 = S • 6 = G • 7 = T • 8 =“ATE” • 9 = P
… à vrai dire, chacun peut adapter le code ou le détourner !

Attention : cette notation n’a rien d’officiel, c’est un gag collaboratif, mis en ligne il y a plusieurs années (et toujours en http non sécurisé…). Le plus amusant est que dans certains cas, le nom codé de la couleur et la couleur elle-même collent plutôt bien (#e2071c – erotic, #907A70 – potato, #9a5720 – gastro, #acac1a – acacia, #ba6e15 – bagels) ! Vous en repèrerez plusieurs autres 😉

Ce codage humoristique ne doit pas être confondu avec les noms anglais normalisés attribués à quelques couleurs Web et pouvant être utilisés dans le paramétrage CSS des couleurs d’un site !

Avouez tout de même que, désormais, vous pourrez facilement coder en hexadécimal le vert acacia : #acac1a !

La notation HSL et ses limites

Pour faciliter le codage des couleurs RVB, les développeurs ont mis au point un système faisant appel aux 3 paramètres de la couleur : la teinte (Hue), la saturation (Saturation) et la luminosité (Luminosity).

Normalisé et reconnu par tous les navigateurs, ce système de notation intuitif a été très apprécié en son temps.

Lorsque les normes d’accessibilité ont vu le jour et qu’il a fallu étager les couleurs en tenant compte de leur ratio de contraste, HSL a vite montré ses limites !

Image extraite de l’article “Utiliser HSL pour vos couleurs”, sur lacascade.io

➜ Exercice

  • En utilisant le calculateur HSL de w3schools.com, comparez la luminosité perçue d’un bleu et d’un jaune paramétrés en HSL avec la même valeur de luminosité et de saturation. Que constatez-vous ? Comment expliquez-vous le succès rencontré par cette notation informatique des couleurs ?

Bien qu’incohérent sur les plans perceptif et normatif, HSL a toujours des défenseurs convaincus :

Les sélecteurs-convertisseurs de couleurs

L’existence de plusieurs systèmes de notation informatique des couleurs pour les écrans nécessite l’usage de convertisseurs. En voici une liste (les formats de conversion disponibles sont indiqués sous chaque adresse).

➜ Exercices

  • Essayez de paramétrer un vert olive ou un bleu turquoise avec un sélecteur CMJN, RVB ou héxadécimal et un sélecteur HSL, HSV ou LCH (utilisez par exemple les sélecteurs proposés par w3schools. Avec quel outil et quel système de couleur parvenez-vous le plus facilement à paramétrer la couleur que vous avez en tête ?
  • Vérifiez la fiabilité des valeurs proposées par les convertisseurs en croisant les conversions. Utilisez par exemple le sélecteur Munsell-rgb-hex et vérifiez la luminosité des couleurs d’une même échelle de chromaticité dans le sélecteur hexa-hsluv.
  • Notez, pour une même couleur, les différentes positions des curseurs dans les systèmes de paramétrage présentés dans l’interface de l’outil Lch and Lab colour and gradient picker. Pour une même couleur, notez par exemple les différentes valeurs de Hue dans les différents modes. Examinez également les valeurs de luminosité et de saturation.

Le choix d’un système de notation des couleurs pour l’écran est souvent une question de pratique, individuelle ou sectorielle. Ce choix varie aussi en fonction des outils utilisés et des résultats attendus. Vous avez peut-être remarqué que les nuanciers générés par Lch and Lab colour and gradient picker ne sont pas constitués des mêmes couleurs suivant le mode de codage des couleurs !

Nous allons voir maintenant un système très performant pour lequel il faudra utiliser le codage hexadécimal des couleurs pour en exploiter les fonctionnalités.

La notation HSLuv et les notations dites perceptives

https://www.hsluv.org/ est l’adresse du site d’un nouveau système de notation de la couleur. Il n’est pas encore normalisé et il nécessite l’intégration d’un script JS pour que sa notation soit prise en compte par les navigateurs. Toutefois, ce système est beaucoup plus cohérent que le système HSL.

HSLuv is a human-friendly alternative to HSL”. En français : “HSLuv est une alternative humaine à HSL” ! Autrement dit, HSLuv prend en compte la perception humaine de la couleur, de telle sorte que 2 couleurs codées avec le même pourcentage de luminosité sont vraiment perçue comme ayant la même luminosité !

Comparatifs des systèmes HSLuv et HSL

Dans le tableau ci-dessous, toutes les couleurs et tous les gris sont codés avec une luminosité fixé à 60%.

➜ Plus de détails en ligne

Un système adapté à notre perception — comme HSLuv — nous donne des informations fiables sur la teinte, la saturation et la luminosité d’une couleur

Utilisation de la couleur en communication visuelle

Utilisation en webdesign

Outils utiles

Conseils pratiques

Palettes de couleurs pour le Web présentées en situation

Utilisation en design imprimé

Utilisation en design projeté

Propositions perfectibles

➜ Exercice

  • Vérifiez le contraste de luminosité entre les couleurs proposées par slidescarnival.com. Qu’en concluez-vous ?

Prendre en compte la répartition quantitative des couleurs ne suffit pas ! La présentation visuelle nécessite de prendre en compte la norme AAA Large (voire AAA) pour garantir une bonne visibilité des textes dans les conditions de projection sur écrans blancs opaques.

Utilisation en design plurimédia

Utilisation en peinture et illustration

Les sites généralistes de référence sur la couleur