Maquette

Enseignant - formateur Denis Christine
WEB / PAO formation@inaden.org
La maquette

La maquette
Tous droits d'utilisation de ce cours est soumis à demande p. 1 / 34

La maquette
d'autorisation
La maquette
Table des matières
Partie 1 : Principes généraux.................................................................................................................................................................................... 3

Introduction........................................................................................................................................................................................................................ 3
Définition.............................................................................................................................................................................................................................. 5
Principes de base............................................................................................................................................................................................................ 5
Partie 2 : structuration du document............................................................................................................................................................. 8

La maquette........................................................................................................................................................................................................................... 9
Les marges.......................................................................................................................................................................................................................... 9
Le fond perdu.................................................................................................................................................................................................................. 11
Colonnage......................................................................................................................................................................................................................... 11
Les invariants................................................................................................................................................................................................................. 11
Les aides............................................................................................................................................................................................................................ 12
Les principes d’agencement des blocs.......................................................................................................................................................... 13
Les grilles.......................................................................................................................................................................................................................... 13
Les paragraphes........................................................................................................................................................................................................... 15
Conclusion........................................................................................................................................................................................................................... 20
Chemin de fer.................................................................................................................................................................................................................. 20
Découpage d’un document.................................................................................................................................................................................... 21
Exemples de mises en pages............................................................................................................................................................................... 22

