Lorsque l’on conçoit un site internet, il faut réfléchir à la façon dont on va disposer les éléments qui vont constituer nos pages. Quelle largeur pour ce site, combien de colonnes, quelle largeur pour chacune d’entre elles, quelle largeur d’espacement entre mes éléments … Autant de questions qu’il va falloir se poser tôt ou tard. Nous allons voir que l’utilisation d’une grille peut être d’une aide précieuse pour trouver les réponses à ces questions.

Le concept

L’utilisation d’une grille dans le processus de mise en page nous vient de l’imprimerie ou les graphistes l’utilisent depuis longtemps pour composer sur support papier.

Même si les contraintes du support papier et de l’écran sont différentes, l’utilisation d’une grille rend les mêmes services. L’idée est simple. Elle consiste à se servir d’une grille comme d’un guide pour caler le long des lignes horizontales et verticales les éléments constitutifs d’une page (bloque de texte, photo, bannière, logo, pied de page, bloque menu …).

La grille nous aide donc à organiser les éléments sur la page non pas de façon aléatoire ou intuitive mais de façons structurée et précise.

Pourquoi utiliser une grille en webdesign ?

Harmonie globale

Comme nous venons de le voir la première raison est de disposer d’un canevas, d’un support visuel, sur lequel on va pouvoir se baser pour combiner des éléments entre eux.

Mais ce qu’apporte avant tout l’utilisation d’une grille c’est la mise en place d’une certaine harmonie en matière de composition et de proportion. La grille structure et rythme le design améliorant le confort et la facilité de lecture du contenu de nos pages web.

Rythme vertical

L’harmonie d’une mise en page s’obtient également en respectant son rythme vertical. Les facteurs qui influencent le rythme vertical d’une page web sont :

• - La taille de la police.
• - La hauteur de ligne du texte.
• - Les espaces verticaux des titres, des listes, des paragraphes, des blocs …

Le rythme vertical est obtenu à condition de respecter une règle de proportionnalité entre les valeurs fixées à ces paramètres.

Par exemple si je choisis d’utiliser une taille de police de 12 px, je vais fixer la hauteur de ligne du texte à 18 px ce qui correspond à un rapport de 150%. Pour les titres, on pourra choisir : 24px pour h1, 18px pour h2, 12px pour h3. En partant de h1, je retranche 6 px pour chaque titre inférieur, 6 étant un multiple de 12, taille de base de ma police.

Je ne vais pas détailler ici la mise en place du rythme vertical. Vous trouverez à ce sujet de très bons articles dont voici deux références :

• - Compose to a vertical rhythm by Richard Rutter
• - Setting type on the web to a baseline grid by Wilson Miner

Quelle grille choisir ?

Pour construire une grille, il faut choisir une règle de calcul qui va déterminer les proportions du quadrillage.

Le nombre d’or

La plus connue de ces règles et celle du “nombre d’or” aussi appelé “divine proportion” basée sur le nombre Phi (= 1,618). On retrouve cette règle en mathématique avec la suite de Fibonacci mais aussi dans la nature où elle détermine les proportions de nombreux organismes vivants. Tout au long de l’histoire, la divine proportion s’est immiscé dans l’architecture et les oeuvres artistiques.

Le webdesign étant une forme d’art, l’utilisation du nombre d’or fonctionne parfaitement.

Si l’on choisie par exemple un design en deux colonnes non symétriques. Admettons que nous fixions la colonne de contenu principale à 400px, la seconde colonne, pour répondre à la règle du nombre d’or devra mesurer 400/1,618=247 soit en arrondissant 250 px.

Cette exemple simple peut être appliqué à l’ensemble de votre composition. A partir du moment où l’un de vos paramètres et fixé (largeur du site, d’une colonne, d’une image …) la largeur des autres éléments peut être calculée en utilisant un rapport basé sur le nombre Phi (= 1,618).

Pour calculer facilement les proportions entre deux mesures selon la régle d’or, James Mellers a développé une petite application appelée Phicalculator librement téléchargeable sur son site www.thismanslife.co.uk

Mark Boulton à écrit une série d’articles sur l’utilisation des grilles. L’un d’entre eux vous montre comment construire une grille basée sur le nombre d’or.

Allez également faire un petit tour sur le site Information Architects et plus précisément sur cette page qui vous propose un template Wordpress gratuit entièrement réalisé à partir de la divine proportion.

Construire sa propre grille

