Disposer vos visuels : droite ou gauche ?

Eh non, ce n’est pas une question « politique » : la disposition des photos, logotypes, visuels divers dans la page est censée obéir à certaines règles. J’ai déjà abordé la question sur Come4News, mais comme j’ai l’esprit d’escalier et que des nouveaux nous rejoignent chaque jour, retour sur le sujet avec d’autres exemples « par l’image ».

Notez tout d’abord que, dans l’illustration ci-contre, le texte ne « cogne » pas contre le bord gris mais s’en détache.
Nous y reviendrons mais notez déjà que c’est indispensable : imaginez que, dans un pareil cas, la police du texte et ses divers attributs calquent ceux du visuel. Vous ne sauriez plus où commencer la lecture…

Bien, tout d’abord, comment dispose-t-on généralement des visuels dans une page de publication ? De diverses manières dont le centrage (le texte entoure l’image ou le tableau, l’infographie) ou la mise au fer (soit à droite, soit à gauche).

En général, on s’arrange pour ménager une sorte de circulation en alternance (un visuel à droite, l’autre à gauche, un troisième à droite, le quatrième à gauche ou inversement). Vous trouverez bien sûr, dans la presse, des pages avec tous les visuels alignés d’un seul côté.
Mais dans ce cas, remarquez qu’ils sont de largeur égale. Le « pavé » d’images sera équilibré par un pavé de texte(s), tous deux rectangulaires.

Notez aussi que l’on tente d’équilibrer la première ligne du pavé de texte latéral et sa ligne de pied de manière à ce que le paragraphe soit de hauteur égale à celle de l’illustration (pour éviter une « tourne », soit que le paragraphe se poursuive sous le visuel). Ce n’est pas toujours évident à réaliser et cela ne s’impose pas toujours mais l’idée est surtout d’éviter que seule une ligne unique ou deux lignes passent sous le visuel.

Portraits, de face ou profil…

Une autre règle veut que, dans le cas d’un personnage (humain, animal), surtout s’il s’agit d’un portrait de profil, sa tête et son regard « incitent » à lire le texte, soit que leur orientation pointe vers le texte. Là, cela peut-être aussi politique.

Imaginez une statue de dirigeant d’une dictature communiste : le bras tendu, le personnage pointe le doigt vers l’avenir. Le titre, c’est « à gauche toute ! ». Politiquement, cela passerait encore si le bras était tendu vers la gauche.
Mais s’il pointait hors de la page (soit que le personnage tourne le dos au texte), l’avenir radieux pourrait être ressenti fort incertain, car si la gauche, c’est le vide, alors…

J’ai donc choisi cette fois l’exemple de somnambules les bras tendus (peu importe l’article et la plupart des somnambules ne tendent pas les bras). Le premier visuel illustre la règle. C’est d’ailleurs aussi un contre-exemple. En effet, comme les enfants de l’affiche regardent à peu près « vers » le lecteur, ils « compenseraient », en quelque sorte, le fait que l’adulte pointe vers l’extérieur de la page.

Contre-exemple aussi puisque le fait que Donald « sorte » de la page peut ajouter un léger effet comique : il va « tomber », s’imagine-t-on. Ou du moins met-il ainsi un terme visuel à l’article : il s’en va, il n’y a plus rien à lire.

L’habillage du visuel

C’est difficilement perceptible à l’œil nu, mais j’ai un tantinet exagéré l’habillage du second visuel (juste ci-dessus). Il est de 11 pixels à gauche (contre neuf pour le premier). En général, plus votre image est volumineuse, plus l’espace entre elle et le texte gagne à être grand (mais, avec seulement six pixels de transparence ajoutés, toute image se détachera du texte de manière à éviter que le texte bute contre le bord de l’image). Évidemment, si le fond de cette page était blanc, pour un visuel comme le Donald (non encadré, voir première illustration), cela n’aurait guère d’importance : seul le bout de son bras gauche « cognerait » contre le texte.

Dès que vous avez une image dont la couleur dominante diffère de celle du fond de page, la butée du texte contre elle est disgracieuse. Puisque j’ai déjà abordé (dans un précédent article) le sujet du comment habiller un visuel, je n’y reviens pas.

 

Il s’agit tout simplement, lorsque vous soumettez ou publiez un article sur C4N, d’utiliser des options de disposition des visuels. Comme vous devriez pouvoir le constater, la distance entre la bordure (verte) du visuel « Donald » et le texte (celui-ci, pas celui de l’article sur le somnambulisme) est peu important (six pixels). C’est vraiment un minimum. Là, il ne s’agit pas d’une copie d’écran de Come4News mais d’une mise en page MSWord ad hoc.

 

Nous avons donc sur cette page trois visuels disposés en quinconce (à g., à d., à g.), soit conformément à la règle habituelle. Cela donne du rythme à la disposition. Mais en fait, tout dépend des visuels (de leur taille, par ex.) et de ce qu’ils représentent.

Cela ne peut vous apparaître, mais l’image originale du Donald était en fait orientée à l’inverse : il marchait de droite à gauche et non de gauche à droite.