La maquette
d'autorisation
La maquette
Partie 1 : Principes généraux :: Introduction
Partie 1 : Principes généraux
Introduction
La mise en page repose sur deux principes de base :
• La gestion de la typographie
• La gestion des blocs
Néanmoins le document n’est pas qu’une question de mise en page mais aussi d’intelligibilité de l’infor-
mation. Si la lisibilité est bien définie par la mise en page, l’intelligibilité est définie par des règles d’écri-
ture dépendant du public auquel s’adresse le document.
D’autre part, lorsque l’on communique, il est nécessaire d’être identifiable et cette identification repose
sur l’homogénéité des documents à travers l’utilisation d’une charte graphique. Celle-ci est normale-
ment prévue pour répondre à la création de tous les documents liés à une société, voire à une personne
au sein de la société. Vous pouvez ainsi, à partir d’une charte graphique donnée, établir votre variante
permettant de vous identifier.
Quoi qu’il en soit, pour établir cette charte, il est d’abord nécessaire de comprendre ce qu’est une mise
en page, quel que soit le support du document.
Tout est image
Tout ce que vous regardez en tant que document, que ce soit une page de journal, un tableau, une page
de BD, une page Web… est une image. Ces images sont de natures différentes et peuvent comporter
des zones de fonctionnalités, mais initialement, dans votre première appréciation, dans votre première
appréhension, nous sommes dans le domaine de l’image.
Selon Wikipédia (https://fr.wikipedia.org/wiki/Image), une image est : une représentation visuelle, voire
mentale, de quelque chose (objet, être vivant et/ou concept).
Dans des définitions comme celle du Larousse, on trouvera rapidement l’idée que l’image est une repré-
sentation, c’est-à-dire que l’image n’est pas la chose elle-même. « Ceci n’est pas une pipe » de René
Magritte nous informe que toute représentation d’une chose réelle n’est pas la chose elle-même, mais

La maquette
d'autorisation
La maquette
Partie 1 : Principes généraux :: Introduction
une représentation possède deux directions : le lien entre la chose et sa représentation et le lien entre la
représentation et la conscience de la chose dans l’esprit de celui qui regarde. Wittgenstein qui est le pre-
mier à avoir fait cette distinction va plus loin. Il remarque que l’image est liée au langage dans une ques-
tion anodine, mais oh combien pertinente : « quand je te dis rouge et que tu penses rouge, penses-tu le
même rouge que moi ? »
Ceci pour arriver à quoi ? Au fait qu’on ne peut jamais être certain que deux personnes qui regardent
une même image vont y voir la même chose. Plus encore, la qualité de l’image peut être jugée différente
d’une personne à l’autre. On le voit bien dans l’utilisation de la typographie. La typographie permet la
création de l’image des mots et selon les personnes, l’utilisation des polices et de leur propriété peut
être extrêmement différente. Certains vont apprécier un interlignage serré quand d’autres vont préférer
un certain espace entre les lignes. Certains vont apprécier une police à empâtement, quand d’autres
vont préférer des polices bâton.
Pour en revenir à la page Web ou à la page de journal, au tableau ou à la page de BD, tous ces documents
ont un point commun : c’est grâce à la lumière que nous les voyons et c’est en cela que tous ces docu-
ments sont des images. Nous ne voyons pas les choses directement. Chaque chose que l’on regarde est
non seulement inversée sur notre rétine, mais plus que cela, l’œil droit ne voit pas la même chose que
l’œil gauche, et plus encore, avant même cette recomposition, certains de nos pigments oculaires sont
spécialisés dans la reconnaissance des couleurs quand d’autre le sont dans celle des formes à travers
la distinction des variations de la luminosité. Tout ce que nous voyons, images ou réalités sont déjà des
représentations et nulle ne peut affirmer voir les choses pour de vrai ! Ce que nous voyons n’est pas la
réalité. Par contre, tout ce que nous voyons est composé de lumière et c’est bien là le point commun
entre la page Web et la feuille de journal.
Le maître mot d’une image est la notion de contraste et le contraste n’est pas une notion que l’on
construit, mais un ensemble de notions que l’on découvre et qui sont issues de la façon dont nous per-
cevons la lumière. Ainsi, en graphisme, la première notion à comprendre est celle de contraste et pour
la comprendre il est nécessaire d’appréhender les différentes façons dont on peut exprimer la lumière
dans les différents types de documents que l’on crée1. Ces différentes façons de créer la lumière et par
là les couleurs sont au nombre de deux : par la lumière elle-même (une page Web sur un écran) ou par de
la matière sur un support (de l’encre sur un papier). Ces différentes techniques donnent naissance à dif-
férents espaces colorimétriques qui sont des expressions de la manière que l’on a de définir la couleur.
Une autre distinction entre la mise en page Web et la mise en page Print réside dans le format. Une page
imprimée possède une dimension fixe, une page Web possède une dimension qui s’adapte en hauteur et
même, aujourd’hui, à l’aune du responsive design, en largeur. L’attitude face à la mise en page n’est donc
1 Voir cours sur la couleur

La maquette
d'autorisation
La maquette
Partie 1 : Principes généraux :: Définition
pas la même. Dans le premier cas, il est possible d’adopter une pagination multicolonne, dans le second
cas, le scroll inhérent à la page Web nécessite d’être prudent dans cette utilisation. Non qu’il soit impos-
sible d’utiliser les colonnes pour un texte, mais cette utilisation doit être réservé à des espaces réduits
afin de ne pas obliger l’internaute à remonter dans la page pour lire la suite d’un texte.
Définition
Une mise en page est une composition de blocs dans un espace défini, ces blocs pouvant comporter,
dans le cas du Print du texte, des images, des graphiques et des tableaux et dans le cas du Web ou
d’application numérique, d’autres médias comme la vidéo, des lecteurs son ou des zones d’interactivité.
Principes de base
La règle des tiers
Dans les principes de composition d’une image, que ce soit en peinture ou en photographie ou en mise
en page (maquettage), on parle souvent de la règle des tiers, c’est-à-dire du découpage du document en
trois parties égales dans le sens vertical et horizontal, ce qui partage l’espace du document en neuf
zones. On utilise alors ces zones une à une ou par partie.
Si cette façon de procéder classique donne, presque à coup

sûr, un résultat satisfaisant, il peut aussi ne pas être adapté
au contenu ou au format du document.
Il faut aussi garder à l’esprit le contraste de surface et l’utili-

sation du vide dans la mise en page. Ainsi si vous optez pour
une mise en page 2/3 1/3, vos blocs ne pourront pas être en
contact, se toucher. Il est nécessaire d’introduire des marges
internes et/ou externes à vos blocs, et selon que ceux-ci ont
un fond différent du fond du document ou non, leur contenu
ne répondra donc pas exactement à la règle.

La maquette
d'autorisation
La maquette
Partie 1 : Principes généraux :: Principes de base
D’autre part, vous pouvez aussi utilisez les proportions de 2/3

1/3, mais pas selon une répartition identique à l’image
ci-contre, mais en décalant votre zone selon un espace 1/6
2/3 1/6 et jouer avec le vide sur les bords.
La règle des tiers n’est donc pas un impératif, mais plutôt un

support à votre mise en page si vous ne trouvez pas de com-
position plus adaptée ou plus originale.
Vous pourrez aussi remarquer que dans les formats panora-

miques, la règle des tiers ne s’applique pas forcément sur l’en-
semble du document mais peu s’appliquer sur chacune des
moitiers du document.
Enfin, la règle des tiers définit ce qu’on appelle des points de

forces (appelés aussi centre).
Les points de force sont définis par le croisement des lignes

définissant les tiers de votre page. Il y a donc 4 points de force
dans une page. Les points de force sont des passages obligés
pour l’œil qui examine l’image.
Il existe une variante à ces points de force lorsque l’on coupe sa

page en deux moitiés verticale et horizontale : c’est le centre de
Points de force
la page. d’un document multipages
Le chemin visuel
Quelle que soit votre composition, l’œil est traditionnellement

habitué, en Occident, à lire de gauche à droite et de haut en
bas, et parcourt donc un document en lisant en Z en utili-
sant les croisements de la composition au tiers (voir image
ci-contre).
Cette lecture est une première appréciation du document,

néanmoins, nous savons aussi, en cas de construction en
colonne, 2/3 1/3 avec une colonne principale et une colonne
secondaire, lire indépendamment, en Z chacune des colonnes. Cette lecture en Z induit que, toujours
dans une telle construction, votre colonne principale est a priori à gauche et votre colonne secondaire

La maquette
d'autorisation
La maquette
Partie 1 : Principes généraux :: Principes de base
à droite. Néanmoins, dans le cadre d’une navigation Web ou dans certains cas où votre colonne secon-
daire doit être mise en avant, vous pouvez en intervertir l’ordre.
Le chemin visuel va aussi dépendre de la façon dont vous utilisez les polices — et notamment les titrailles
et l’alternance du texte et des images. Le placement d’images fortes peut rompre cette lecture en Z en
attirant l’œil, de même que l’utilisation de titrailles fortes dans les colonnes
L’importance des zones de repos
Dans une conception graphique, les zones de blanc sont appelées « zones de repos » parce qu’elles per-
mettent à l’œil de se reposer, afin qu’il puisse recevoir l’information tout en étant dans un état favorable
pour poursuivre la lecture et la réception de nouvelles informations. Cette utilisation des vides permet
plus d’attractivité à votre document, et une mise en valeur de certains éléments — logo, pied et entête
de page…
Pensez-le vide comme un contenant. Plus votre contenant est rempli, moins vous voyez ce qu’il y a
dedans.
Les zones de repos se distribue tout autant dans la structuration globale du document à travers les
marges que dans les espacements texte/image (habillage) que par l’interlignage et les retraits avant et
après.

La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: Partie 1 : Principes généraux :: Principes de base
Partie 2 : structuration du document

La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: La maquette :: Les marges
La maquette
Pensez votre document avant d’ouvrir votre logiciel ! N’hésitez pas à prendre un papier et un crayon pour
poser les bases de votre maquette. La maquette d’un document est caractérisée essentiellement par les
marges du document, le nombre de colonnes et leur espacement. Je le répète, pensez votre utilisation
des espaces vides, ce sont eux qui vont mettre en valeur votre contenu.
Les marges
Outre les espaces qui séparent les différentes parties de votre contenu, il est important de penser vos
marges. Celles-ci se pensent différemment selon que vous concevez votre document en page en vis-
à-vis ou non. Les pages en vis-à-vis sont les pages à la façon d’un livre. Votre édition est a priori recto
verso et comportera une reliure. On parle alors de marge en haut et en bas et de petit fond (marge côté
reliure — à droite pour la page de gauche et à gauche pour la marge de droite) et grand fond (marge du
bord — à gauche pour la page de gauche et à droite pour la page de droite). Dans le cas d’un document
relié, il est nécessaire de penser que la reliure va prendre de la place et votre petit fond va donc être plus
important que votre grand fond !
Dans le cas d’un document dont les pages ne sont pas en vis-à-vis (recto verso non relié ou recto simple,
mais aussi PDF non imprimé) on parlera de marge en haut, en bas, à gauche et à droite. Dans ce cas, on
centre le document en mettant des marges gauches et droites égales.
Si vous destinez votre document à une impression par imprimante de bureau, il est important d’avoir
à l’esprit que rare sont les imprimantes capables d’imprimer pleine page. Le plus souvent, les marges
basses de ces imprimantes sont plus importantes que les marges hautes, mais même au-delà de cette
donnée, on attribue généralement plus d’espace à la marge basse qu’à la marge haute. Globalement, les
marges naturelles d’une imprimante sont autour d’un centimètre.
Selon le type de document, vous définirez des marges plus ou moins grandes. Plus votre document est
un ouvrage de luxe, plus vos marges seront importantes. Cet ensemble de marge est nommé espace
d’empagement ou marges utiles. Les marges sont identiques dans l’ensemble du document.

La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: La maquette :: Les marges
Dimension minimale
Selon la méthode FALC, il faut utiliser des marges de 2,5 à 3 cm au moins et laissez de la place entre le
haut de votre page et l’entête et entre l’entête et le début du document. Idem pour le pied de page.
Structure des zones

1 En rouge : marge du document. L’intérieur repré-
sente la zone utile dont l’information ne doit pas
1 dépasser (hors utilisation de fond perdu pour
2 la « décoration ». Toutes les autres zones ont la
même largeur.
3 2 En vert : entête et pied de page. Ils peuvent com-
porter un rappel du titre du document, l’auteur, un
4
rappel du chapitre courant, le foliotage (pagination)
et toute information récurrente au document
3 En bleu clair : le corps du texte, ou zone principale,
ou main. Mais attention, cette partie peut néces-
siter un découpage si vous utilisez des notes de
bas de page. En effet, l’utulisation de note de bas
de page nécessite une marge supérieure pour bien
séparer les notes du contenu principal.
4 En violet : espace du texte principal différencier de
l’espace des notes de bas de page
5 En vert foncé : espace dans le main pour les notes
de bas de page. Cet espace est utilisé par le texte
principal quand il n’y a pas de note de bas de page.
Bien entendu, le main peut être structuré en

plusieurs colonnes de texte ou en colonne
5
de contenu principal et colonne de contenu
secondaire.
2
Enfin, comme dit précédemment, si le
document est relié, le grand fond étant côté
reliure, sera plus grand que le petit fond.

La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: La maquette :: Le fond perdu
Le fond perdu
Le fond perdu est une marge extérieure à votre document, le plus souvent de dimension identique de
chaque côté. Le fond perdu sert à l’imprimeur pour les impressions pleine page. Une impression pleine
page peut avoir de légers décalages. Si vous avez un aplat de couleur ou une image de fond et que vous
ne faites dépasser celui-ci ou celle-ci du bord de votre document, vous risquez en cas de décalage de
l’impression ou de la coupe de votre document d’avoir un liseré blanc. Le fait de faire dépasser votre
élément de votre document permet d’éviter ce problème. En règle générale, c’est l’imprimeur qui vous
impose la taille du fond perdu selon son matériel et mode d’impression.
Colonnage
Vous devez enfin déterminer le nombre de colonnes de vos blocs. Vous n’êtes pas obligé d’appliquer le
même nombre de colonnes à tous vos blocs sur toutes vos pages. Par contre vous devez faire en sorte
que vos colonnes respectent des proportions identiques dans leur taille et une largeur d’espacement
fixe.
Vous devez donc, pour vos blocs déterminer une grille de largeur fixe (par exemple 5 cm) et un espace-
ment entre les colonnes de 0,5 cm. Vos colonnes pourront donc être de 5, 10 ou 15 cm, toujours espa-
cées de 0,5 cm. On parle de gouttière pour définir l’espacement entre les colonnes.
Les invariants
Les invariants de présentation dans le document sont destinés à faciliter la lecture. Il s’agit donc de défi-
nir de façon permanente la façon dont doivent se présenter les titres, sous-titres, corps du texte, entêtes
et bas de page de votre document et de s’y tenir.
Tout ce qui concerne la gestion de la police est défini dans les feuilles de styles dont nous parlerons plus
loin.
Les entêtes et pieds de pages servent à disposer des éléments permettant au lecteur de se repérer
dans votre document. Ils comportent généralement le nom de l’auteur, la pagination, rappel du titre du
document et/ou du chapitre en cours, le copyright… Ne négligez pas ces éléments qui participent à la
structure de votre document et à l’aide à la lecture.

La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: La maquette :: Les aides
La pagination
Lorsqu’un document comporte plusieurs pages, celles-ci doivent être numérotées.
La première page peut ne pas être numérotée ; le numéro 2 demeure toutefois attribué à la deuxième
page.
Quand un document est imprimé recto et verso, l’usage consiste à marquer le bas de page du recto par
trois points consécutifs, par un pictogramme ou par tout autre procédé.
Les aides
Outre les invariants, on peut envisager plusieurs types d’aides à la lecture.
• Le sommaire : c’est une présentation résumée de la structure de votre contenu à travers ces
grands titres. Il se place en début de document.
• La table des matières : c’est la structure complète de votre document
• L’index : c’est le repère des notions abordées dans votre document à l’aide de mots-clés renvoyant
aux différentes pages qui les abordent.
Vous pouvez aussi pour appuyer sur certaines notions ou apporter des éléments complémentaires qu’il
est difficile d’intégrer dans le flux du discours en mettant de courts textes en encadrés.
Enfin, éviter de séparer les tableaux, les graphiques et les images (dans la mesure du possible) des
pages qui abordent les données auxquelles ils se rapportent. Si vous devez les séparer, indiquez-le dans
votre texte (page suivante…) et indiquez clairement dans le titre ou le commentaire de votre élément à
quoi il correspond dans le texte.
Si les notes de bas de page sont traditionnellement en bas de page, il arrive qu’on les trouve en fin d’ou-
vrage. Cela apporte une difficulté à la lecture. Les notes de bas de page doivent être clairement séparées
du texte tant dans la mise en page que dans la fonte utilisée.

La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: La maquette :: Les principes d’agencement des blocs
Les principes d’agencement des blocs

Il existe plusieurs principes d’agence des blocs. Le premier principe est la cohérence : un bloc similaire à
un autre doit avoir la même fonction dans l’information qu’il porte. La cohérence est le premier principe
de compréhension de votre document et c’est aussi vrai dans la feuille de style que dans l’agencement
et la forme des blocs.
La cohérence, ou autrement dit l’unité ou l’harmonie d’une mise en page peut s’exprimer de différentes
façons et doit outre son homogénéité avoir du rythme. Le rythme va naître des ruptures dans la conti-
nuité ! C’est en effet à travers la continuité dans l’utilisation de formes graphiques et typographiques
différentes, portants des informations de même nature que vous allez pouvoir, grâce aux différences
qu’elles ont entre elles, apporter des ruptures dans cette continuité.
On parlera aussi d’équilibre d’une mise en page. Cet équilibre peut se faire de trois façons :
• Par la symétrie
• Par l’asymétrie
• Par la circularité
Enfin, en dehors de la hiérarchisation du

contenu à travers ses titres, il existe trois
façons de présenter un contenu hiérarchisé :
• Par arborescence
• Par relation parent/enfant
• Par succession d’éléments de tailles
différentes
On ne répètera jamais assez, le principe

d’agencement des blocs est extrêmement
sensible au vide que vous utilisez pour les séparer, les relier, et les habiller (marges intérieures en cas
d’utilisation de fonds colorés ou texturés).
Les grilles
La grille est un support à la mise en page facilitant le placement des blocs. Son rôle est d’assurer des
rapports de proportion toujours juste.

La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: La maquette :: Les grilles
On attribue à Josef Müller-Brockmann la mise en place des principes modernes de l’utilisation des grilles.
Le premier principe de la grille est le découpage en colonne. Ce découpage se fait sur toute la page ou
peut être différencié par « zone ».
Votre grille va dépendre de plusieurs facteurs :
• Le format de votre document

• Le fait ou non d’avoir des pages en vis-à-vis
• Le rapport d’importance (quantité) entre vos textes et vos images et par extension le type de conte-
nu (infographie, information textuelle, album d’images…)
• La feuille de style et notamment la taille, l’interlignage et les espaces avant et après de votre para-
graphe standard
• Le type d’édition sur lequel vous travailler (livre, journal, magasine, dépliant…)
• Le type de support Web ou Print
Pour définir les colonnes de votre grille, il est nécessaire de déterminer :
• La largeur des colonnes (ce qui va impacter le nombre de colonnes par page)
• Les gouttières qui sont les zones séparant les colonnes et permettant la circulation du blanc (se
définit par une largeur).
Cette détermination de la grille est relative au positionnement des blocs, néanmoins, il est aussi possible
de déterminer une grille d’une autre façon, et c’est ce que fait InDesign. Il permet même de déterminer
2 types de grilles :
• La grille de ligne de base : c’est-à-dire la façon dont on veut que le texte se comporte par rapport
à son premier élément
• La grille du document : celle-ci étant défini par :
Ǔ Ses pas verticaux et horizontaux : c’est-à-dire la largeur de la grille
Ǔ La subdivision de ces pas : c’est-à-dire le nombre de « sous-colonnes » divisant chaque pas de la grille.
La détermination des grilles nécessite donc une manipulation arithmétique des largeurs de la subdivi-
sion par rapport à la largeur de la page.
Spécificité de la grille Web
Le colonnage Web possède une spécificité. Les standards décompose la page en 12 colonnes de
8,3333%. Néanmoins, lorsque l’on prépare une maquette Web ou un wireframe, il n’est pas possible de
déterminer des colonnes en pourcentage et l’on est obligé de les déterminer en pixel. Aussi, on se base
La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: La maquette :: Les grilles
sur un multiple de 12 simple pour faciliter la mise en place de la maquette, soit 1200 px ou 1320 px
pour la version desktop, la version smartphone étant dans la plupart des cs sur une seule colonne, le
problème de ce découpage ne se pose pas dans les même termes.
On trouve selon les logiciels de wireframing ou de travail deux attitudes (ou paramétrages) possibles.
• 12 colonnes avec des gouttière à la façon d’un colonnage print

• 12 colonnes sans gouttière, où l’on va paramétrer les marges intérieures de colonnes pour les-
quelles il est nécessaire d’avoir une séparation franche.
Du point de vue HTML, on est plutôt sur la seconde option, néanmoins, XD se paramètre de la première
façon.
Les lignes vont déterminer des espaces spécifiques à des thématiques. Principalement utilisées sur les
home-pages, les lignes en Web possèdent une hauteur définie par leur contenu, ce qui n’est pas néces-
sairement le cas en Print.
Pour bien comprendre cette grille, se reporter aux pages :

• https://www.booglit.com/bootstrap-conteneur-et-grille/
• https://www.supinfo.com/articles/single/2282-bootstrap-fonctionnement-grille-bp.
• https://openclassrooms.com/fr/courses/1885491-prenez-en-main-bootstrap/1886111-
• une-grille
• https://tutowebdesign.com/mise-page-bootstrap.php
Il existe d’autres frameworks responsives plus ou moins enrichis de composant divers, mais tous basés
sur le système de grille parmi lesquels :
• https://foundation.zurb.com
• http://www.responsivegridsystem.com
• http://getskeleton.com
• https://www.knacss.com
• https://purecss.io

La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: La maquette :: Les paragraphes
Les paragraphes
Les paragraphes ont une importance capitale dans la conception de la mise en page, car ce sont princi-
palement eux qui vont établir la hierarchisation de l’information et sa structure.
Un paragraphe est composé d’une ou plusieurs lignes dans un même bloc de texte. En traitement de
texte, un paragraphe est souvent matérialisé par la présence du symbole ¶ (pied de mouche) à la fin de
celui-ci. À chaque idée essentielle correspond un ou plusieurs paragraphes. Dans la mesure du possible,
on évite de couper un paragraphe entre deux pages. Dans le cas contraire, on laisse au moins deux
lignes sur la première page et deux lignes sur la suivante afin d’éviter la présence :
• d’une ligne veuve : première ligne d’un paragraphe en bas de page ;

• d’une ligne orpheline : dernière ligne d’un paragraphe en haut de la page suivante.
Le paragraphe standard (ou corps de texte)
On définit avant toute chose le paragraphe standard ou corps de page. C’est le paragraphe qui comporte
le texte et qui est le plus utilisé. Lorsque l’on définit le paragraphe standard, on cherche à savoir com-
bien de type de paragraphe vont être plus petit afin de déterminer la taille minimale du corps de texte.
Pour rappel, la méthode FALC préconise une taille de 12 pt minimum, et plutôt 14 pt dès lors que l’on
s’adresse à des personnes présentant un risque de difficulté de lecture.
N’oubliez pas de faire en sorte que vos paragraphe aient un espacement supérieur à l’interlignage afin
de bien se dissocier les uns des autres.
L’alignement est un des critères principal de la mise en forme du paragraphe standard. Parmi les diffé-
rentes possibilité on trouve :
• bloqués à la marge de gauche («à l’américaine») Ce n’est pas par hasard si Amsterdam est
surnommée par beaucoup la « Venise du Nord ».
avec ou non justification à droite
• avec un retrait positif (ou renfoncement) : la pre- Ce n’est pas par hasard si Amsterdam est
mière ligne est en retrait vers la droite (appelé retrait surnommée par beaucoup la « Venise du Nord ».
d’alinéa, retrait première ligne ou indentation)
• avec un retrait négatif (ou débord) : la première ligne Ce n’est pas par hasard si Amsterdam est
surnommée par beaucoup la « Venise
dépasse vers la gauche le reste du paragraphe
du Nord ».
• bloqués en indentation : tout le paragraphe est en Ce n’est pas par hasard si Amsterdam est
retrait vers la droite. surnommée par beaucoup la « Venise du
Nord ».

La maquette
d'autorisation
La maquette
On trouve bien entendu aussi les alignement à droite (justifié ou non), au centre (justifié ou non), et la
justification totale (toute les ligne sont alignées à droite et à gauche).
Les énumérations
Un autre paragraphe est important dans la mise en page : les paragraphe d’énumération. Les énuméra-
tions servent à mettre en valeur des listes d’informations. Il convient donc de les dégager du texte qui
les précède de celui qui les suit, et de recourir à des procédés de mise en page (paragraphe en retrait ou
centrage) et à l’utilisation de numéros ou de signes de classification (parfois appelés « puces »).
La deuxième ligne de chaque élément de l’énumération (et, le cas échéant, les suivantes) peuvent être
placées :
Parmi les trésors à découvrir :
• à la marge, – le musée historique où sont exposées

les plus belles œuvres ;
• au retrait de l’énumération, en se plaçant,
– le musée historique où sont exposées
• sous la première lettre de la première ligne,
les plus belles œuvres ;
• avec un léger retrait supplémentaire. – le musée historique où sont exposées
les plus belles œuvres.
L’ensemble pouvant ou bien être en retrait global à gauche par
rapport au pargraphe standard, ou bien être aligné sur la même marge à gauche.
À la fin de chaque élément la présence d’un signe de ponctuation n’est pas systématique (par exemple
dans un document publicitaire, ou un ordre du jour...). Un point final peut néanmoins être placé. S’ils sont
utilisés, les signes de ponctuation sont choisis en fonction de la structure syntaxique (membres de
phrase ou phrases indépendantes). C’est le signe de ponctuation qui déterminera l’utilisation d’une
majuscule en début d’énumération. Néanmoins, en cas d’abscence de celui-ci, on peut choisir de mettre
une majuscule ou non en début des items de l’énumération sauf si ceux-ci sont des phrases à part
entière. Dans ce cas, on commencera par une majuscule.
Il peut s’agir :
On fait en sorte que l’espace avant et après l’ensemble des items
– d’une panne résultant de l’usure du
soit supérieur à l’interlignage. Selon que ceux-ci sont sur une ou matériel,
plusieurs ligne, on adaptera les espaces avant et après enrte les – d’une malveillance due à une volonté
items. Ainsi, dans le cas d’une énumération dont les items auront de nuire,
plusieurs ligne, on se retrouvera dans la configuration suivante – d’une erreur humaine sans intention
de nuire
(voir ci-contre).
Selon le cas, les sanctions ne seront
pas les mêmes.

La maquette
d'autorisation
La maquette
Lorsque vous utilisez des énumération comportant des données numérique vous devez veillez à ce que
les mentions chiffrées soient :
• séparées nettement du texte auquel elles se rapportent – un pantalon 1 250 F

– une veste 560 F
• alignées par rapport à l’unité
Pour aligner sur l’unité, selon que les nombres ont une virgule ou pas, on utilise une tabulation décimal
(pour les chiffres à virgule) ou une tablulation à droite (pour ceux qui n’en n’ont pas).
On ne met pas de ponctuation après un symbole ou un nombre en fin de ligne, y compris pour la dernière
ligne.
La phrase d’introduction d’une énumération ne doit pas terminer une page et le dernier élément d’une
énumération ne doit pas être reporté seul à la page suivante.
Titraille
On parle de titraille pour indiquer les titres et sous titre qui permettent la subdivision d’un document.
Le soulignement des titres et sous-titres est à éviter.

La maquette
d'autorisation
La maquette
Les titres
Un titre doit être mis en valeur grâce à l’un ou plusieurs des procédés offerts par le logiciel (graissage,
augmentation de la taille des caractères, mise en grandes ou petites capitales, changement de police
de caractères...).
Un titre n’est pas suivi d’un signe de ponctuation, sauf s’il s’agit d’une interrogation ou d’une exclamation.
Si, en raison de sa longueur, le titre est coupé automatiquement par le logiciel, il convient d’insérer un
retour à la ligne afin de le couper logiquement. autrement dit on évite d’utiliser des césures automa-
tiques dans un titre. De même, on préfèrera un alignement à gauche qu’une justification.
Lorsqu’un titre comporte une partie complémentaire, celle-ci doit être présentée de façon à laisser toute
son importance à la partie principale.
Les sous-titres
Les sous-titres correspondent aux idées-clés du paragraphe qu’ils introduisent. Il convient donc de les
mettre en valeur afin de permettre au lecteur de visualiser la structure générale du texte.
Les sous-titres doivent être :
• dégagés du texte (grâce à un interlignage augmenté)

• présentés de façon identique s’ils sont de même niveau
• différenciés les uns des autres selon leur niveau et mis en évidence en respectant une gradation
dans les procédés de mise en valeur
• suivis d’un signe de ponctuation s’il s’agit d’une interrogation ou d’une exclamation.
Si d’autres signes de ponctuation sont utilisés, ils doivent être uniformes pour les sous-titres de même
niveau.
Pour différencier les sous-titres, on peut recourir à :
• la mise en page (centré, à la marge ou en retrait)

• des signes de classification différents :
Ǔ les lettres majuscules
Ǔ les chiffres arabes
Ǔ les lettres minuscules
Ǔ le tiret, le point ou un autre signe (losange, carré...).
Lettres et chiffres peuvent être suivis d’une ponctuation logique uniforme (point ou tiret). Un espace au

La maquette
d'autorisation
La maquette
moins doit être laissé entre le signe de classification et le début du texte qui suit. Dans les documents
justifiés à droite, cet espace doit être un espace imposé (l’absence de possibilité de dilatation assure le
parfait alignement de la première lettre de chaque élément de l’énumération).
Cas particulier de la classification décimale :
Les chiffres arabes doivent seuls être utilisés. Les chiffres correspondant à la même classe ou sous-
classe sont alignés verticalement.
Les chiffres peuvent être séparés par un point et le cas échéant par un tiret (seulement en première
position).
• la diversité des caractères (type, taille)
• tout autre procédé spécifique au logiciel utilisé (gras, italique...)
Les tableaux
La présentation de données sous forme de tableau a pour objectif l’accès facile à une information.
Un tableau inséré dans un document constitué principalement de textes est présenté de préférence
en format «portrait». Cependant, il peut être nécessaire de présenter un tableau en format «paysage»
lorsque celui-ci comporte de nombreuses colonnes.
Pour donner plus de lisibilité à un tableau, on peut choisir d’alterner une couleur de fond aux lignes du
tableau, néanmoins, ces couleurs doivent être compatible avec une couleur unique de police pour toutes
les lignes.
De la même façon on peut identifier par une couleur de fond et une fonte particulière les lignes et/ou
colonnes (dans le cas d’un tableau à double entrées) de titre.
En règle général on donne un titre à un tableau et on fait sorte que cet ensemble titre du tableau/tableau
soit dans une bonne lisibilité par rapport à ce qui l’entoure. À noter que dans le cas d’un tabeau isolé du
reste du texte, on fais en sorte de centrer verticalement et horizontalement le tableau dans la page.
À noter que les lignes de contenu d’un tableau peuvent ne pas être des lignes du tableau lui-même mais
des paragraphes ne contenant qu’une ligne (voir exemple ci-dessous). Dans ce cas, on peut utiliser des
points de conduite pour faciliter la lecture.
Désignation Référence Prix unitaire

XXXXXX................... XY 12,50
XXXXXXXXX............ ZY 42,10
XXXXXX................... PV 5,50

La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: Conclusion :: Chemin de fer
Conclusion
Chemin de fer
Lorsque l’on doit travailler un document comportant un grand nombre de
Couverture
pages, il est nécessaire d’établir les différents types de pages, et selon l’impri-
meur, il faudra travailler en cahier d’un certain nombre de pages, le plus sou- 1
vent un multiple de 8, ce qui nécessite de faire un plan global de l’ouvrage. Ce
plan global est le chemin de fer.
Belle page Sommaire
Le chemin de fer est une visualisation de l’ensemble des pages d’un document
2 3
avec leur type et la définition simple de leur contenu ainsi que le numéro de la
page (voir exemple ci-contre). On peut éventuellement, dans le cas d’un docu-
Partie
ment comportant des pages couleur et des pages noir et blanc indiquer le type Belle page
de page pour l’impression. Ainsi, dans le cas d’une impression en cahier, cela L’équipe
permettra d’identifier les cahiers nécessaires à l’impression et notamment de 4 5

déterminer les cahiers couleur des cahiers noir et blanc.
Article Article
Cela permet aussi de visualiser les différents types de pages et donc les dif-
L’équipe L’équipe
férents gabarits qu’il conviendra de mettre en place pour la réalisation du
6 7
document.
Article Publicité
Dès lors que vous travaillez sur un document complexe, multipage, compor-
tant un grand nombre de pages (au-delà de 24 pages par exemple), il est for- L’équipe Danone
tement recommandé de mettre en place un tel chemin de fer afin de visualiser 8 9

l’ensemble du document. Cela permet aussi, lorsque les gabarits sont posés
Partie
de connaître le nombre de caractères maximal par page et donc de déterminer Belle page
la longueur des contenus, sachant que selon la titraille et la présence ou non La société
de photos et illustrations, voire de tableaux, ce nombre de caractères peut 10 11

changer.
Article Article
C’est important dans la mesure où une impression en cahier ne permet pas, ou
La société La société
du moins pas facilement, d’ajouter ou de retirer des pages. Il convient donc de
12 13
bien étalonner son contenu en fonction de cela.
À noter qu’Excel se prête particulièrement à la mise en place d’un chemin de fer.

La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: Conclusion :: Découpage d’un document
Découpage d’un document

Il est rare que sur un gros document, on travaille sur un seul fichier, et il est donc nécessaire de bien éta-
blir le plan des fichiers qui seront utilisés. En règle générale, on distingue au moins deux fichiers :
• La couverture/4e de couv
• Le contenu principal
Le contenu principal pouvant lui-même être décomposé en plusieurs documents. le chemin de fer
permet aussi, dans ce cas, de repérer le nombre de cahiers que ces documents vont couvrir afin de
visualiser si tout est en ordre pour la composition finale.
Les gabarits
N’oubliez pas de déterminer les pages types d’un document afin de mettre en place les gabarits permet-
tant d’établir les invariants pour chaque type de page.
Pour rappel, un gabarit est une structure de page avec tout ce qui est fixe dans ce type de page (entête,
pied de page, foliotage, utilisation de variables pour report des titres…).
Feuille de style
La feuille de style est ce qui permet une homogénéisation du document et des différents documents
entre eux. Elle appartient à l’identité graphique (voir cours sur la charte graphique). Elle se décompose le
plus souvent en styles de caractère (relatif à une sélection de caractère dans un paragraphe) et en style
de paragraphe (relatif à la façon de formater un type de paragraphe entier).
Il est important, pour ne pas dire primordial de travailler à partir de feuilles de style, le formatage « à la
volée » d’une sélection de caractères ou d’un paragraphe ne devant être utilisé que très ponctuellement.

La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: Conclusion :: Exemples de mises en pages
Exemples de mises en pages2
2 Hormis le premier exemple, les exemples suivants ont été pris sur Pinterest

La maquette
d'autorisation
La maquette

La maquette
d'autorisation
La maquette

La maquette
d'autorisation
La maquette

La maquette
d'autorisation
La maquette

La maquette
d'autorisation
La maquette

La maquette
d'autorisation
La maquette

La maquette
d'autorisation
La maquette

La maquette
d'autorisation
La maquette

La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: Méthodologie :: Les fichiers
Méthodologie
Les fichiers
Organisation
Le premier point important est l’organisation des fichiers. Dans l’absolu, vous pouvez vous organiser
comme vous voulez, mais certains points sont importants à retenir. Ce ne sont là que des conseils, sauf
pour ce qui est des images.
Ayez un dossier par projet et prenons pour exemple un projet de communication qui allie Web et Print.
Dans votre dossier projet subdiviser par type de document en créant des dossiers :
• Documentation : tout ce qui est relatif à la documentation que votre commanditaire vous fournit.
Cela peut aller de sa plaquette, à des documents techniques, des rapports… mais aussi les notes
que vous prenez lors des briefs. N’hésitez pas à subdiviser ce dossier et, notamment à isoler dans
un dossier séparé les éléments de votre charte graphique
• Texte : tous les textes qui vont être travaillés en vue d’être utilisés pour la publication. Vous pou-
vez alors subdiviser ce dossier en sous-dossiers brut (les textes sans formatage — en .txt, tapé au
kilomètre) Web (leur traitement avec titraille et leurs différentes versions et corrections) et Print
(idem)
• Media : avec les sous-dossiers images, vidéo, son, 3D, animation… bref des sous-dossiers par type
de média. Votre dossier image doit être structuré de la façon suivante :
Ǔ Natif (où vous mettez les fichiers que vous recevez, achetés, récoltés…). Ces images doivent rester dans
leur format, leur taille et leur traitement d’origine. C’est pour vous non seulement la preuve des fichiers
de base que vous avez eus en cas de conflit, mais aussi la possibilité de toujours revenir au fichier d’ori-
gine en cas de soucis avec une image.
Ǔ PSD, c’est le dossier dans lequel vous mettez vos fichiers Photoshop en gardant tous les calques que
vous avez utilisés pour les composer. Ces fichiers sont en RVB.
Ǔ Web, que vous pouvez éventuellement décomposer en JPG, GIF, PNG-8 et PNG-24 qui sont les formats
des images sur le Web.
Ǔ Print, avec éventuellement une subdivision PSD, TIFF, JPG et EPS comportant vos images aplaties en
CMJN pour l’import dans InDesign.
Ǔ Vecto, le dossier comportant vos fichiers vectoriels (Illustrator) que vous pouvez éventuellement dé-
composer en sous-dossiers natif et vectorise dans le cas où vous avez vectorisé vos textes.

La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: Méthodologie :: Les fichiers
• Print : c’est le dossier où vous allez ranger vos fichiers InDesign que vous pouvez ranger par type
de projet.
• Web : ce dossier contient, si vous le faites, ou si vous les recevez ou devez les stocker, les fichiers
de type Web (page HTML, fichier CSS, sauvegarde de BDD…). Si vous devez avoir en local une co-
pie du site, mettez-le dans un dossier à part.
• Admin : éventuellement, vous pouvez ranger dans le dossier du projet tous les éléments adminis-
tratifs qui le concernent, mais vous pouvez aussi avoir un dossier client avec tout cela indépen-
damment du dossier de production… ce que je vous préconise d’ailleurs.
¨ Dans chacun de ces dossiers de base, vous pouvez, avant d’effectuer la subdivision en sous-dos-
siers de genre, avoir des sous-dossiers par projet (par exemple pour le Print, plaquette, flyer,
fiches… ou pour le Web, site, reseau_sociaux, pub…).
Nommage
Le deuxième point, qui n’est pas aussi simple qu’on pourrait le croire, est celui du nommage des fichiers.
S’il est préférable de garder les noms par défaut des fichiers qu’on vous communique ou que vous ache-
tez pour pouvoir y faire référence.
Surtout pour vos médias et pour les fichiers relatifs au site Web, il est important d’avoir un système de
nommage.
Tout ce qui doit être exploité sur le Web doit être nommé sans espace dans le nom et sans caractère
accentué.
Ainsi, un fichier qui s’appelle Le titre de mon fichier doit être nommé :
• le_titre_de_mon_fichier
• LeTitreDeMonFichier
Si vous intégrez un rubricage, vous pouvez utiliser une nomenclature du type :
• NomDeRubrique-le_titre_de_mon_fichier
Ou par numérotation :
• NomDeRubrique-image1
• 1— img1 (soit rubrique 1, image 1)
C’est à vous de déterminer ce qui vous convient le mieux.

La maquette
d'autorisation
La maquette
Partie 2 : structuration du document :: Méthodologie :: Le déroulement de la production
Le déroulement de la production
N’ouvrez jamais de logiciel avant d’avoir une idée claire de ce que vous devez faire ! C’est contre-produc-
tif. Accordez-vous le temps de la réflexion.
Vous devez en premier prendre le brief du commanditaire. Que veut-il, à qui s’adresse-t-il, de quoi parle-
t-il ? Une fois que vous avez ce brief, faites-en un compte-rendu et faites valider ce compte-rendu.
Autrement dit, assurez-vous non seulement d’avoir bien compris la problématique, mais aussi que votre
commanditaire l’a bien exprimée !
Une fois que cela est validé, préparer votre réponse à la problématique et proposer une étude présentant
cette réponse. Faites là valider ! Tant que vous n’avez pas de validation (et même si vous pouvez avoir
une certaine souplesse), n’entamez pas le travail.
Entrez en production et faites valider les étapes importantes.

La maquette
d'autorisation

Maquette

Transféré par

Informations du document

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Maquette

Titre original :

Transféré par

Droits d'auteur :

Enseignant - formateur Denis Christine

WEB / PAO formation@inaden.org

Tous droits d'utilisation de ce cours est soumis à demande p. 1 / 34

Table des matières

Partie 1 : Principes généraux.................................................................................................................................................................................... 3

Partie 2 : structuration du document............................................................................................................................................................. 8

Tous droits d'utilisation de ce cours est soumis à demande p. 2 / 34

Partie 1 : Principes généraux

• La gestion des blocs

Tout est image

Tous droits d'utilisation de ce cours est soumis à demande p. 3 / 34

1 Voir cours sur la couleur

Tous droits d'utilisation de ce cours est soumis à demande p. 4 / 34

La règle des tiers

Si cette façon de procéder classique donne, presque à coup

Il faut aussi garder à l’esprit le contraste de surface et l’utili-

Tous droits d'utilisation de ce cours est soumis à demande p. 5 / 34

D’autre part, vous pouvez aussi utilisez les proportions de 2/3

La règle des tiers n’est donc pas un impératif, mais plutôt un

Vous pourrez aussi remarquer que dans les formats panora-

Enfin, la règle des tiers définit ce qu’on appelle des points de

Les points de force sont définis par le croisement des lignes

Il existe une variante à ces points de force lorsque l’on coupe sa

Quelle que soit votre composition, l’œil est traditionnellement

Cette lecture est une première appréciation du document,

Tous droits d'utilisation de ce cours est soumis à demande p. 6 / 34

L’importance des zones de repos

Tous droits d'utilisation de ce cours est soumis à demande p. 7 / 34

Partie 2 : structuration du document

Tous droits d'utilisation de ce cours est soumis à demande p. 8 / 34

Tous droits d'utilisation de ce cours est soumis à demande p. 9 / 34

Structure des zones

Bien entendu, le main peut être structuré en

Tous droits d'utilisation de ce cours est soumis à demande p. 10 / 34

Tous droits d'utilisation de ce cours est soumis à demande p. 11 / 34

Lorsqu’un document comporte plusieurs pages, celles-ci doivent être numérotées.

• La table des matières : c’est la structure complète de votre document

Tous droits d'utilisation de ce cours est soumis à demande p. 12 / 34

Les principes d’agencement des blocs

Enfin, en dehors de la hiérarchisation du

On ne répètera jamais assez, le principe

Tous droits d'utilisation de ce cours est soumis à demande p. 13 / 34

Votre grille va dépendre de plusieurs facteurs :

• Le format de votre document

Pour définir les colonnes de votre grille, il est nécessaire de déterminer :

Spécificité de la grille Web

• 12 colonnes avec des gouttière à la façon d’un colonnage print

Pour bien comprendre cette grille, se reporter aux pages :

Tous droits d'utilisation de ce cours est soumis à demande p. 15 / 34

• d’une ligne veuve : première ligne d’un paragraphe en bas de page ;

Le paragraphe standard (ou corps de texte)

Tous droits d'utilisation de ce cours est soumis à demande p. 16 / 34

• à la marge, – le musée historique où sont exposées

Tous droits d'utilisation de ce cours est soumis à demande p. 17 / 34

• séparées nettement du texte auquel elles se rapportent – un pantalon 1 250 F

Le soulignement des titres et sous-titres est à éviter.

Tous droits d'utilisation de ce cours est soumis à demande p. 18 / 34

Les sous-titres doivent être :

• dégagés du texte (grâce à un interlignage augmenté)

Pour différencier les sous-titres, on peut recourir à :

• la mise en page (centré, à la marge ou en retrait)

Tous droits d'utilisation de ce cours est soumis à demande p. 19 / 34

Désignation Référence Prix unitaire

Tous droits d'utilisation de ce cours est soumis à demande p. 20 / 34

permettra d’identifier les cahiers nécessaires à l’impression et notamment de 4 5