Si la technique du nombre d’or ne vous convient pas, vous pouvez travailler à partir d’une grille que vous aurez vous même conçu. Pour un site à largeur fixe, en fonction de la valeur que vous voulez attribuer à celle-ci, choisissez une largeur de grille qui vous permette de diviser la grille en plusieurs colonnes de même taille. A vous de choisir le nombre de subdivisions qui vous convient le mieux (5, 10, 12, 14… colonnes).

Une grille comporte également des rangées horizontales délimitées par des lignes de flux et des gouttières qui symbolisent les espaces vides. En CSS ces repères se traduiront par des blocs, marges et remplissages.

Prenons l’exemple d’un site dont la largeur totale sera de 1000 px. La grille fera 1000 px de large. Si je choisie de travailler sur une grille de 12 colonnes avec des espacements (11 au total) entre chaque colonne de 20 px, j’aurai des colonnes de (1000-(11X20))/12=65 px.

Vous pourrez trouver d’autres modèles de grille sur le net, en voici quelques unes :

• - Une grille de 960 px
• - Des grilles au format PDF.
• - Astuce : utiliser un tableur pour faire votre grille.
• - Un outil bien pratique pour construire sa propre grille sur mesure.

Comment utiliser une grille ?

Le choix de votre grille dépendra de la nature du projet sur lequel vous travaillerez et du nombre de colonnes sur lequel vous aurez décidé de baser votre design. Je pense qu’il ne faut pas avoir peur de travailler avec une grille comportant de nombreuses colonnes (10, 12, 14, 16). Vous aurez toute la liberté de créer des “super-zones” en étalant des contenus sur plusieurs colonnes adjacentes mais aussi d’organiser des “mini-zones” en vous servant de chaque colonne comme une subdivision de composition.

Une fois que vous avez choisi votre modèle de grille, vous pouvez commencer à imaginer les différentes combinaisons de mise en page. Faites plusieurs essais puis comparez les différents résultats.

Les graphistes pourront reprocher aux grilles d’être une entrave à la créativité en imposant un cadre trop rigide et restrictif. N’oublions pas qu’une page web est avant tout une présentation de contenu dans 95 % des cas et que la grille apporte de la cohérence à ce contenu. La rigidité des grilles peut être contournée en produisant des effets asymétriques. Les grilles offrent une multitude de possibilités qu’il ne faut pas hésiter à expérimenter.

Tout en vous appuyant sur la solidité des grilles, votre choix doit être déterminé par l’esthétique, l’équilibre et l’ergonomie.

Vous pouvez imprimer votre grille sur papier et dessiner vos essais de mise en page au crayon. D’autres préfèrerons dessiner les maquettes directement dans un logiciel de dessin. Dans ce cas copiez votre grille sur un calque “grille” et dessinez votre maquette sur un autre calque. L’idéale étant de réserver un calque pour chaque éléments pour pouvoir les permuter facilement et expérimenter différentes compositions.

Lorsque vous passerez à l’intégration xhtml/css, utilisez votre grille en image de fond (propriété CSS background). Cette méthode visuelle est plus rapide que celle qui consiste à calculer sans cesse les espacements et les positions.

Cette étape suppose bien sure que vous ayez en votre possession une connaissance de l’arborescence du site, de ses menus, du contenu et des illustrations qui accompagnerons vos textes.

Pour vous faciliter l’intégration xhtml/css vous pouvez travailler à partir d’un framework CSS qui se soucie de la mise en page à partir d’une grille. C’est le cas du projet BluePrint que je vous conseil de découvrir. A ce sujet, Barbablog donne son avis dans l’article “Blueprint, un framework pour webdesigner“.

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.

Jina Bolton en donne un bon exemple dans son article Breaking Out of the Box publié sur le site SitePoint.

Pour les allergiques aux grilles, allez faire un tour sur ce blog de Peter Gabbor : 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 à fait ses preuves depuis longtemps. C’est un support pratique pour nous aidez à organiser de façon harmonieuse notre contenu et donner de la cohérence à notre composition.

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”.

Mes sources et quelques liens en plus

Web :

• - Le nombre d’or : goldennumber.net
• - Designing with grid-based approach, une mine d’articles sur le sujet.
• - Design & Typo “Grilles de Mise en Page | typographie web et print“

Ouvrage :

- Transcender CSS, sublimez le design web ! - Andy Clarke - Edition Eyrolles

PDF :

- Un exemple pratique d’une mise en page à l’aide d’une grille.