Typographie et mise en page Bonnes habitudes et pièges à éviter FORMATION APEC 12 OCTOBRE 2012 S E R G E M E R C I E R
Quels sont les trois principaux éléments d une mise en page? A Texte Image Blanc
Choix typographiques
Familles de polices de caractère Caractères avec empattement Typographie Garamond Empattement Petit trait qui prolonge les extrémités des traits droits et obliques des lettres Caractères sans empattement Typographie Helvetica Caractères décoratifs Caractères scripts
Selon quels critères doit-on choisir une police? La lisibilité L adéquation La reproduction Les variations à l intérieur d une police Typographie Typographie Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque tincidunt magna, quis tempor augue tempor sed. Suspendisse potenti. Nunc vitae erat nisl, vitae sodales leo. Mauris sem augue, commodo sed vulputate vel, sollicitudin Notaire Typographie Typographie Typographie Typographie Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque tincidunt magna, quis tempor augue tempor sed. Suspendisse potenti. Nunc vitae erat nisl, vitae sodales leo. Mauris sem augue, commodo sed vulputate vel, sollicitudin aliquam tellus. Ut eget mauris at dui iaculis ultricies quis a metus. Fusce pretium, ligula vitae varius Notaire Typographie Typographie
Respect du dessin des caratères -Respect des proportions -Ne pas étirer la typographie
Nombre de police dans une page Two is a couple three s a crowd!
Attributs typographiques
Mise en relief typographique Minuscule Majuscule Bonjour BONJOUR Certaines polices de caratère ne sont pas faites pour être en majuscule! CERTAINES POLICES DE CARATÈRE NE SONT PAS FAITES POUR ÊTRE EN MAJUSCULE! Interligne Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque tincidunt magna, quis tempor augue tempor sed. Suspendisse potenti. Nunc vitae erat nisl, vitae sodales leo. Mauris sem augue, commodo sed vulputate vel, sollicitudin aliquam tellus. Ut eget mauris at dui iaculis ultricies quis a metus. Fusce pretium, ligula vitae varius sagittis, ante nulla lobortis nisl, ut ullamcorper Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque tincidunt magna, quis tempor augue tempor sed. Suspendisse potenti. Nunc vitae erat nisl, vitae sodales leo. Mauris sem augue, commodo sed vulputate vel, sollicitudin aliquam Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque tincidunt magna, quis tempor augue tempor sed. Suspendisse potenti. Nunc vitae erat nisl, vitae sodales leo. Mauris sem augue, commodo sed vulputate vel, sollicitudin aliquam tellus. Ut eget mauris at dui iaculis ultricies quis a metus. Fusce pretium, ligula vitae varius sagittis, ante nulla lobortis nisl, ut ullamcorper nisi metus sit amet enim. Cras et arcu arcu, sit amet volutpat velit. Aliquam ut tortor enim, a tristique nisl. In leo nisi, tincidunt vitae dictum id,
Mise en relief typographique Italique, soulignement Soulignement tranche les jambages inférieurs et graisse Typographie
Bien choisir les attributs typographiques
Alignements Texte aligné à gauche Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque tincidunt magna, quis tempor augue tempor sed. Suspendisse potenti. Nunc vitae erat nisl, vitae sodales leo. Mauris sem augue, commodo sed vulputate vel, sollicitudin aliquam tellus. Ut eget mauris at dui iaculis ultricies quis a metus. Fusce pretium, ligula vitae varius sagittis, ante nulla lobortis nisl, ut ullamcorper nisi metus sit amet enim. Cras et arcu arcu, sit amet volutpat velit. Aliquam ut tortor enim, a tristique nisl. In leo nisi, tincidunt vitae dictum id, tristique sit amet dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque tincidunt magna, quis tempor augue tempor sed. Suspendisse potenti. Nunc vitae erat nisl, vitae sodales leo. Mauris sem augue, commodo sed vulputate vel, sollicitudin aliquam tellus. Ut eget mauris at dui iaculis ultricies quis a metus. Fusce pretium, ligula vitae varius sagittis, ante nulla lobortis nisl, ut ullamcorper nisi metus sit amet enim. Cras et arcu arcu, sit amet volutpat velit. Aliquam ut tortor enim, a tristique nisl. In leo nisi, tincidunt vitae dictum id, tristique sit amet dolor. Texte aligné à droite Texte centré Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque tincidunt magna, quis tempor augue tempor sed. Suspendisse potenti. Nunc vitae erat nisl, vitae sodales leo. Mauris sem augue, commodo sed vulputate vel, sollicitudin aliquam tellus. Ut eget mauris at dui iaculis ultricies quis a metus. Fusce pretium, ligula vitae varius sagittis, ante nulla lobortis nisl, ut ullamcorper nisi metus sit amet enim. Cras et arcu arcu, sit amet volutpat velit. Aliquam ut tortor enim, a tristique nisl. In leo nisi, tincidunt vitae dictum id, tristique sit amet dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque tincidunt magna, quis tempor augue tempor sed. Suspendisse potenti. Nunc vitae erat nisl, vitae sodales leo. Mauris sem augue, commodo sed vulputate vel, sollicitudin aliquam tellus. Ut eget mauris at dui iaculis ultricies quis a metus. Fusce pretium, ligula vitae varius sagittis, ante nulla lobortis nisl, ut ullamcorper nisi metus sit amet enim. Cras et arcu arcu, sit amet volutpat velit. Aliquam ut tortor enim, a tristique nisl. In leo nisi, tincidunt vitae dictum id, tristique sit amet dolor. Texte justifié
Critères de qualités d une bonne typographie Lisibilité Contraste et harmonie Transmission efficace d un message
Mise en page et trajet visuel
La grille graphique Utiliser une grille et aligner les éléments sur celle-ci. Fractionner les colonnes grâce à la grille modulaire.
Les regroupements Utiliser le regroupement pour simplifier la mise en page.
La place du blanc -Un des trois éléments de la mise en page -Permet à la page de respirer -Mettre en valeur les éléments -Résister à l envie naturelle de remplir les blancs.
Qu est-ce que le trajet visuel?
Harmonies de couleur
Utiliser des harmonies de couleur http://colorschemedesigner.com/
Choisir une harmonie et limiter le nombre de couleurs Harmonie par analogie Gamme de valeurs Couleurs voisines Couleurs chaudes Couleurs froides Couleurs pastels Couleurs ternes Harmonie par contraste Complémentaires Triade Tétrade Contraste de quantité Contraste chaud/froid Contraste clair/obscur
Choisir une harmonie et limiter le nombre de couleurs Si possible, utiliser l harmonie présente dans l image Oser utiliser des surfaces de couleur
À éviter... Choisir toutes les couleurs du monde!
Cadrage des images
Respecter les proportions
Ne pas faire de réflexions d image
Impact d un cadrage dynamique http://www.linternaute.com/photo_numerique/cadrage/
Cadrage Lorem ipsum Nullam mollis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque tincidunt magna, quis tempor augue tempor sed. Suspendisse potenti. Nunc vitae erat nisl, vitae sodales leo. Mauris sem augue, commodo sed vulputate vel, sollicitudin aliquam tellus. Ut eget mauris at dui iaculis ultricies quis a metus. Fusce pretium, ligula vitae varius sagittis, ante nulla lobortis nisl, ut ullamcorper nisi metus sit amet enim. Cras et arcu arcu, sit amet volutpat velit. Aliquam ut tortor enim, a tristique nisl. In leo nisi, tincidunt vitae dictum id, tristique sit amet dolor. Nullam mollis neque eu orci imperdiet sit amet lobortis lacus ornare. Pellentesque quis diam ante. Suspendisse potenti. Mauris non congue metus. Sed fringilla vulputate massa in bibendum. Donec feugiat massa sit amet diam laoreet ut molestie magna rutrum. Mauris nulla purus, sagittis quis cursus et, porttitor nec sapien. Morbi at mauris in urna mollis laoreet. Suspendisse leo massa, dignissim non bibendum id, consectetur fringilla ante. Etiam ut ultricies erat. Mauris non porta felis. Praesent ultrices mi ullamcorper nisl pellentesque scelerisque. Aliquam consequat facilisis turpis nec tempor. Suspendisse potenti. Donec consequat quam et nunc aliquam tincidunt scelerisque nisl porta. Phasellus porttitor enim suscipit felis ultrices accumsan elementum dui tincidunt. Nulla ultricies, tortor a sagittis ullamcorper, risus orci posuere enim, eget bibendum risus enim et lacus. Morbi scelerisque, nisl eget luctus porttitor, justo est venenatis nibh, vitae interdum dolor dolor ut tellus. Proin accumsan consectetur ipsum, quis viverra massa malesuada eget. In consectetur ipsum purus. Aliquam augue diam, eleifend et vulputate id,
Qualités d un document
Les 15 critères de qualités d une mise en page Le contraste La lisibilité L harmonie L ordre L espace La proportion La profondeur Le dynamisme L équilibre La pertinence Le mouvement L originalité Le rythme La nuance La structure La beauté est subjective, la qualité ne l est pas.
Qu est-ce qui cloche?
Qu est-ce qui cloche?
Serge Mercier 2012 http://sherzzz.com