Un blog qui parle de webdesign, graphisme, méthodologie ...
ARTICLES TROUVES
Article(s) de août 2010 :
Grille : de quoi s’agit-il ?
Une grille est une trame qui divise verticalement et horizontalement un espace en deux dimensions. C’est un outil de mise en page millénaire qui a été utilisé dès la rédaction des manuscrits. On l’utilise aujourd’hui pour la conception des supports imprimés et des documents numériques.
Une grille peut être plus ou moins complexe et le graphiste est libre de choisir sa typologie en fonction de ses besoins et de ses envies.
Pourquoi utiliser une grille en design web ?
Tout graphiste qui conçoit un support présentant de l’information (manuscrite, typographique, photographique, schématique … ) se confronte au problème de la composition. Un site web est généralement constitué d’éléments divers : des textes, des images, des icônes, des éléments d’interface …. Comment agencer sur une page blanche tous ces éléments entre eux, dans un espace donné, sachant qu’il existe des milliers de possibilités ?
Aidez-vous d’une grille. En effet, celle-ci apporte de nombreux avantages :
Elle guide le positionnement
La grille définie à l’avance des repères verticaux et horizontaux à partir desquelles le graphiste peut s’appuyer pour caler ses éléments. Il ne place plus ses blocs dans le vide mais se laisse guider par les colonnes et les gouttières de la grille pour subdiviser l’espace de sa page, la structurer et choisir des positionnements précis.
Elle apporte de l’unité
Un site web est le plus souvent constitué de plusieurs pages. Pour que l’utilisateur comprenne que ces pages sont connectées entre elles et qu’elles appartiennent à une même entité, il est nécessaire que le graphiste apporte une certaine unité graphique.
En utilisant une grille commune pour toutes les pages, le graphiste assure une partie de cette unité. En effet, les gouttières qui servent de repère pour les marges, seront les mêmes sur l’ensemble du site et la taille des modules sera proportionnelle à la largeur des colonnes de la grille. Toutes les pages, même si leur composition est différente, seront construites à partir de la même trame.
Elle améliore le confort de lecture
La grille permet des mises en page en colonnes. Cela est particulièrement utile pour les textes qui, au delà d’une soixantaine de signes par ligne, deviennent fatiguant à lire. En effet, notre regard trouve de l’inconfort à lire de longues lignes de texte mais aussi à retrouver la ligne suivante (retour à la ligne) lorsque celui-ci doit parcourir une longue distance.
Le confort de lecture est aussi amélioré par les alignements verticaux car ils guident le regard à travers la page. Un contenu calé sur une grille organise la page et simplifie sa perception globale.
Le site UX Magazine, riche en contenu, pousse l’utilisation de la grille à son paroxysme.
Comment utiliser une grille ?
Du point de vue du graphiste
La première chose à faire est de choisir sa grille. Grille fixe ou flexible ? Quelle largeur globale ? Combien de colonnes ? Quelle largeur pour les colonnes et les gouttières ?
Ces choix seront souvent orientés par les contraintes du projet : site élastique ou fixe, résolution minimale retenue, contenu riche ou pas …
La largeur d’une colonne est l’unité de base pour déterminer quelle sera la largeur minimum d’un élément. Si un élément (bloc de texte, photo, formulaire …) nécessite une largeur plus grande, le graphiste s’arrangera pour choisir une largeur qui est un multiple de l’unité de base (2,3,4 … colonnes).
Les gouttières servent de repères pour les zones d’espace entre les blocs.
Une fois ce principe simple assimilé, divisez votre contenu en modules et disposez les sur la grille. Bien sure, cette disposition n’est pas aléatoire et doit tenir compte d’un certain nombre de critères (harmonie, équilibre, ergonomie, cohérence, hiérarchisation, marketing …)
Dans un processus de création de site web normal, un inventaire du contenu, un zoning et un placement des éléments sur une wireframe ont déjà été effectué. Une partie du travail de positionnement est donc partiellement entamé et le graphiste n’a plus qu’a structurer la page de façon plus stricte sur sa grille de positionnement. Notons que cette étape peut entrainer des modifications de la wireframe sachant que les contraintes d’espace occupé par les contenus et la résolution d’écran peuvent ne pas avoir été pris en compte lors du dessin des wireframes.
Du point de vue de l’intégrateur
Au début de l’ère du HTML, on détournait l’utilisation des balises « table » (prévues pour présenter des données tabulaires) afin de concevoir la mise en page graphique des pages web en calant les éléments dans les cellules du tableau.
Aujourd’hui, cette technique est bannie pour des raisons de sémantique et de performance. Elle a été remplacé par l’utilisation des CSS qui permettent des positionnements précis sur la page.
A l’aide de framework CSS, il est maintenant possible pour le designer et l’intégrateur de concevoir des mises en pages web sur des grilles communes. Le graphiste choisit la grille sur laquelle il va s’appuyer pour sa mise en page et l’intégrateur génère le framework CSS correspondant. Ce framework CSS lui permettra de respecter au mieux les positionnements et les alignements des éléments.
L’utilisation de ces framework ne sont pas obligatoires mais leur usage facilite grandement le travail lorsqu’ils sont maitrisés à la fois par le graphiste et l’intégrateur.
Il existe de nombreux framework CSS qui proposent une feuille de style de positionnement basée sur une grille. Je citerais par exemple 960 Grid System et Blue Print pour ceux que j’ai déjà utilisé.
Faire oublier la grille
Une fois que votre mise en page est terminée, il vous reste encore pas mal de travail de design.
Si vous avez besoin d’estomper l’aspect grille de votre mise en page, il existe des solutions créatives en utilisant judicieusement les images d’arrière plan par exemple.
Sur ce sujet, Jina Bolton a écrit un article intéressant intitulé Breaking Out of the Box publié sur le site SitePoint.
Et pour les allergiques aux grilles, allez faire un tour sur le blog de Peter Gabor : Design et Typo, pour découvrir l’article sur David Carson, véritable casseur de grilles.
Conclusion
L’utilisation d’une grille dans la conception d’une mise en page est une technique qui à largement fait ses preuves. C’est un outil précieux qui aide les graphistes à ordonner et organiser le contenu, à unifier la composition des pages et à améliorer le confort de lecture.
La rigidité des grilles n’est que apparente et ne doit pas vous inhiber dans la création de vos compositions. N’hésitez pas à explorez la multitude de possibilités qu’elles vous offrent.
Inspirez vous des journaux, magazines et autres support du print. Vous y trouverez d’innombrables exemples de mise en page créatives à base de grilles. Regardez également autour de vous, les grilles se retrouvent partout, dans les motifs, l’architecture, les objets de notre quotidien …
Sur le web, allez faire un tour sur la galerie CSSJuice, vous y trouverez des exemples de sites basés sur un design « grille ».
Sources :
- Ouvrage : The complete Graphic Designer – Ryan Hembree – Edition Rockport
- Design & Typo « Grilles de Mise en Page | typographie web et print«