Les grilles macro-typo sur le web ? Facile !
Atelier présenté le 20 octobre 2012 à Paris Web par Marie Guillaumet et Vincent Valentin.
Résumé
On s’entend dire depuis un moment que les grilles sur le web, c’est le bien ; qu’elles facilitent la lisibilité et qu’elles apportent harmonie et structure. Tout cela est vrai ! Face à la pléthore de frameworks qui existent sur le marché :
- Par où commencer ?
- Comment établir une grille commune qui facilitera le travail des web designers et des intégrateurs ?
- Comment faire pour que cette grille soit respectée d’un bout à l’autre du projet ?
Ne cherchez plus ! Grâce aux compilateurs CSS existants, vous allez pouvoir utiliser et intégrer n’importe quelle grille, facilement et rapidement.
Nous reviendrons sur le principe de grilles, avant de vous présenter l’outil. Puis nous verrons qu’un grand pouvoir implique de grandes responsabilités, tant pour les web designers que pour les intégrateurs. Le tout agrémenté de vrais exemples déployés en production.
L'atelier sur le web :
Slides
Bibliographie
Mais aussi
- BOUCHER Amélie, Ergonomie web : Pour des sites web efficaces, Eyrolles, 2011 (troisième édition)
- PERROUSSEAUX Yves, Mise en page et impression : notions élémentaires, Atelier Perrousseaux Éditeur, 2003 (cinquième édition)
- VINH Khoi, BOULTON Mark, Grids Are Good (Right?) (PDF), 2007
Articles
- BICHET Bruno, Nombre d'or, suite de Fibonacci et autres grilles de mise en page pour le design web
- BOULTON Mark, Five simple steps to designing grid systems :
- COLLECTIF, Wikipédia :
- BERTAGNIN Fabio, Nombre d’or, divine proportion
- GUPTA Adit, Applying Mathematics To Web Design
- INFORMATION ARCHITECTS, Web Design is 95% Typography
- KYRNIN Jennifer, Mathematics, Seashells, and Web Design : Using the Golden Ratio, Phi, or Fibonacci Numbers in Web Design
- MOLL Cameron, Gridding the 960
- ROBERTS Lucienne, A Brief History of Grids
- VALENTIN Vincent, Introduction aux grilles typographiques
- VALENTIN Vincent, Macro-typographie sur le Web :
Outils
- Outline, le framework qui réunit #grid + Compass + Z + normalize, mis au point par Vincent Valentin
- Fork d'Outline par Marie Guillaumet
- Grid Calculator
- Typograph – Scale & Rythm
- Marges en pixels VS. marges en ems
- Em Calculator
- Page de démonstration d’un design réactif, avec #grid
- Modular Scale
- Et puis Adobe Edge Reflow, à suivre de près
Grilles fluides
Sites cités en exemple pendant l’atelier
Grille à colonnes fixes
- enssib
- ENSAL - École Nationale Supérieure d'Architecture de Lyon (par contre, faut pas regarder le code)
- Foncia Location Vacances
Grille modulaire
Grille modulaire « éclatée »
Citations
Le Web, c’est 95% de typographie.
The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.
Discipline is a vehicle for joy.
La composition est l’art de découvrir et de représenter l’unité dans la variété.
La recherche de l’harmonie ou de la totalité plastique ne nous pose pas simplement un problème de forme ou de couleur ; c’est tout le problème de la totalité psychique qui reste ouvert.
The attention to details requires discipline. There is no room for sloppiness, for carelessness, for procrastination. Every detail is important because the end result is the sum of all the details involved in the creative process no matter what we are doing. There are no hierarchies when it comes to quality. Quality is there or is not there, and if is not there we have lost our time. It is a commitment and a continuously painstaking effort of the creative process to which we should abide. That is Discipline and without it there is no good design, regardless of its style.
Dès l’instant où je commence à réfléchir, tout est perdu.
C'est véritablement utile puisque c'est joli.