J’ai tout simplement procédé à une rotation de l’image sur le mode « symétrie horizontale de la zone de travail » (selon la terminologie du logiciel d’Adobe Photoshop).

Pour une telle image, c’est possible. Pour l’affiche, qui, elle, inclut du texte, eh bien, ce dernier aurait été inversé.

Certains visuels sans texte (ou très peu, ou flou, illisible) se prêtent à cette manipulation.

Pas d’autres (ne faites pas de l’UMP un PMU, d’une étude une « ebuté… », enfin, avec les lettres inversées).

 

Ce genre de manipulation est souvent plus fréquent quand il s’agit de composer une double page avec diverses illustrations. Ou lorsqu’on voudrait que deux personnages (sur deux photos) se fassent face alors que les originaux présentent le même profil (droit ou gauche) ou se tournent le dos (et dans ce cas, on centrera la photo puisque – automatiquement – le regard ou l’orientation de l’un des deux, si la photo était contre un bord de page, « sortirait » de la page).

Voyez l’exemple des affiches de films. Que Richard Gere soit de profil vers l’extérieur importe ici assez peu puisque son regard est dirigé vers vous. Maintenant, voyez comment le texte est disposé  sous la main de Charlotte Gainsbourg. Imaginez que le bloc de texte soit placé devant Alain Chabat et que la main de Charlotte Gainsbourg soit plaquée contre le bord droit : à qui prêterait-elle la main ? « Subliminalement », peut-être à un inconnu qui ne serait pas à l’affiche…

Tout cela reste évidemment un peu subjectif, mais tentez d’y prêter attention…

Auteur/autrice : Jef Tombeur

Longtemps "jack of all trades", toujours grand voyageur. Réside principalement à Paris (Xe), fréquemment ailleurs (à présent, en Europe seulement). A pratiqué le journalisme plus de sept lustres (toutes périodicités, tous postes en presse écrite), la traduction (ang.>fr. ; presse, littérature, docs techs), le transport routier (intl. et France), l'enseignement (typo, PAO, journalisme)... Congru en typo, féru d'orthotypographie. Blague favorite : – et on t'a dit que c'était drôle ? Eh bien, on t'aura menti !

3 réflexions sur « Disposer vos visuels : droite ou gauche ? »

  1. Une remarque : tout ce que j’indique s’applique surtout à une publication papier. Le problème de la mise en pages pour l’Internet, c’est que on est rarement en tel vu, tel reproduit ([i]wysiwyg[/i] = tel vu, tel imprimé aussi).
    Ainsi, je vois ce que je saisis et ce qui s’affiche est totalement différent. Et encore, c’est chez moi, sur mes deux écrans (un vertical, un horizontal côte à côte). Si le texte et les visuels sont redéployés sur des écrans plus petits, bien sûr, l’aspect est très différent.

    Mais il est arrivé que des copies d’écran de certains de mes articles soient utilisées pour réaliser des dossiers de presse. En général, ce n’est pas trop moche. Normal, puisque j’affiche surtout sur mon écran vertical (affichant une page A4 à dimension réelle, et davantage).
    Là, le « rythme » de la page est assez mauvais : la taille des visuels aurait gagné à être plus « contrastée » (une grande, une plus petite que la précédente). Mais bon, il ne s’agissait pas d’une mise en page pour magazine de luxe.

    Le choix de la disposition dans la première illustration m’a été dicté : je ne pouvais pas opérer une symétrie horizontale pour l’affiche contenant du texte. Si cela avait été le cas, je l’aurais fait, et l’affiche serait venue en tête d’article, le Donald en pied… Peut-être « sortant » de la page ; par choix…

    Un truc m’a amusé : la phrase « Donald était en fait orientée à l’inverse : il marchait de droite à gauche et non de gauche à » donne trois « à » superposés dans la page publiée. Je laisse, mais en édition papier, je serais intervenu : ne jamais laisser une suite de mots d’une ou deux lettres (à, du, de, le, la, je, il, &c.) s’empiler ainsi en fins de lignes. Mais c’est une autre histoire…

  2. Merci surtout de votre appréciation, Alea…
    Le problème des (très) beaux manuels de mise en pages, c’est que, parfois, ils oublient de montrer les erreurs assez communes.
    Là, compte tenu des contraintes (l’interface de Come4news n’est certes pas un logiciel professionnel pour l’impression), j’ai quand même tenté de faire « à peu près » correct.
    J’aurais sans doute dû placer la dernière illustration plus bas, soit en regard du texte en rapport.

    J’aurais pu utiliser aussi davantage (pas beaucoup plus) d’intertitres.

    C’est souvent un problème : notamment pour les trucs un peu pédagogiques, concilier le fait que l’illustration devrait être positionnée près du texte s’y rapportant (important pour les exercices, notamment de création graphique informatique) et bâtir des pages agréables à voir. Beaucoup de metteurs ou exés ne lisent pas le texte du tout, voient la double page comme une sorte de tableau mural sur lequel disposer agréablement les visuels.
    Le pire, c’est de rejeter l’illustration d’une étape en troisième page alors que le texte devant l’accompagner est en seconde page.

Les commentaires sont fermés.