{"id":2934,"date":"2021-11-29T23:00:37","date_gmt":"2021-11-29T22:00:37","guid":{"rendered":"https:\/\/beink.keekee.studio\/quand-texte-et-image-sentre-melent\/"},"modified":"2024-06-29T16:02:47","modified_gmt":"2024-06-29T14:02:47","slug":"quand-texte-et-image-sentre-melent","status":"publish","type":"post","link":"https:\/\/www.beink.fr\/en\/quand-texte-et-image-sentre-melent\/","title":{"rendered":"Quand texte et image s\u2019entre-m\u00ealent"},"content":{"rendered":"
\n
\n
\n
\n
\n

D\u00e8s lors que l\u2019on souhaite int\u00e9grer du texte dans une image ou bien des images dans un texte, se pose la question de la mani\u00e8re d\u2019agencer l\u2019un par rapport \u00e0 l\u2019autre. Le texte peut \u00eatre s\u00e9par\u00e9 de l\u2019image, la compl\u00e9ter (titre, sous-titre, l\u00e9gende), s\u2019accorder ou contraster avec, s\u2019y int\u00e9grer ou m\u00eame devenir compl\u00e8tement indissociable de l\u2019image (texte dessin\u00e9).<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n

Dans un article scientifique, texte et image sont en g\u00e9n\u00e9ral redondants l\u2019un avec l\u2019autre : le texte doit pouvoir \u00eatre compris sans l\u2019image et l\u2019image ne doit contenir aucun \u00e9l\u00e9ment nouveau par rapport au texte et doivent \u00eatre enti\u00e8rement et compl\u00e8tement d\u00e9cortiqu\u00e9es dans le texte. D\u2019ailleurs une figure dans un article scientifique ne peut \u00eatre sans un titre et une l\u00e9gende, ainsi qu\u2019un num\u00e9ro de figure. Elle est donc loin de se suffire \u00e0 elle-m\u00eame, et sert majoritairement \u00e0 apporter des preuves de ce qui est avanc\u00e9 dans le texte. L\u2019article scientifique est donc un format peu friand du proverbe \u00ab un bon croquis vaut mieux qu\u2019un long discours \u00bb, puisque la figure est plut\u00f4t l\u2019illustration du texte.<\/p>\n

Pourtant, qui ici n\u2019a pas d\u00e9j\u00e0 r\u00eav\u00e9 de remplacer par magie l\u2019introduction d\u2019un article scientifique par un dessin ou un ensemble de sch\u00e9mas explicatifs ? Voir pourquoi pas sous forme d\u2019une planche de BD\u2026<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\n

Prenons comme exemple le premier paragraphe de l\u2019introduction de l\u2019article scientifique The Polo kinase Cdc5 is regulated at multiple levels in the adaptation response to telomere dysfunction, sur lequel j\u2019ai contribu\u00e9 au cours de ma th\u00e8se. Et imaginons-le en dessin. Savoir d\u00e9crypter un dessin est une comp\u00e9tence qui s\u2019apprend, au m\u00eame titre que la lecture de texte, car l\u2019image a elle aussi ses codes et ses r\u00e8gles de lecture. Un bon exercice pour savoir votre habilit\u00e9 \u00e0 lire une image, est de prendre le r\u00e9sum\u00e9 graphique fait ici par Beink et de \u00ab le lire \u00e0 voix haute \u00bb c\u2019est-\u00e0-dire de raconter une histoire logique \u00e0 partir de ce que vous voyez. Certains codes sont g\u00e9n\u00e9raux (la fl\u00e8che \u00e0 bout plat par exemple sch\u00e9matise une inhibition).<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n

Alors, \u00e0 quelle histoire \u00eates-vous parvenu ? Correspond-t-elle au texte, dans les grandes lignes ?<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\n

Texte et image sont donc deux langages diff\u00e9rents, deux moyens de s\u2019exprimer qui peuvent chacun convenir ou non \u00e0 telle personne ou \u00e0 tel sujet d\u2019\u00e9tude. Se servir des deux peut donc \u00eatre le moyen de dire la m\u00eame chose de deux mani\u00e8res diff\u00e9rentes, comme c\u2019est le cas dans un article scientifique par exemple. Les articles scientifiques sont tr\u00e8s codifi\u00e9s, \u00e0 la fois dans leur r\u00e9daction mais aussi dans leur organisation visuelle. Par exemple, une illustration doit apporter une id\u00e9e et une seule. On est donc loin des grands sch\u00e9mas bilans. Pourtant ceux-ci sont les plus \u00e0 m\u00eame de faire comprendre la globalit\u00e9 d\u2019une r\u00e9flexion en int\u00e9grant chaque id\u00e9e dans un contexte global. Mais je tiens \u00e0 pr\u00e9ciser que ce n\u2019est pas parce qu\u2019on en voit peu dans les articles scientifiques que les choses ne peuvent pas \u00eatre amen\u00e9es \u00e0 changer !<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n
\n
\n
\n

La mani\u00e8re d\u2019agencer texte et image est une discipline connue sous le nom de mise en page<\/strong>. Mettre en page est le fait de disposer graphiquement un contenu dans un espace donn\u00e9, qui peut \u00eatre par exemple une page en papier, une page web, etc. Sans mise en page, les contenus seraient simplement plac\u00e9s dans l\u2019ordre dans lesquels on les a collect\u00e9s. C\u2019est gr\u00e2ce \u00e0 une bonne ma\u00eetrise de la mise en page que nous parvenons \u00e0 rendre un contenu harmonieux, agr\u00e9able \u00e0 lire, et par-dessus tout : compr\u00e9hensible. La mise en page ne se r\u00e9fl\u00e9chi pas sans pr\u00eater attention au parcours de lecture, ni m\u00eame sans r\u00e9fl\u00e9chir \u00e0 un minimum de coh\u00e9rence dans la charte graphique.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\n

Ci-dessous sont pr\u00e9sent\u00e9es quelques r\u00e8gles simples vous permettant d\u2019avoir des bases efficaces dans l\u2019art de la mise en page.<\/p>\n

Donner une coh\u00e9rence graphique \u00e0 son document, simplement et efficacement !<\/h3>\n

Choisissez 2 polices de caract\u00e8res<\/h4>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n
\n
\n
\n

o Une pour les titres, qui peut \u00eatre originale, visuellement impactante, qui peut reprendre la typo du logo de votre entreprise ou institut par exemple ou bien au contraire vous \u00eatre tr\u00e8s personnelle.<\/p>\n

o Une pour le corps du texte, de pr\u00e9f\u00e9rence la plus facile \u00e0 lire possible, donc en g\u00e9n\u00e9ral assez basique.<\/p>\n

Si vraiment le besoin d\u2019une 3\u00e8me police de caract\u00e8re se fait sentir, par exemple pour mettre en valeur une citation, ou bien pour les l\u00e9gendes, on pr\u00e9f\u00e8rera changer la mise en forme d\u2019une des deux polices d\u00e9j\u00e0 choisie pour cr\u00e9er l\u2019illusion d\u2019une 3\u00e8me police (italique, gras, majuscule, changement de taille de caract\u00e8res).<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\n

Vous vous demandez pourquoi autant de polices de caract\u00e8res existent si c\u2019est pour n\u2019en choisir que deux ? Mais pour cr\u00e9er des tablo\u00efds bien s\u00fbr ! Ou tout autre support visuel extr\u00eamement tape \u00e0 l\u2019oeil et peu professionnels.<\/p>\n

Allez, jouons \u00e0 un petit jeu. Combien de polices de caract\u00e8re diff\u00e9rentes, ou de variations de polices, voyez vous sur cette premi\u00e8re de couverture de Closer ?<\/p>\n

Le premier texte sur Marine Le Pen : m\u00eame police, mais une partie \u00e9crite en italique, l\u2019autre en gras. Donc d\u00e9j\u00e0 2 illusions de polices diff\u00e9rentes. \u00ab\u00a0Closer\u00a0\u00bb est un titre d\u2019une police particuli\u00e8re qui n\u2019est reprise nulle par ailleurs. \u00ab\u00a0People \u2013 v\u00e9cu \u2013 mode \u2013 t\u00e9l\u00e9\u00a0\u00bb est encore diff\u00e9rente. Les reste des typo sont globalement les m\u00eames, mais toutes de factures diff\u00e9rentes : italique, gras italique, majuscule, minuscule, gras minuscule, gras italique majuscule, \u00e9criture horizontale ou pench\u00e9e, et au moins 8 tailels de polices diff\u00e9rentes. Puis bien s\u00fbr, la police permettant d\u2019y inscrire le num\u00e9ro de s\u00e9rie, le prix, la date, et toute information essentielle \u00e0 la publication du num\u00e9ro.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n

Donc ! Lorsque vous r\u00e9fl\u00e9chissez \u00e0 votre mise en page, demandez-vous quelle impression vous souhaitez donner, et dans le doute, optez pour la sobri\u00e9t\u00e9 !<\/p>\n

Choisissez 2 tailles de polices<\/h4>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n
\n
\n
\n

M\u00eame la taille des polices de caract\u00e8res a son importance ! Pour chaque police choisie, r\u00e9glez la taille des caract\u00e8res et n\u2019en changez plus.<\/p>\n

Par exemple, 12 pour la police de corps de texte, qui se doit, rappelons le, d\u2019\u00eatre extr\u00eamement lisible.<\/p>\n

Pour la police titre, plus originale (ou pas), vous pouvez vous amusez sur le choix de la taille : voyez les choses en gigantesque pour donner de l\u2019impact \u00e0 votre mise en page, ou bien choisissez une taille plus traditionnelle selon le message que contient votre travail.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\n

Choisissez votre palette de couleurs<\/h4>\n

M\u00eame mot d\u2019ordre ici : la sobri\u00e9t\u00e9. S\u00e9lectionnez deux couleurs, quelles soient compl\u00e9mentaires, de m\u00eame teinte, contrast\u00e9es, etc. et pour ce choix je vous r\u00e9f\u00e8re \u00e0 l\u2019article sur les couleurs r\u00e9dig\u00e9 pour vous dans une pr\u00e9c\u00e9dente newsletter : Bariolez avec harmonie<\/a> !<\/p>\n

L\u2019id\u00e9e est d\u2019utiliser le noir standard pour le corps du texte, et d\u2019utiliser la palette de couleurs pour les titres, l\u00e9gendes, fonds de pages, th\u00e8me des couleurs des images ins\u00e9r\u00e9es, etc.<\/p>\n

Ci-dessous, neuf palettes de deux couleurs, g\u00e9n\u00e9r\u00e9es avec Coolors<\/a>.<\/p>\n