7
3,5
100
216
20
Beth Tondreau
17
17
principes universels de mise en page pour l’imprimé et le Web
principes universels de mise en page pour l’imprimé et le Web
AVEC 100 EXEMPLES ET LEURS GRILLES
Cet ouvrage tout en couleurs énonce et illustre, dans un esprit universel et cosmopolite, 100 principes et bonnes pratiques de mise en page pour l’imprimé et le Web. Tous les aspects techniques sont abordés, de la disposition des blocs de texte au choix des polices, en passant par la gestion des couleurs ou l’emplacement des images. Chaque principe est illustré par une étude de cas choisie et analysée avec soin. Livres, magazines, brochures de loisirs, affiches politiques ou pages web… Tous ces exemples sont des modèles du genre, créés par de grands professionnels du monde entier (France, États-Unis, Allemagne, Japon…).
254
Les grilles de toutes les études de cas sont présentées, permettant ainsi au lecteur de les identifier et de les adapter à ses propres besoins.
est fondatrice et directrice de BTD, une agence de création graphique spécialisée dans le livre et la conception de l’identité visuelle des entreprises : logos, plaquettes, sites web. Elle enseigne actuellement les arts graphiques au Fashion Institute of Technology de New York. Traduit de l’américain par Xavier Guesnu
Beth Tondreau
100
7
principes universels de mise en page pour l’imprimé et le Web AVEC 100 EXEMPLES ET LEURS GRILLES
6699839 ISBN 978-2-10-054694-7
barbary-courte.com
100
Destiné aux maquettistes et graphistes professionnels ou débutants, 100 principes universels de mise en page pour l’imprimé et le Web est à la fois un outil de travail et une formidable source d’inspiration.
Beth Tondreau
216
www.dunod.com
3,5 17
6699839_tondreau_200.indd 1
11/05/10 10:12
17
Pour démarrer
9782100546947-Tondreau-P001-069.indd 9
01/04/2010 11:00:22
Text
Job:01118 Title: Layout Essentials (Rockport) 1ST PROOF Page:9
Sommaire 8
« La grille est l’élément le plus mal compris et le
Introduction
Pour démarrer 10
Éléments d’une grille
moins bien utilisé d’une
11
Schémas d’une grille élémentaire
12
Déterminer la grille appropriée
mise en page. Elle ne sert
13
Mettre en forme le texte
14
Hiérarchiser les informations
15
Grille et image
16
Associer grille, texte et image
17
Couleur
18
Espace
19
Rythme et fluidité
réellement que si elle découle du contenu qu’elle est destinée à héberger. » — DEREK BIRDSALL Notes on Book Design
6
n
100 principes universels de mise en page pour l’imprimé et le Web
9782100546947-Tondreau-P001-069.indd 6
01/04/2010 11:00:22
Text
Job:01118 Title: Layout Essentials (Rockport) 1ST PROOF Page:6
Utiliser les grilles
« Une grille n’est parfaitement réussie
22
Colonne unique
28
Deux colonnes
42
Trois colonnes
52
Multicolonnes
62
Modularité
72
Tableaux et graphiques
82
La couleur comme élément dominant
90
La couleur comme principe d’organisation
102
Hiérarchie horizontale
112
Quand le texte fait grille
122
Dense et fonctionnel
134
Spacieux sans être désertique
140
Sans grille apparente
148
Formes organiques
156
Grille suisse
166
Grille, interruption
174
Grille, reconstruction
180
Grille en superposition
186
Grilles et mouvement
194
Enfreindre les règles
202
Glossaire
203
Bibliographie
Making and Breaking
204
Contributions
the Grid
206
Mémo
208
Remerciements
que si, une fois tous les problèmes de texte résolus, le graphiste se démarque de l’uniformité qu’implique la structure d’une grille et utilise celle-ci pour créer une narration visuelle dynamique, à même de maintenir l’intérêt page après page. » — TIMOTHY SAMARA
9782100546947-Tondreau-P001-069.indd 7
01/04/2010 11:00:22
Text
Job:01118 Title: Layout Essentials (Rockport) 1ST PROOF Page:7
Introduction «… Mr. Rauschenberg…
U
ne grille permet d’organiser l’espace et les informations à l’attention du lecteur. Elle élabore un plan pour l’ensemble du projet.
a su imposer la grille
En outre, une grille constitue un espace d’attente pour les informations et une façon de décréter l’ordre et de le maintenir.
comme outil essentiel d’organisation de la composition. » —MICHAEL KIMMELMAN, à propos de l’importance
façon très systématique de visualiser les informations. Des décennies plus tard, les grilles ont été considérées comme monotones et ennuyeuses. Aujourd’hui, elles sont à nouveau perçues comme des outils essentiels, auxquels se fient aussi bien les professionnels béotiens en la matière que ceux aguerris par des décennies d’expérience. Chacun des 100 principes du livre existe pour fournir une aide précieuse lorsque vous créez une présentation, un système ou un site. Chacun d’eux est illustré par un
l’artiste Robert
projet conçu et publié au cours des dernières années.
New York Times, 14 mai 2008, en hommage à Rauschenberg.
n
associent à la Suisse. L’aspiration à l’ordre a conduit, dans les années 1940, à une
des grilles pour Rauschenberg. The
8
Même si les grilles sont utilisées depuis des siècles, de nombreux graphistes les
J’espère que les exemples proposés vous instruiront, vous intrigueront et vous inspireront, tout en vous invitant à garder à l’esprit l’un des préceptes essentiels de la communication : établir un lien entre le contenu d’une part, la typographie et la mise en page d’autre part.
100 principes universels de mise en page pour l’imprimé et le Web
9782100546947-Tondreau-P001-069.indd 8
01/04/2010 11:00:22
Text
Job:01118 Title: Layout Essentials (Rockport) 1ST PROOF Page:8
élémentS d’une grille
1. Connaître les composants
L
es principaux composants d’une grille sont les marges, les repères, les colonnes, les guides horizontaux, les zones spatiales et les modules.
colonneS Conteneurs verticaux où figurent le texte et
ZoneS SPatialeS
les images. La largeur et
Groupes de modules ou
le nombre de colonnes
de colonnes qui peuvent
d’une page ou d’un écran
former des zones
varient selon le contenu.
spécifiques, dédiées au texte, aux publicités, aux images ou autres informations.
moduleS Divisions séparées par
guideS
un espace régulier,
horiZontaux
grâce auxquelles la grille
Alignements qui scindent
se présente de façon
l’espace en bandes
ordonnée et répétée.
horizontales. Sans être
La combinaison des
véritablement des lignes,
modules permet de
ils constituent un moyen
créer des colonnes et
d’utiliser l’espace et
des lignes de différentes
les éléments de façon
tailles.
à guider le lecteur à travers la page.
margeS x
Zones tampon. Elles
rePÈreS
correspondent à l’espace
Facilitent la navigation
compris entre le format
du lecteur dans un
fini, petit fond (ou marge
document. Ils indiquent
intérieure) inclus, et le
l’emplacement répétitif
contenu de la page. Les
de certains éléments,
marges peuvent aussi
comme les numéros de
abriter des informations
x
page, les en-têtes et les
secondaires, telles que
pieds de page, et les
notes et légendes.
icônes.
10
n
Grilles et mise en page : 100 principes universels pour l’imprimé et le Web
Text
Job:01118 Title: Layout Essentials (Rockport) 1ST PROOF 2nd PROOF Page:10
S c h é m a d ’ u n e g r i l l e é l é m e n ta i r e
2. Apprendre les structures de base
Une grille À une
Les grilles
seule colonne est
modulaires sont idéales
généralement utilisée pour
pour gérer les informations
un texte continu, tel que
complexes que contiennent
celui d’un essai, d’un rapport
journaux, calendriers,
ou d’un livre. La page ou la
graphiques ou tableaux. Elles
double page se présente
combinent colonnes verticales
principalement sous forme
et horizontales, lesquelles
d’un bloc de texte
structurent les informations en segments.
Une grille À deux colonnes permet de mettre en page un texte abondant ou de
Les grilles
présenter différents types
hiérarchiques
d’information sous forme
décomposent la page en
de colonnes distinctes. Une
zones. La plupart des grilles
grille à deux colonnes peut
hiérarchiques comportent des
être organisée en colonnes
colonnes horizontales.
de même largeur ou de largeurs différentes. En termes de proportions, si l’une des deux colonnes est plus large, le rapport idéal est celui du simple au double.
Les grilles multicolonnes offrent une plus grande souplesse que celles à une ou deux colonnes. Elles associent plusieurs colonnes de largeur variable et sont très utilisées par les magazines et les sites web.
Schéma d’une grille élémentaire
Text
n
11
Job:01118 Title: Layout Essentials (Rockport) 1ST PROOF Page:11
Trois colonnes
23. Éviter tout encombrement
L
orsque vous créez plusieurs colonnes, il n’est pas nécessaire de remplir à tout prix le moindre espa-
ce. Il convient de conserver certaines colonnes ouvertes. Les espaces blancs orientent l’œil du lecteur sur la page et facilitent le choix de certains articles, images ou logos. Les filets de différentes graisses permettent d’organiser les informations et de leur donner un aspect percutant.
Les esquisses préliminaires procurent une impression d’espace.
Projet Magazine Good, numéro 008 Client Magazine Good, LLC Direction graphique Scott Stowell Création Open Les espaces blancs et les
Les tables des matières sont souvent difficiles à déchiffrer. Celle-ci
La page comporte cinq niveaux d’informations, clairs et faciles à lire
graphismes, plaisants et
fait fi de tout encombrement et le lecteur retrouve ainsi sans peine
grâce à une typographie ordonnée et un espace généreux.
tranchants, permettent au
son chemin à travers les offres du magazine. Les différentes tailles
lecteur une navigation plus
et graisses confèrent à la page intérêt et équilibre. Les icônes du coin
conviviale.
supérieur droit définissent un format utilisé dans l’ensemble du magazine.
46
n
Grilles et mise en page : 100 principes universels pour l’imprimé et le Web
Text
Job:01118 Title: Layout Essentials (Rockport) 1ST PROOF 2nd PROOF Page:46
Les filets et une typographie intelligemment contrôlée mettent en valeur un large éventail d’informations.
Une typographie robuste rejaillit à travers une page spacieuse en face d’illustrations tout aussi musclées.
Aux grandes idées les grands caractères ! Les lettrines signalent de façon espiègle le début d’un article et jouent sur les mots du titre. Les icônes présentées dans la page de la table des matières apparaissent selon une position régulière, dans le coin supérieur droit de la page ; seules les icônes appropriées sont affichées.
Trois colonnes
Text
n
47
Job:01118 Title: Layout Essentials (Rockport) 1ST PROOF Page:47
7
3,5
100
216
20
Beth Tondreau
17
17
principes universels de mise en page pour l’imprimé et le Web
principes universels de mise en page pour l’imprimé et le Web
AVEC 100 EXEMPLES ET LEURS GRILLES
Cet ouvrage tout en couleurs énonce et illustre, dans un esprit universel et cosmopolite, 100 principes et bonnes pratiques de mise en page pour l’imprimé et le Web. Tous les aspects techniques sont abordés, de la disposition des blocs de texte au choix des polices, en passant par la gestion des couleurs ou l’emplacement des images. Chaque principe est illustré par une étude de cas choisie et analysée avec soin. Livres, magazines, brochures de loisirs, affiches politiques ou pages web… Tous ces exemples sont des modèles du genre, créés par de grands professionnels du monde entier (France, États-Unis, Allemagne, Japon…).
254
Les grilles de toutes les études de cas sont présentées, permettant ainsi au lecteur de les identifier et de les adapter à ses propres besoins.
est fondatrice et directrice de BTD, une agence de création graphique spécialisée dans le livre et la conception de l’identité visuelle des entreprises : logos, plaquettes, sites web. Elle enseigne actuellement les arts graphiques au Fashion Institute of Technology de New York. Traduit de l’américain par Xavier Guesnu
Beth Tondreau
100
7
principes universels de mise en page pour l’imprimé et le Web AVEC 100 EXEMPLES ET LEURS GRILLES
6699839 ISBN 978-2-10-054694-7
barbary-courte.com
100
Destiné aux maquettistes et graphistes professionnels ou débutants, 100 principes universels de mise en page pour l’imprimé et le Web est à la fois un outil de travail et une formidable source d’inspiration.
Beth Tondreau
216
www.dunod.com
3,5 17
6699839_tondreau_200.indd 1
11/05/10 10:12
17