Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web

Dans la série des thèmes WordPress minimalistes voilà The Ideal Website 1.1 proposé par Information Architect (iA). L’équilibre graphique de ce thème provient essentiellement de l’application de la suite de Fibonacci — qui fournit des rapports très proches du nombre d’or — aux différentes proportions des éléments du design. Le résultat est ce que j’ai vu de mieux en matière de mise en page pour un blog. C’est la démontration réussie que l’on peut appliquer les règles de mise en page du monde de l’imprimé à l’écran, sans rien sacrifier. Je l’avais presque oublié.

De l’architecture cosmique aux coquillages…

Parmi les applications de la suite de Fibonacci, la spirale logarithmique permet de concevoir des grilles de mise en page harmonieuses. Cette suite de chiffre est très proche du nombre d’or qui a inspiré les plus grands artistes.

Ce nombre d’or peut-être utilisé de différentes manières. Il est possible, par exemple, de créer un rectangle d’or dont le rapport entre la longueur et la largeur vaut le nombre d’or, soit 1,618 en simplifiant.

Avec ce rectangle d’or, construisons une spirale d’or en traçant des 1/4 de cercle dans chaque carré. Voir spirale logarithmique.

Nous pouvons voir cette spirale à l’oeuvre dans la nature sous des formes diverses, que ce soit dans la forme de certaines galaxies, ou dans la construction des certains animaux.

La forme de ce nautile est très proche d’une spirale logarithmique.

Une galaxie qui vaut son pesant d’or ?

… En revenant au design d’un site web

C’est bien beau, mais comment faire pour mettre ce nombre d’or en pratique pour construire une grille de mise en page ?

Avec The Ideal Website, iA apporte sa réponse en utilisant la série de Fibonacci pour déterminer la taille et la distance des éléments entre eux.

Différence entre la mise en page pour l’imprimé et l’écran

Si les fondamentaux du graphisme et les habitudes de lecture ne sont pas bouleversés par le passsage de l’imprimé à l’écran, il y a une chose que l’on oublie parfois, c’est que les règles de mise en page d’un magazine papier ou d’un livre sont inextricablement liées depuis des centaines d’années au coût induit par l’ensemble des techniques d’impression : format, grammage, trame d’impression, noir et blanc, niveau de gris, quadri, ton direct, etc.

Ainsi, on notera que les collections bon marché présentent des marges et un interlignage réduits pour limiter le nombre de pages à imprimer. Les collections haut de gamme présentent, quant à elles, un contenu encadré par des marges généreuses savamment calculées pour offrir un rectangle d’empagement optimal.

Sur le web, les coûts liés au support sont en grande partie supportés par l’utilisateur (ordinateur, écran) et par l’éditeur (hébergement, bande passante). Ce qui implique qu’une grande partie des conditions dans lesquelles la page sera consultée échappe au concepteur. Parmi ces conditions : le format de l’écran (16/9ème, 16/10ème ou 3/4) ou sa résolution (1024 x 768, 1280 x 1024, 1440 x 900, etc.).

Les formats de base du design

En attendant d’avoir des écrans ronds, les formats de base de toute mise en page sur le web sont le carré et le rectangle (qui n’est d’ailleurs, qu’une version allongée du carré). Reste à déterminer les proportions idéales pour obtenir un « beau » rectangle à partir d’un banal carré.

En effet, toutes les proportions ne se valent pas : certaines seront plus harmonieuses que d’autres. Il existe plusieurs méthodes pour obtenir des rectangles aux proportions particulières à partir d’un carré :

A la recherche du format A4

Une technique simple pour obtenir un rectangle harmonieux

Avec votre logiciel de dessin préféré :

1. dessinez un carré et à partir du point inférieur gauche (A) tracez un cercle jusqu’au point supérieur droit du carré (C).
2. Prolongez ensuite les lignes A D et B C vers le haut, au moins jusqu’au point d’intersection avec le cercle (D1) pour la ligne A D.
3. Tracez un trait parallèle à D C à partir de D1 jusqu’au point C1 pour obtenir un rectangle en A B C1 D1 (ou en A B2 C2 D si vous travaillez dans l’autre sens).

Et voilà, deux colonnes prêtes à l’emploi !

Nous obtenons donc une base harmonieuse pour un design en deux colonnes équilibrées de manière géométrique avec des proportions dans un rapport de 1,4142 soit la racine carré de 2.

Ce ratio hauteur/largeur correspond à celui que l’on rencontre dans le format des feuilles de papier de la série A (A4, A3, A2, A1, A0, etc.) tel que définit par l’Afnor (Association française de normalisation).

Ce qui permet, lorsqu’on respecte le ratio du début à la fin de la mise en place d’une identité graphique pour une entreprise, d’harmoniser les formats : A4 (210 x 297) pour les lettre en-tête, et A7 (74 x 105) pour les cartes de visite, par exemple.

