Feuille blanche, Page noire
En tant que designer d’interaction, j’ai eu l’opportunité de donner une formation autour des principes graphiques fondamentaux de la mise en page. L’objectif était d’apporter des bases de travail aux personnes désireuses de créer et mettre en page des documents par elles-mêmes. Ce premier article aborde les aspects théoriques. Les cas pratiques seront l’objet d’un second article.
Chez ceux qui s’essayent à l’écriture, il est fréquent d’être pris du vertige de la page blanche. Regarder un abysse fait toujours cet effet, ce n’est jamais agréable lorsque celui-ci provient de son moi intérieur. Johan Faerber, enseignant de son état, mais aussi critique littéraire et animateur du site Diactitik, propose également la notion de page noire qui est l’exact inverse d’un vide littéro-intersidéral : un trop-plein de références et de désirs qui, mêlés sur le papier, débordent et rendent l’auteur ou l’autrice atone à force de trop vouloir crier l’encre des autres.
La page blanche est un mythe révolu, comme mort à lui-même. Le 20e siècle, cette grande traversée de l’écriture et cette invention permanente de livres définitifs, a laissé chacun désormais devant une page noire, terriblement noircie par toutes les écritures et les Livres complets qui l’ont précédé.
L’entretien est ici, mais je vous conseille aussi son intervention chez Hors-série.
On peut dire qu’en graphisme, il se passe sensiblement la même chose. Si l’on peut être vide, hésitant et/ou manquer d’idée face à la mise en forme d’un document, on peut aussi remplir sa page de pictogrammes, de couleurs à foison, des mille et une typos dont l’éclat n’a d’égal que le manque d’homogénéité de l’ensemble. Car comme tout un chacun est amené à faire des Powerpoint, affiches et autres documents Word sans que la moindre formation nous soit dispensée, la profusion de mise en page amateur augmente de façon exponentielle. En effet, n’importe qui peut aujourd’hui créer ce qu’il souhaite dans le format qu’il désire, avec une myriade d’outils et d’assistants divers qui guident la création, parfois comme des carcans rigides. Nous sommes à l’ère d’un démocratisme graphique. Alors on veut faire du beau, et c’est normal. D’où l’infiltration de quelques sociétés délivrant une solution reproduisant pour le quidam, les plus belles compositions en un tour de clic. Mais souvent, on ne dispose pas de l’argent ni du temps nécessaire et on patine autour du résultat pour finir par se dire : qu’est-ce qui fait que c’est si beau chez les autres et pas chez moi ? On rêverait d’une page noircie. Ce qui est la hantise chez l’écrivain ambitionnant de laisser son nom à la postérité, est le rêve de tout un chacun galérant avec son Powerpoint.
Le graphiste professionnel n’échappe pas à la page noire, c’est même pire : il se débat sans cesse avec le torrent de références qu’il ingurgite à coup de Behance, Pinterest et autre Dribbble. Au point que certains sont soupçonnés de plagiat, faute qu’ils ont bien souvent commise sans même en avoir conscience (ou pas).
Comment appréhender le graphisme quand on n’y connaît rien et que l’on ne sait pas dessiner ?
De la même manière que les récits sont tous la déclinaison d’un mythe originel (selon la thèse certes discutable du monomythe de Joseph Campbell), les compositions graphiques suivent des règles et des usages que le sens commun a intégré et qui servent de repères aux gens. Il s’agit à la fois de règles de lisibilité ayant pour origine la volonté de fournir plus d’aisance au récepteur d’un message pour le comprendre et le déchiffrer, comme par exemple, les règles de contraste entre les couleurs. Mais il s’agit aussi de règles esthétiques créées tout au long de l’histoire par les créations des artistes et qui sont devenues des codes de référence. Par exemple un plan américain dans le cinéma qui est typique du western (car on peut voir l’arme). Enfin, l’usage technique d’un outil est d’une importance déterminante pour appliquer dans la forme plastique le plan construit au préalable (pour passer du story board à la bobine). Le problème de l’outil technique, c’est qu’il est versatile. Il change au gré des innovations, se transforme et reste un savoir incertain qui peut tomber rapidement en désuétude. À l’inverse, les règles élémentaires de lisibilité et les codes esthétiques contemporains sont plus intangibles (surtout les premières). Il est d’autant plus aisé de naviguer entre des médiums et des outils lorsqu’on les maîtrise et cela décuple les capacités créatives.
Dans le fond, les formes
Si nous mettons de côté les règles issues du travail constant du cinéma, de la photographie, du dessin, de la peinture, etc., pour nous concentrer sur des règles plus fondamentales, que pouvons-nous dire ? Et bien que l’on parle de langage plastique pour désigner les différents concepts de base pour une composition :
- La ligne
- La forme
- La couleur
- la valeur
- L’espace
- Le volume
- La texture
Ces éléments conceptuels sont les principes actifs fondamentaux de la mise en forme dans une composition. Sans eux, pas d’image, pas de langage.
Le but de tout graphiste est de jouer avec ces éléments pour rendre du contenu (1) lisible et (2) agréable. Le contenu, c’est le plus souvent du texte et des images. Et il faut du contenu pour bosser, sinon on fait juste des ronds et des carrés sur une feuille et on a l’air d’un con (ou d’un artiste contemporain, mais à ce moment-là veuillez préparer la note d’intention si vous voulez le chèque). Le graphiste n’est pas responsable du contenu. À vrai dire, peu lui importe. Il râle quand il y en a trop, quand il n’y en a pas assez, quand ça parle de pétrochimie ou de toucher rectal (avec photographie), mais globalement la rédaction n’est pas pour lui quelque chose d’aisé et ne parlons même pas de ses capacités orthographiques qu’une scolarité passée à griffonner des Titeuf et autre Dragon Ball aura rendues inaptes. Je sais de quoi je parle. C’est pourquoi le graphiste fait équipe avec un (souvent -e) concepteur-rédacteur (souvent -trice), dit CR.
Well. Le graphiste arrive toujours à trouver la voie de la mise en page. Car il maîtrise le langage plastique ! Ce langage n’a rien à voir avec la maîtrise d’un logiciel ni avec un medium particulier, tant qu’il y a de l’image c’est OK. Nous allons donc détailler à l’aide du fantastique livre de Damien et Claire Gauthier, qui est une somme indispensable.
Les principes plastiques
Principe morphologique : la ligne et la forme
Ces trois aspects sont les plus basiques. Réunis ensemble, ils correspondent à l’assemblage de formes simples dans un espace donné qui donne naissance à une composition. Lorsqu’un graphiste fait un chemin de fer ou qu’un UI designer dessine un wireframe, il utilise des formes simples pour assigner les éléments à des zones de la composition et générer rapidement un premier aperçu du résultat final. En filigrane, ces éléments basiques restent visibles comme un squelette dans la composition finale mais aussi comme composant graphique à part entière.
Principe morphologique : La grille et l’espace
L’espace dans une composition concerne toute la gestion de la profondeur ainsi que le rapport des éléments les uns par rapport aux autres : juxtaposition, répétition, alternance, symétrie, asymétrie, plans, etc.
De la même façon, subdiviser l’espace de travail en plusieurs sections permet de générer une grille, des marges et des colonnes. Certains designers se passent de ces guidelines, mais il faut avouer qu’elles sont très pratiques et qu’elles peuvent même permettre de donner un style propre que l’on désigne souvent sous le terme de constructivisme, géométrique et régulier. Certains designers utilisent également des ratios pour créer des structures qui se tiennent visuellement, c’est-à-dire qui donnent l’impression d’être tenues dans la page par quelque chose, comme une étagère sur un mur dont on aurait masqué les accroches.
Principe lumineux : teinte, saturation, luminosité
Le spectre lumineux se décline en un nombre incalculable de couleurs dont nous pouvons nous servir en tant que designer.
Le meilleur moyen de jouer avec une palette de couleur consiste à utiliser un nuancier et à trouver de bonnes associations entre les différentes tonalités. Le nuancier TSL (teinte, saturation, luminosité) permet de jouer sur des échelles de tonalité, tandis que la roue chromatique permet de choisir des tons dans un ensemble de couleurs prédéfinies (primaires, secondaires, tertiaires) et ainsi trouver des accords harmonieux entre les teintes.
Principe de matière
Un peu moins important dans le cadre de la mise en page, ce sont les textures et les volumes géométriques dans l’espace en 3 dimensions, mais on ne parlera pas de cela ici. Next.
La composition graphique
Dans le livre de Damien et Claire Gauthier, ces principes plastiques morphologiques sont mobilisés autour d’autres notions fondamentales de compositions (les illustrations suivantes sont reprises du livre, même si je les ai redessinées, c’est ce que vous trouverez à l’intérieur) :
- La symétrie et l’asymétrie
- Le rythme
- Le contraste
Composition : symétrique et asymétrique
Les formes sont inscrites dans un espace d’où elles se répondent. La symétrie est une organisation parfaitement correspondante de part et d’autre des parties. Elle évoque l’ordre, la puissance, l’autorité, la stabilité, et la grandeur. La symétrie variable reprend le contexte avec plus de souplesse dans la distribution des éléments. Elle évoque la diversité, l’hétérogénéité avec des écarts de forme, de lumière, de couleur, etc.
L’asymétrie d’autre part. Il s’agit d’un principe décompensation des masses en équilibre sur la surface selon le ton ou l’échelle par exemple. Elle exprime le déséquilibre et le mouvement.
Composition : les contrastes de formes
Le contraste est un principe d’écart entre 2 valeurs pouvant aller jusqu’à son contraire. Deux éléments contraires peuvent alors fournir une unité par complémentarité tel que le noir et le blanc. Les contrastes permettent de rendre la composition expressive. Ce concept s’applique autant à la forme (contraste géométrique entre forme courbe et angulaire), à l’échelle (grand/petit, épais/ fin), aux directions (horizontal/vertical, linéaire/circulaire, montant/descendant, courbe/contre-courbe), aux couleurs, qu’aux textures (rugueux, lisse, mat). Il existe une grande variété de contrastes. Ils permettent de différencier les éléments les uns des autres et donnent au lecteur de puissants repères pour comprendre et classifier les différents éléments d’une composition. Les contrastes peuvent être de plusieurs natures :
- Le contraste d’échelle
- Le contraste de forme
- Le contraste de direction
- Le contraste de valeur
Les 7 contrastes colorés
Johannes Itten, grand peintre suisse a enseigné à l’époque glorieuse du Bauhaus des règles de contrastes colorimétriques qui sont restées dans les manuels des graphistes depuis lors. Il convient de noter que ces contrastes possèdent leur part de subjectivité et de poésie, il ne s’agit pas d’une règle rationnelle et scientifique. Dans un certain sens, ces principes vont à l’encontre d‘une certaine histoire du design qui est une conquête de la rationalité sur les passions créatrices. Voici les contrastes de Itten :
Le chaud-froid : Il s’agit du contraste entre des couleurs qui par leur nature nous suggèrent le froid ou le chaud. Il s’agit peut-être du plus évident de tous tant la symbolique du chaud et du froid est intégrée dans notre culture commune.
Le clair-obscur : Ce contraste fait référence aux ombres et lumières. Ils ont pour limite le blanc et le noir. Ils ont pour intermédiaire toutes les autres valeurs. Il donne un aspect assez dramatique, artificiel, surnaturel, spirituel ou encore crépusculaire.
Le contraste de complémentaires : Il désigne deux couleurs dont le mélange donne un gris noir de ton neutre. Couleurs opposées sur le cercle chromatique, leur rapprochement avive leur luminosité, leur mélange les détruit. Chaque couleur complémentaire d’une couleur primaire est l’égal de la somme des deux autres couleurs primaires. Il n’y a jamais qu’une couleur qui soit la complémentaire de l’autre.
Contraste de quantité : Il concerne les rapports de grandeur de deux ou plusieurs couleurs.
Contraste de qualité : Il consiste à altérer une couleur en lui ajoutant une pointe (plus ou moins forte) de noir, de blanc, ou de sa complémentaire. C’est un principe très utilisé pour créer des déclinaisons colorées notamment avec un nuancier TSL en jouant avec la luminosité, la saturation pour moduler la clarté et le degré de salissure de la teinte.
Contraste simultané : Il crée un dynamisme électrique aux accords et peut même aller jusqu’à faire mal aux yeux.
Couleur en soi : La juxtaposition de couleurs nettement différenciées créée un effet psychologique de vivacité, de vigueur, d’énergie. Le contraste est maximum entre des couleurs primaires.
Nous reviendrons sur les aspects pratiques de la mise en page dans un prochain article, celui-là est déjà bien assez long. Je reviendrai notamment sur les notions d’espacement, de contraste typographique et sur quelques cas d’usages simples à aborder.
Nous publions régulièrement des articles sur des sujets de développement produit web et mobile, data et analytics, sécurité, cloud, hyperautomatisation et digital workplace.
Suivez-nous pour être notifié des prochains articles et réaliser votre veille professionnelle.
Retrouvez aussi nos publications et notre actualité via notre newsletter, ainsi que nos différents réseaux sociaux : LinkedIn, Twitter, Youtube, Twitch et Instagram
Vous souhaitez en savoir plus ? Consultez notre site web et nos offres d’emploi.
