Tracés régulateurs, grilles et gabarits, la conquête de la liberté & de l’harmonie. | typomanie* 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é. 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. 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.
grille css pour un design simple et rapide Pour accélérer vos mises en page CSS, il est conseillé d’utiliser des mises en page à base de grilles. Mais comment cela fonctionne t-il et comment le mettre en œuvre sur le design de votre site ? 1. Principe Nous connaissons tous le principe de grilles, puisque tous les jours nous le voyons sans nous en rendre compte. 2. Prenons l’exemple d’un site dont la largeur totale sera de 960 pixel. 3. Comment utiliser une grille ? Maintenant que vous comprenez le principe, vous pouvez commencer à imaginer les différentes combinaisons de mise en page qui s’ouvre à vous. l’esthétique; l’équilibre; l’ergonomie; Pour vous faciliter l’intégration xhtml/css vous pouvez utiliser un framework CSS fonctionnant sur ce principe. Voici les principaux frameworks disponibles : 4. Pour ma part j’ai retenu le framework 960 grid system, pour sa simplicité de mise en oeuvre. Le principe de ce framework est le suivant : a. Il suffit de télécharger ce fichier zip. b. c. Exemple d. Conclusion :
Le Typoscope Angle d’empattement Aussi appelé "filet". Liaison plus ou moins incurvée entre l’empattement et le fût. Apex D'origine latine le mot apex signifie "sommet" ou "pointe". Axe Oblique Aussi appelé "stress". Contrepoinçon Espace blanc partiellement ou totalement enclos à l’intérieur de la panse d’un caractère. Corps Taille d’un caractère, exprimée généralement en points typographiques ou en dixièmes de millimètre. Couleur Il s'agit du degré de variation ou de contraste d'épaisseur entre les pleins et les déliés. Délié Partie la plus fine du caractère. Délié de jonction Trait fin qui relie par exemple la panse du ‘g’ à sa boucle. Diagonale Partie inclinée d’un caractère. Empattement Appelé "serif" en anglais. Épaule Partie incurvée prolongeant un fût. Fût Trait principal vertical (le terme s’applique également à certaines diagonales). Goutte ou larme Extrémité d'un caractère différent de l'empattement. Hauteur de capital Hauteur d'oeil Jambage inférieur Aussi appelé longue descendante. Jambage supérieur Panse Plein
pourquoi les grilles responsive et les frameworks css sont une mode qui passera Je pense sincèrement que le « tout fluide » ne devrait pas être généralisé comme une bonne pratique. Les grilles fluides des designs « responsive » sont inadaptables. Les frameworks Bootstrap, Knacss et consorts de même. Les grilles fluides sont inadaptables Prenons l’exemple d’une grille de douze colonnes servant à la conception d’un design de 960 pixels de large. Sur un écran d’ordinateur de taille moyenne, la grille contient donc douze colonnes de soixante pixels plus les gouttières. Prenons maintenant le cas d’un téléphone étroit à l’ancienne. Et les concepteurs des frameworks Bootstrap et Knacss en conviennent également puisque en deçà d’une certaine largeur ils proposent carrément de désactiver les colonnes par media query. Donc une grille fluide prévue pour un écran de quinze pouces ne s’adapte pas aux écrans étroits. Essayons alors les grands écrans et prenons un magnifique moniteur extra-large de vingt-sept pouces : soixante centimètres de large ! Pourquoi le caractère ? PS.
Le Typoscope Annotations Les annotations regroupent les notes de bas de pages, les légendes pour l'iconographie et plus largement les notes accompagnant le texte principal. Approche de groupe L'approche de groupe correspond à l’espacement entre les différents mots d’une même ligne. Blancs tournants Ils correspondent à la gestion des espaces blancs qui entourent les éléments textuels et iconographiques. Blanc de pied C'est la marge située en bas de page. Blanc de tête Le blanc de tête correspond à la marge supérieure de la page. Blanc petit fond Il correspond à la marge intérieure et peut servir à accueillir légendes et annotations. Blanc de grand fond Le blanc de grand fond correspond à toute la marge extérieure. Chapeau Un chapeau est un court texte d'introduction qui précède un texte, souvent un article. Drapeau Le drapeau est l’alignement vertical des lignes de longueurs inégales lors d’une justification en fer à gauche ou à droite. Fer à gauche Fer à droite Gris typographique Gouttières Interlignage Lézarde
les grilles dans le webdesign "Il y a quelque chose de différent entre ce site et le mien… Il a l'air de faire plus pro et je ne sais pas pourquoi !" N'avez-vous jamais eu ce genre de remarque ? Pourtant vous utilisez Photoshop (ou autres programmes équivalents) depuis un certain temps, vous connaissez les règles typographiques et celles du web, la palette de couleur a été choisie avec soin... Pas d'inquiétude, vous n'avez sans doute pas utilisé de grille dans votre design ! Une grille, comme dans le film* ? Utilisée en imprimerie, il est tout à fait possible de transposer le système de grille dans le domaine du web. * Un film très bleu avec des motos, des combats de disques et un certain monsieur Flynn. Grilles : les bases Il existe beaucoup de grilles différentes avec autant de cas concrets d'utilisations. La majorité des grilles disposent de marges latérales, afin que l'œil puisse bénéficier d'un confort de lecture en ne "tapant" pas contre les bords de la fenêtre du navigateur. Anatomie d'une grille Exemples :
Une brève histoire du sérigraphisme… Le sérigraphisme (sérigraphie + graphisme) est un véritable mode d’expression artistique et le cercle de ses créateurs s’agrandit de jour en jours. Il faut dire que lassé par le mercantisme des « tireurs » de reproductions numériques, il y avait un manque : retrouver de véritables œuvres originales pas trop chères qui renouent avec la qualité de l’impression artisanale. Leur style graphique atypique, minimaliste voire rétro (ou vintage) a fait le reste, il est maintenant très à la mode. Même si les affiches de film de Canal+ ne sont pas imprimées en sérigraphie contrairement à celles de la série Dexter illustrées par Ty Mattson’s, il y a comme un esprit de famille : couleurs en applat, simplicité et composition. Aux USA et ailleurs, la plupart des graphistes pratiquent la sérigraphie sur un coin de table, une vraie religion ! « Qu’est-ce qui fait la différence entre le graphisme européen et le graphisme américain, le graphisme californien en particulier ? Estria Miyashiro & Buff Monster
Olly Moss's movie poster remakes Agé de tout juste 21 ans, le jeune graphiste anglais Olly Moss est déjà connu outre-atlantique pour ses créations de T-shirt. Passionné de cinéma, il a créé récemment une série de 8 posters reprenant des affiches de films célèbres. Une idée simple, mais terriblement efficace car ses choix cinématographique touchent toutes les générations. Traités dans un style épuré qui rappelle quelque peu le style allemand de l'après guerre, ses posters surprennent par leur force visuelle. Pour chaque film il choisi d'isoler un détail, un élément distinctif, et s'amuse à le mettre en scène accompagné d'une composition typographique.
Le graphiste Pierre Di Sciullo affiche ses idées - Tout chose, le blog mode et design de Xavier de Jarcy Depuis 1789, la politique s’écrit dans la rue, sur des affiches. C’est le thème de la passionnante exposition "Affiche-action : quand la politique s'écrit dans la rue" à l’Hôtel des Invalides, à Paris (jusqu’au 24 février 2013). Plus de 150 documents y font revivre les moments exacerbés de deux siècles d’histoire : La Commune de Paris, avec ses appels à rejoindre les barricades, les petits placards concoctés à la main par des résistants anonymes pendant l’Occupation, ou encore les slogans insolents de mai 68. L’expo présente aussi les œuvres de deux affichistes contemporains : Pierre Di Sciullo et Vincent Perrottet, qui sont justement des héritiers de 68. Pierre Di Sciullo a conçu cette affiche pendant la campagne présidentielle de 2007, lors du second tour entre Nicolas Sarkozy et Ségolène Royal. « Accablé de la pauvreté du débat, je trouvais que le n’importnawakisme avait pris le pouvoir », explique-t-il.