Le nombre d’or

L’exemple précédent utilisait le rapport de la racine carré de deux. Le nombre d’or quant à lui utilise le rapport 1,618 ou (1 + racine-carré de 5) / 2.

Soit une largeur totale de 450 pixels divisée par 1,618 pour un résultat de 278 pour la colonne la plus large et 172 pixels pour la sidebar. N’hésitez pas à arrondir en 280px et 170px pour simplifier 😉

L’emploi de la section dorée donne une impression de repos, de sécurité, de constance dans un rythme indéfiniment continué.
R. Bouveresse dans le Nombre d’or, Psychologie n° 77, juin 1977.

La suite de Fibonacci

C’est en cherchant à décrire la la croissance d’une population de lapins que Fibonacci a sorti la série suivante : 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, etc.

Cette suite se caractérise par le fait que l’addition des deux premiers chiffres a le troisième comme résultat, et ainsi de suite (si j’ose dire…).

Représentation visuelle de la suite de Fibonacci

Remplir l’espace de la feuille blanche

Maintenant que vous avez décidé du meilleur rapport hauteur/largeur pour déterminer votre rectangle, il reste à occuper cet espace. On peut utiliser les mêmes techniques que pour la structure, mais les ratios paraitront souvent trop importants pour être utilisés dans des colonnes étroites ou même dans la zone de contenu selon la densité du éléments à maquetter.

La règle des tiers pour remplir votre rectangle

Parmi les techniques les plus utilisées dans les arts graphiques et la photographie, on trouve la règle des tiers qui vient à notre secours pour nous guider sur la meilleure façon de disposer les éléments de notre mise en page.

Il semble que les photographes et les peintres se soient plus que les autres appropriés cette règle de composition, mais rien n’empêche les webdesigners de s’en inspirer pour placer les éléments-clés de leur charte graphique.

Appliquer une grille en fonction du nombre de colonnes

Actuellement très en vogue dans le design des blogs de type magazine avec l’utilisation des frameworks CSS comme Blueprint, la mise en place d’une grille de mise en page en 6, 8, 12 ou 24 colonnes avec gouttière est relativement simple à mettre en place. Il s’agit de diviser la largeur de votre design en colonnes espacées par une gouttière (margin-right).

24 colonnes à la une en 950 px

Par exemple, Blueprint propose une grille pour un design fixe de 950 pixels de large divisé en 24 colonnes de 30 pixels espacées de 10 pixels, avec un interlignage de 18 pixels (soit un rapport de 150% par rapport à la taille du texte de référence — 12 pixels), soit la formule : largeur totale = (nombre de colonnes * 40) – 10 — où 40 est la valeur d’une colonne de 30px + une marge droite de 10px et où -10 est la valeur de la gouttière retranchée pour la dernière colonne.

Si vous ne voulez pas utiliser de framework prêt à l’emploi, rien ne vous empêche de créer votre propre grille que vous placerez en background de votre container principal pour l’avoir sous les yeux pendant le développement.

16 colonnes à la une en 960 px

La grille fournit par Blueprint est basée sur une largeur de 950px ou sur des multiples de 30 pixels pour les colonnes. Si vous voulez une largeur de 960 pixels, je vous propose une grille en 16 colonnes de 45 pixels chacune avec une gouttière de 16 pixels (le plus dur, c’est de tomber sur des valeurs entières, faut tâtonner un peu…), soit la formule suivante : largeur totale = (nombre de colonnes * 61) – 16.

En haut : élément de base pour la grille.
En bas : le même élément répété en background sur le container.

La taille du texte comme point de référence ?

Avant de commencer à bâtir un design à partir de proportions — aussi divines soient-elles — il nous faut une valeur de référence. Il peut s’agir de la largeur d’un visuel ou d’une colonne de texte.

Dans le cas d’un blog constitué principalement d’articles, il peut être judicieux de partir du corps de texte le plus faible que vous aurez identifié : les notes de bas de pages, les mises en exergues ou les légendes des photos sont de bons candidats. Là, c’est à vous de baliser (n’ayez pas peur…) l’ensemble de votre contenu pour identifier tout les niveaux hiérarchiques.

Admettons que vous décidiez que les légendes des photos auront le corps le plus faible. La taille minimum légale pour afficher des Conditions Générales de Vente oscille entre 7 et 8 points à l’impression. A l’écran, une taille de 9 pixels semble vraiment le minimum.

La différence principale qu’il y a entre l’imprimé et le web n’est pas tant le choix restreint des polices sur ce dernier que leur rendu qui peut varier radicalement selon la taille. L’exemple le plus flagrant concerne Verdana, disgracieux à 100% mais très classe à 85%. A contrario, Times New Roman n’est pas très lisible à 85% mais « rend » très bien à 100% et au-delà.

