Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE Maquette mise

----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE Maquette mise en page Termes, procédés de mise en page, formats de page, section dorée, grille, liste de contrôle... & ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE -1- Quelques notions essentielles ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 1/ Quelques termes importants Le brief préliminaire : Permet de poser les bases de la création. Le design d’une maquette est divisé en plusieurs étapes. Le croquis : C’est la base de chaque maquette. Présente l’idée du concept grossièrement, sous forme de dessin à la main / griffonnage. L’idée est de montrer l’effet général. La pré-maquette : Donne aux personnes impliquées dans le processus de création un aperçu de la version finale. C’est la base de liaison pour toutes les décisions sur la progression du projet. ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE La maquette : Version imprimée au bon format, réaliste ou proche de la réalité, c’est un modèle de présentation. Le bon à tirer (BAT) : Dernière étape avec l’impression, la phase préliminaire pour le prépresse 1/ Quelques termes importants ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 2/ Procédé de mise en page Avant de commencer la mise en page, il faut que le contenu soit fixé, totalement planifié : texte rédigé et images sélectionnées. Dans le cadre d’un nouveau projet voici les étapes à suivre : 1. Définir le format 2. Créer le document 3. Définir la surface de la page composée 4. Définir la grille avec le texte et les éléments stylistiques 5. Mise en page et corrections finales ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 3/ Formats de page et section dorée L’idée est de trouver un format de page harmonieux. La section dorée consiste à diviser une ligne en deux sections inégales dans laquelle la petite section « A » établit un rapport avec la plus grande « B » pour créer cette ligne entière. Ex. 2/3, 3/4, 5/8… ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 3/ Formats de page et section dorée ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 3/ Formats de page et section dorée La section dorée Ce ne sont pas uniquement des proportions idéales que l’on retrouve dans l’architecture ou l’art mais également un rapport que l’on peut trouver dans la nature. La section dorée est basée sur la suite de Fibonacci : 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233… ⇒ Le nombre suivant étant la somme des deux précédents. ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 4/ Les grilles ➔ Ou grilles de construction permettent d’organiser la surface ➔ Facilitent la création d’une maquette claire et cohérente ➔ Permettent d’appréhender la continuité, accélérer la mise en page, la vitesse de lecture d’un document ➔ Elles divisent la surface lors de la conception de façon à constituer une grille de champs dans lesquels tous les éléments trouvent leur place : illustrations/photos, textes, titres, chapeaux… ➔ Peuvent être conçues d’après cette loi de Fibonacci ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 4/ Les grilles #Construction des grilles Les graphistes utilisent toutes sortes de grilles, souvent basées sur des multiples de 3 (mais pas seulement), l’essentiel étant de choisir un nombre impair pour avoir une composition dynamique (grâce à l’asymétrie). ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 4/ Les grilles #Les types de grilles Les grilles de lignes de base utilisées pour l’alignement des colonnes et lignes de texte Les grilles modulaires ou grilles de documents utilisées pour l’alignement des objets. Source : https://helpx.adobe.com/fr/indesign/using/grids.html ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE La grille multi-colonnes permet d’organiser plusieurs blocs de texte dans la page ; elle est donc destinée aux magazines, journaux, plaquettes ou livres à contenu dense. 4/ Les grilles #Les types de grilles Source : http://paris.blog.lemonde.fr/2008/12/10/mise-en-page-typographie-grilles-presse-quotidienne-principes-fondateurs/ ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE Éléments à établir avant de commencer la mise en page : 1. Format 2. Marges et surfaces de la page composée 3. Colonnes 4. Polices de caractères et taille en points 5. Espacement de la colonne 6. Pagination 7. Climat couleur 5/ Liste de contrôle ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE Pourquoi ? Pour éviter les longues lignes de texte qui fatiguent l’œil et rendent la lecture difficile. Conseil Plus la surface de la page comporte des colonnes, moins elle accepte de texte il faut donc faire attention à bien démarquer la distance entre les colonnes de texte. Il est conseillé de baser l’espacement des colonnes sur la largeur de la paire de lettres « mi » dans la police de caractère utilisée. 5/ Liste de contrôle ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE -2- Règles de composition ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE Le nombre d’or (1,618) est un ratio « magique » qui permet de réaliser des interfaces aux proportions esthétiquement parfaites – du moins, un certain sens de l’ équilibre et de l’harmonie. Voici à quoi ressemble le nombre d’or : 1/ Le nombre d’or ou comment utiliser les bonnes proportions dans sa composition (graphique, photographique, artistique…) Le nombre d’or est une règle de composition directement inspirée de “la divine proportion” ou “nombre d’or”. ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE ou comment utiliser les bonnes proportions dans sa composition (graphique, photographique, artistique…) Beaucoup d’artistes et d’architectes ont proportionné leur travail en s’inspirant du nombre d’or. 1/ Le nombre d’or Le Parthénon, à Athènes, est sans doute l’exemple le plus célèbre ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE ou comment utiliser les bonnes proportions dans sa composition (graphique, photographique, artistique…) 1/ Le nombre d’or Mais Twitter l’utilise également... ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 2/ La règle des tiers La règle des tiers affirme qu'une image est plus plaisante lorsque les sujets ou zones qui la composent suivent des lignes imaginaires qui divisent le cadre en tiers , à la fois horizontalement et verticalement. Ces lignes sont également appelées lignes de force et leur points d’intersection sont définis comme les point forts de l’image. ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 2/ La règle des tiers Quelques exemples ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 3/ La règle des nombres impairs Aussi étonnant que cela puisse paraître, la sensation d’harmonie, d’équilibre, s’obtient grâce à ce que l’esprit mathématique considère comme déséquilibré. Le sentiment de beau s’obtient avec des valeurs impaires et des proportions variées. Tout ce qui est paire et de même taille donne une impression de rigidité, de froideur. ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE -3- Les grands principes de composition graphique ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 1/ Le sens de lecture Naturellement l’œil a tendance à balayer l’image de la même façon qu’un texte, c’est à dire de gauche à droite et de haut en bas. La trajectoire de l’œil (dite « en Z ») diffère légèrement selon que l’image est orientée en paysage ou en portrait. ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 1/ Le sens de lecture # Lecture d’une page Il est important d’analyser le comportement d’un individu face à une composition pour en tirer partie lors de la conception. Il est conseillé d’adopter l’acronyme énoncé par David Ogilvy : “KISS” pour Keep It Simple and Stupid ou “Faire Simple et Basique” autrement dit. ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 1/ Le sens de lecture # Lecture d’une page : exemples ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE 1/ Le sens de lecture # Lecture d’un écran Sur le web, l’œil de l’internaute a une lecture en F, de haut en bas (je recherche) et de gauche à droite (je m’intéresse). Source :http://www.24hdansuneredaction.com/web/8-les-grands-principes-de-lecture/ Il suffit de quelques secondes à un internaute pour parcourir une page à l’ écran et se faire une idée du contenu et de la qualité de l’information. ----------- Maquette & Mise en page - Par S. GUET - N. LATREILLE La hiérarchie visuelle est l’un des principes fondamentaux du web design. Il s’agit de l’ordre dans lequel l’œil humain perçoit les choses. Exercice. Classez ces formes par ordre d’importance : 2/ La hiérarchie visuelle ----------- Maquette & Mise en page - uploads/s3/ nl-sg-maquette-et-mise-en-page.pdf