# data[].attributes.body
Blog intéressant pour ce qui touche à la typographie et à la mise en page.

# data[].attributes.attachment_link.readable_text
j'avais déjà publié un billet assez complet sur les grilles de mise en pages papier ici. Mais juste de vous indiquer ce site de calcul ...de colonnages et d'espaces verticales et horizontales directement en ligne. (via le blog de http://www.mariepierroy.com/)

_

C'est Josef Müller Brockmann
qui a jeté les bases
d'une explication
détaillée sur le sujet.

L'histoire des grilles de mise en page se confond aisément avec celle de la mise en scène typographique depuis l'invention de l'alphabet moderne par les phéniciens quelques 700 ans avant JC.

Johannes, le grand Gutenberg, inventeur de la lettre mobile et "inter-active" en plomb et antimoine, utilisait déjà deux colonnes dans sa bible en 42 lignes au XVe siècle. Sans doute que les imprimeurs avaient saisi assez tôt la nécessité de renvoyer le lecteur à la ligne lorsque la ligne dépassait quelques 40 signes. De fait les études sur le confort de la lisibilité donnent un variable assez large, cela va de 30-40 signes jusqu'à quelques 60 caractères par ligne. Ce qui correspond en somme à la largeur d'une colonne unique dans un courrier composé en corps 12.

Le développement des formats de la presse, bien plus gigantesques que ceux du livre ont posé rapidement le problème de l'organisation des pages. Non seulement pour des raisons de confort pour la lecture mais également pour la gestion des espaces pour la Réclame, puis plus tard de la Publicité. L'organisation en colonne est donc née fin du XVIIIe siècle, alors que Marat immergé dans sa baignoire ensanglanté participait à la naissance de la presse révolutionnaire (l'Ami du Peuple).

À l'heure où je vous parle cette organisation n'est plus contestée et participe non seulement à la qualité de la lecture des journaux, mais également et paradoxalement à une codification, à une architecture sémantique de la mise scène de la presse quotidienne. Autrement dit, lorsqu'un journal se crée, ou se relift, il n'est pas seulement de bon ton de l'organiser en grille et colonne, pour faciliter sa lecture, mais de lui donner une forme graphique qui l'installe dans le paysage codifiée d'une presse séculaire.

Vous invite donc à découvrir ces quelques "extracts" des pages de l'ouvrage de Josef Müller Brockmann qui nous expliquent le fonctionnement et la structuration d'une page (d'édition ou de presse), livre que je ne saurais que trop vous recommander de vous procurer sur les sites d'Amazone ou de l'éditeur. Brockmann prend le contre-pied d'Hermann Zapf, qui explique par l'exemple et une pratique de l'édition héritée de la plus grande tradition. Ici, le graphiste-professeur, d'origine suisse énonce les règles strictes et quasi mathématiques de l'organisation d'une page. Architecture et architexture comme je l'ai déjà souligné plusieurs fois cohabitent pour ordonner et donner à lire... (suite du billet dans la journée).

L'intérêt de cet ouvrage est d'aligner page après page, de manière exhaustive les variations de structures verticales et horizontales, de montrer comment les blancs doivent dans chaque cas s'organiser, et surtout d'insister sur la texture typographique qu'engendrent les solutions de découpage. Corps et interligne sont au centre de ces réflexions pragmatiques... vous réduisez la colonne, le nombre de signe par ligne doit suivre homothétiquement donc le corps doit diminuer. L'interlignage de même, participe de la lisibilité des colonnes et Brockmann donne les clés de ces variations.

© peter gabor | directeur e-artsup
Signaler ce contenu comme inapproprié
À propos de peter gabor

Biographie

peter gabor
Graphic Designer
Teaching and Research

* Former :
* Director of e-artsup (2008-2013)
* First Award of Club des Directeurs artistiques in 2013,
* 3 First Awards from Génération Pub un 2013.

* Graphic & Type Designer freelance (13 years)
* Teaching magazine layout and typography at ESAG/Penninghen for 12 years (1975-1987)
* co-founder and c.e.o. typogabor from 1973-1994.
* Silver and Gold Awards from TIA (Typographic International Association).
* 4 Type Faces designed for Libération Newspaper (1994).

* Sociologie at Descartes University from 1969-1972.
* Languages: French, English, Hungarian.

# data[].attributes.attachment_link.title
Grilles de Mise en Page | typoGraphie Web et Papier

# data[].attributes.attachment_link.description
j'avais déjà publié un billet assez complet sur les grilles de mise en pages papier ici. Mais juste de vous indiquer ce site de calcul ...de colonnages et d'espaces verticales et horizontales directement en ligne.

# data[].attributes.attachment_link.readable_text
Que ce soit pour le design graphique d'une publicité, d'une couverture ou de la mise en pages d'un document, d'un site Web ou de tout autre visuel, il y a des règles à suivre pour s'assurer que l'image qui y sera reflétée dans son ensemble est équilibrée et donne l'impression que tous les éléments qui la composent sont positionnés aux bons endroits.
Pour parvenir à un résultat parfait, voici 6 règles de base en communication visuelle qui doivent être respectées :
1. Une mise en pages selon les règles de l'art

Chaque publicité, chaque page d'un document ou d'un site Web est perçue, dans son ensemble, comme une image. L'utilisation de la règle des tiers, la règle d'or du cadrage photographique, permet d'équilibrer cette image. Ce principe de proportion et d'équilibre tient ses origines de l'art pictural.

La règle des tiers divise une image en trois parties égales. Plusieurs variantes sont possibles. Le principe s'applique autant aux images qu'aux documents et s'applique à la verticale et à l'horizontale. L'emplacement des logos, des images, des textes ou de tout autre élément sera conditionné par le mode de division choisi par le créateur.

Lorsque cette règle est respectée et contrôlée, elle garantit à une conception graphique l'équilibre qui captera l'attention.

2. Le chemin visuel : un phénomène à ne pas négliger

Il est important de savoir comment notre œil se comporte lorsque nous regardons une image. Cela permet de positionner des éléments forts à des endroits stratégiques. Des études sur la perception ont permis de définir certains principes qui régissent la lecture des compositions visuelles :

Les yeux ont tendance à explorer en particulier et successivement 4 points qui sont les intersections des droites parallèles aux côtés et tracées à un tiers et deux tiers des longueurs et des largeurs. On appelle ce balayage, la lecture en Z.

Les yeux ont tendance à bouger dans le sens des aiguilles d'une montre.

Les yeux ont tendance à regarder davantage le quadrant supérieur gauche d'une image.

Nous pouvons observer ces phénomènes, car nous avons été conditionnés à lire en commençant en haut de gauche à droite et ensuite descendre sur l'autre ligne et recommencer de gauche à droite. Donc, lorsqu'on regarde une image rapidement dans son ensemble ce mouvement de lecture en Z est accentué.

3. La personnalité des caractères typographiques

Avec ou sans empattements?

Les caractères typographiques utilisés dans une composition peuvent diminuer ou renforcer le sens d'un texte. Les deux grandes familles de caractères sont les polices de caractère avec empattements (sérifs) et sans empattements (sans sérif). Les empattements sont les petites pointes présentes dans le dessin des caractères.

À chaque typographie sa personnalité

Certains caractères amènent un côté masculin, sérieux ou démontrent le prestige ou le modernisme. D'autres proposent un style plus artistique, technologique ou fantaisiste. Un caractère gras rend l'idée de force, de solidité. Des lettres italiques suggèrent le dynamisme, le mouvement. Un caractère maigre apporte une touche féminine et est recommandé pour exprimer la distinction et la délicatesse.

Principes de base

Italique : Il est déconseillé de mettre un texte continu en italique, car l'effet de mouvement qu'il génère rendra la lecture plus ardue en forçant l'œil à défiler plus vite sur le texte, ce qui crée un inconfort visuel qui ralentit la lecture.

Capitales : Un texte en capitales subira le même effet de ralentissement qu'un texte en italique. L'utilisation combinée de capitales et de bas-de-casse facilite la lecture en apportant des points d'attention lorsqu'elle est bien contrôlée.

Interlignage : L'interlignage des titres et des textes doit être ni trop serré, ni trop espacé.

Caractère : En général, un logo, une publicité ou un document ne devrait pas comporter plus de deux styles de caractère différents et certainement pas plus de trois. L'emploi de trop de caractères différents oblige l'œil à de nombreux ajustements qui poussent à abandonner la lecture.

4. Choisir le bon alignement

L'alignement est la disposition du texte par rapport aux marges et aux colonnes d'une page. Les deux alignements les plus couramment employés sont l'alignement en drapeau à gauche et l'alignement justifié, ou en alinéa. Voici certains avantages et inconvénients liés à leur utilisation :

L'alignement en drapeau à gauche

Avantages : Aspect esthétique de densité homogène, sans césures de mots, espaces égales entre les mots.

Inconvénients : Inégalité entre les lignes, nécessite un bon contrôle.

Utilisation : Courts textes, textes en retrait, sous-titres.

L'alignement justifié (en alinéa)

Avantages : Largeur fixe des lignes, bonne visibilité, séparation franche du texte.

Inconvénients : Espaces variables entre les mots, séparation difficile des mots (césures).

Utilisation : Textes avec beaucoup de contenu, articles longs, lettres.

5. Le symbolisme des couleurs

Chaque couleur a une signification cachée et exerce ses influences à un niveau inconscient :

Jaune : Synonyme de gaieté, de créativité et d'optimisme. Il donne une impression de chaleur et de lumière.

Orange : Évoque l'énergie et l'action. Il apporte une touche de dynamisme.

Rouge : Symbole d'amour, de sensualité et de passion. Il est aussi associé au danger, au sang. À utiliser avec un dosage bien contrôlé.

Violet : Associé à la délicatesse, à l'imaginaire et à la spiritualité. Il évoque aussi la prospérité et la solitude

Vert : Invite au calme et à la détente. Symbole de croissance, de la nature et de chance. La couleur de l'espérance.

Bleu : Exprime la confiance, la fraîcheur et la fidélité. La couleur la plus aimée, il évoque le ciel, les voyages et le rêve.

6. L'importance des zones de repos

Dans une conception graphique, les zones de blanc sont appelées " zones de repos " parce qu'elles permettent à 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.

Par exemple, un document présentant une mise en pages claire et simple attirera notre attention tandis qu'il sera repoussant si la mise en pages est surchargée. Les mises en pages aérées permettent la mise en valeur des titres, des textes et des images tout en facilitant la lecture des contenus. Aussi, il est important de conserver une zone de dégagement sans image et sans texte autour des logos ou des signatures graphiques pour que ceux-ci soient toujours mis en valeur et facilement repérables.

L'art de la communication visuelle à votre service!

Bien évidemment, l'art de concevoir des images ou une mise en pages de document équilibrées et efficaces comprend énormément de règles en plus de ces 6 principes de base, mais il comporte également de nombreux pièges. Souvent, quelques secondes suffisent pour créer un impact positif ou négatif envers votre organisation. Garantissez-vous un impact positif en confiant ce travail à un professionnel de la communication visuelle qui saura mettre son art au service de votre organisation!

Source
Luc Dupont, 1001 trucs publicitaires

Avec plus de 20 ans d'expérience en communication graphique et en gestion de projets, Mélanie est une passionnée de tout ce qui touche à la communication graphique, au monde du Web, au marketing et à l'art visuel.

# data[].attributes.attachment_link.title
Les 6 règles de base en communication visuelle

# data[].attributes.attachment_link.description
Que ce soit pour le design graphique d'une publicité, d'une couverture ou de la mise en pages d'un document, d'un site Web ou de tout autre visuel, il y a des règles à suivre pour s'assurer que l'image qui y sera reflétée dans son ensemble est équilibrée et donne l'impression que tous les éléments qui la composent sont positionnés aux bons endroits.

# data[].attributes.headline
Blog sur la typographie et la mise en page

# data[].attributes.subject
Blog sur la typographie et la mise en page

# data[].attributes.body
http://typomanie.fr/traces-regulateurs-grilles-et-gabarits-la-conquete-de-la-liberte-de-lharmonie/

# data[].attributes.attachment_link.readable_text
Il (le typographe) doit inlassablement parfaire son sens des proportions, afin de pouvoir juger sans défaillance de la portée et de la limite d'un rapport de proportions. Il sentira alors à quel moment la tension établie entre deux éléments devient si forte que l'harmonie se trouve menacée. Il apprendra à éviter les rapports sans tension aucune qui engendrent l'uniformité et l'ennui. Il déterminera en outre le degré de tension plus ou moins fort qui devra exister selon la nature et le caractère de l'ouvrage qui lui est confié. On ne peut donc concevoir un principe de calcul rigide, comme le rapport de la règle d'or 3 : 5 ou 8 : 13, car ce rapport peut être valable pour un travail et faux pour un autre. Emil Ruder, Typographie, 1967, p. 92.*

Voilà qui est bien dit et clairement exprimé... Pas de dogmes ou de principes rigides mais une culture de la sensibilité, la nécessité de la tension "maximale possible" pour une composition à la fois dynamique et équilibrée ou le blanc est aussi important que le noir, et non son seul support. Les réflexions sur les formats, gabarits ou autres grilles doivent permettre de libérer la créativité et non l'enfermer, et c'est par l'étude attentive du contenu que le graphiste imaginera un outil susceptible de l'aider à la transmission de la pensée des auteurs, à travers une mise en page volontaire et maîtrisée.

Une fois conçue, la grille modulaire installe une harmonie de proportions entre tous les éléments qui forment la page, éléments imprimés aussi bien que non-imprimés. Le livre se révèle être, dans sa forme papier traditionnelle, un objet symétrique, articulé autour de sa reliure. Le graphiste concentre donc son attention sur cette entité qu'est la double-page, car une page au singulier ne se rencontre quasiment jamais, hormis en début d'ouvrage. La succession de ces double-pages crée le mouvement à travers lequel doit se dégager une unité visuelle : un film à lire, où alterne calme et surprise, captation de l'attention et recul discret, dans une atmosphère installée par la mise au point de chacun des détails.

Curieux de découvrir les clefs de la beauté de nombreux manuscrits et incunables (les incunables sont les livres imprimés aux premières heures de l'imprimerie), Jan Tschichold compare de nombreux ouvrages et met à jour, en 1953, ce qu'il nomme "le canon secret" :
Avant l'invention de l'imprimerie, les livres étaient écrits à la main. Gutenberg et les premiers imprimeurs prenaient les livres manuscrits comme modèles. Les imprimeurs reprirent les lois qui présidaient à la réalisation d'un livre et que les copistes avaient suivies depuis longtemps. Il est certain qu'il y avait des principes directeurs ; en effet, de nombreux manuscrits médiévaux présentent de grandes concordances dans les proportions de leur format et la position des surfaces écrites. Toutefois ces lois ne nous ont pas été transmises. C'étaient des secrets d'ateliers. C'est seulement en mesurant les manuscrits médiévaux que nous pouvons essayer de suivre leur trace. [...] En 1953, après un pénible travail, j'ai enfin réussi à reconstituer le Canon d'Or de l'organisation médiévale des pages, tel que les meilleurs copistes l'ont utilisé. Il est représenté dans la figure x. [...] Dans la figure x, la hauteur du champ de l'écriture égale la largeur du papier : avec pour les pages une proportion de 2 : 3, ce qui est l'une des conditions de ce canon, on obtient pour la marge intérieure un neuvième de la largeur du papier, deux neuvièmes pour la marge extérieure, un neuvième de la hauteur pour la marge supérieure et deux neuvièmes pour la marge inférieure. Surface écrite et grandeur de papier sont de proportion égale. Dans Livre et typographie, p. 59.*

Ce tracé donne un positionnement du rectangle d'empagement magnifique pour les compositions simples - comme les romans ou essais - où le texte se déroule de page en page sur une colonne. Cependant il est très difficile de nos jours de réussir à justifier de si grandes marges de pied... le papier coûte cher. Partir de ce tracé, ou de la division par 9 qui en résulte, permet de partir sur de très belles bases et il est tout à fait possible de le "décliner", c'est-à-dire pousser ses possibilités, pour satisfaire aux besoins contemporains.

La grille multi-colonnes permet d'installer plusieurs blocs texte dans la page ; elle est donc destinée aux magazines, journaux, plaquettes ou livres à contenu dense ou à ce que l'on nomme dans l'édition les "beaux livres" (expression énervante qui suggère des divisions de classe entre les livres, les chers forcément beaux, et les pauvres qui peuvent être laids, parce qu'ils ne sont pas chers, une adéquation totalement contredite par la réalité où nombre de livres très chers sont très moches et nombre de livres de tous les jours, très beaux parce qu'intelligemment conçus).

Au-delà du travail sur la page elle-même, la grille assure la cohérence entre toutes les pages et la cohérence entre l'intérieur et l'extérieur, les pages et la couverture. Chaque type d'ouvrage va engendrer un type de grille particulier : un journal, un rapport annuel d'entreprise, un livre d'art, n'ont pas la même grille. La relation entre le texte et l'image, en terme de quantité, de proximité, de difficulté - certains textes sont plus difficiles à comprendre que d'autres - détermine un type de mise en forme dont la grille se fera l'écho. Plus le nombre de colonnes sera grand, plus la liberté sera grande et plus l'on pourra marquer les différences entre les types de texte, et guider correctement le lecteur dans son appréhension du contenu. Pour des supports complexes, type mosaïque (expression que l'on emploie pour montrer la différence avec les ouvrages à lecture continue), il est même possible de superposer deux grilles, la seule contrainte étant de garder les mêmes marges. Après, selon ses choix, ses croyances, ses habitudes, chacun pourra pousser le système s'il le désire. Les puristes de la chose accorderont proportions des marges, des colonnes et des gouttières d'une part, l'interlignage et la hauteur des images d'autres part (dans ma pratique je privilégie les grilles ultra modulables, où la marge équivaut à une colonne, et l'emploi de quelques lignes force, sans aller jusqu'à l'élaboration d'une grille horizontale). Pour l'écran, le principe est le même, la logique de grille s'applique parfaitement.

Exemple de grilles multi-colonnes : à gauche une grille à 9 colonnes qui englobe les marges, à droite une grille à 5 colonnes qui n'inclue pas les marges.

De façon plus pragmatique, cette approche permet de séparer conception et réalisation. Les tâches peuvent être ainsi réparties entre plusieurs personnes. Si le tout est assuré par la même personne, cette approche permet de poser toutes les questions clefs au départ et d'éviter les mauvaises surprises par la suite ; l'approche globale étant validée, le graphiste peut se consacrer à la composition de chaque double-page, construite sur des principes de tension, de rapport de masses, de contraste, etc.

Il y a plusieurs raisons pour utiliser la grille comme aide dans l'organisation du texte et des illustrations :
- des raisons économiques : un problème peut être résolu en moins de temps et pour moins cher.
- des raisons rationnelles : des problèmes simples aussi bien que des problèmes complexes peuvent être résolus dans un seul et même style caractéristique.
- un certain état d'esprit : la présentation systématique des faits, de la séquence des événements, et de la solution des problèmes, devrait, pour des raisons sociales et pédagogiques, être une contribution constructive à l'état culturel de la société et l'expression de notre sens des responsabilités.
Josef Müller-Brockmann, Grid systems in graphic design, 1981.*

* Les références complètes des ouvrages cités se trouvent à la page Bibliothèque.

# data[].attributes.attachment_link.title
Tracés régulateurs, grilles et gabarits, la conquête de la liberté & de l'harmonie.

# data[].attributes.attachment_link.description
Il (le typographe) doit inlassablement parfaire son sens des proportions, afin de pouvoir juger sans défaillance de la portée et de la limite d'un rapport de proportions. Il sentira alors à quel moment la tension établie entre deux éléments devient si forte que l'harmonie se trouve menacée.

# data[].attributes.body
Google Drive/ tableau BLOOM

# data[].attributes.attachment_link.readable_text
Niveaux de BLOOM

Défintions / croisement compétences capacités savoirs

Anne BOURGUET WAGNER

Anne BOURGUET WAGNER

Anne BOURGUET WAGNER

Connaissance (Mémorisation et restitution d'informations dans les mêmes termes)

1) sur le WEB/5 exemples de mises en page qui vous semblent de qualité, vous plaisent. + 3 différentes qui ont des défauts... 2) VISIONNER LA VIDÉO À LA MAISON OU AU CDI +

Compréhension (Restitution du sens des informations dans d'autres termes).

3/ après lecture de la vidéo/ les principes et vos choix de CONTRE EXEMPLES

# data[].attributes.attachment_link.description
SYNTHÈSE

 Niveaux de BLOOM, Défintions/ croisement compétences capacités savoirs
 faits savoirs, concepts structures, procédures savoirs faire, métacognitives prise de recul
 MOOC
, Anne BOURGUET WAGNER, Anne BOURGUET WAGNER, Anne BOURGUET WAGNER
 Connaissance, VERBE, identifier
 Connaissance( M...