La conséquence sur votre design web, c’est que vous ne pourrez pas jouer subtilement sur le corps et la graisse des caractères : si à l’impression toute la gamme des tailles est rendue parfaitement (quoique l’encre peut boucher les corps les plus faibles), certaines polices ne seront pas bien dessinées selon la résolution de l’écran ou les effets comme Cleartype qui peuvent être activés ou non.

Petit mais costaud

Si nous prenons 9 pixels comme taille minimum, les suites peuvent-elles nous aider à déterminer la taille des différents niveaux de titre ?

En utilisant 1,41 comme coefficient multiplicateur (racine-carré de 2) :

• H6 — 9 pixels
• H5 — 13 pixels
• H4 — 18 pixels
• H3 — 25 pixels
• H2 — 35 pixels
• H1 — 49 pixels

A noter que nous ne sommes pas obligé de distinguer les différents niveaux de titres par des tailles différentes, et que dans de nombreux cas, un changement de couleur ou de contraste peut s’avérer plus judicieux. D’autant plus que pour les moteurs de recherche la taille n’est pas un critère discriminant 😉

Par ailleurs, tous les niveaux de titre ne sont pas systématiquement utilisés, ce qui peut permettre de réduire l’écart entre h6 et h1.

Déterminer la largeur des colonnes

Première méthode :
Pour déterminer la largeur des colonnes de texte, c’est encore plus simple : une fois que la taille des textes est définit, il suffit de compter le nombre de mot que les colonnes devront accueillir, sachant que 15 mots par ligne est parfait pour la lecture.

Ainsi, en fonction de la taille du texte et du nombre de caractères par ligne, nous avons une largeur de colonne qui peut servir de base pour induire les autres valeurs par le jeu du coefficient multiplicateur du nombre d’or ou de tout autre ratio.

Notez toutefois qu’une ligne de 15 mots à 9px n’est pas vraiment d’une lecture aisée, et qu’il sera sans doute nécessaire de diviser par 2 le nombre de mots. Dans ce cas, pensez aussi à dimininuer l’interlignage pour conserver un gris typographique harmonieux.

Deuxième méthode :
On peut également partir d’une largeur de colonne en s’inspirant des chiffres vus plus haut pour les niveaux de titre. Si on les multiplie par 10, on obtient les valeurs suivantes : 90, 130, 180, 250, 350 et 490 que l’on peut utiliser comme suit :

• Colonne principale : 490 pixels,
• Barre latérale 250 pixels,
• Gouttière : 20 pixels.
• Largeur totale : 760 pixels.

On peut en profiter pour ajouter un header et un footer :

• Header : 760 x 90,
• Footer : 760 x 30 (multiple de 90).

Exemple de design bâti sur la racine-carré de 2

Pour conclure

L’application d’une suite mathématique ou d’un ratio pour contruire une grille de mise en page est rarement mis en application sur le web autant en raison des contraintes imposées par la grille elle-même que par la nature dynamique d’un site web : difficile, par exemple, de prévoir des images pour rythmer la mise en page des articles d’un site, si le client a la liberté — via le CMS — de ne pas les mettre. Il faut donc anticiper la présence ou l’absence d’image.

Une des contraintes fortes qui limitent l’application d’une grille sur le web, c’est le fait que contrairement à l’imprimé qui possède toujours une hauteur, le site web, lui n’en n’a cure : chaque page peut avoir une hauteur différente. Il faudra donc veiller à ce que la grille de mise en page s’exprime par palier pour être visible tout au long du défilement de la page et pas seulement dans le haut de la page.

Toutefois, les bénéfices apportées par les tracés régulateurs en terme d’harmonie et d’équilibre tout au long de la navigation, font pencher largement la balance en leur faveur. Une fois mise en place, la grille impose son rythme pour le moindre élément, ce qui évite de se poser des questions existentielles sur la taille d’un champs texte ou sur l’emplacement d’une nouvelle rubrique.

Bibliographie

Il s’agit surtout de livres assez anciens. Si vous avez des références plus actuelles n’hésitez pas à en faire profiter tout le monde dans les commentaires 😉

• Maquette et mise en page — Pierre Duplan et Roger Jauneau — Editions du Moniteur, 1992 (ISBN 2 281 31051 5),
• Typographie — Emil Ruder — A. Niggli Ltd, 1988 (ISBN : 3 7212 0043 8),
• Le secrétariat de rédaction — Louis Guéry — Editions du CFPJ, 1990 (ISBN 2 85900 045 3),
• Typographie, du plomb au numérique — Jean-Luc Dusong et Fabienne Siegwart — Dessain et Tolra, 1996 (ISBN 2 04 021744 4),
• Grids, the structure of graphic design — André Jute — Rotovision, 1996 (ISBN 2 88046 277 0),
• Tous les numéros d’Etapes Graphiques…