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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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

petit-nautile.pngDans 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.

spirale-logarithmique.gif

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.

nautile-logarithmiquegif.gif

Une galaxie qui vaut son pesant d’or ?

galaxie-spirale-nombre-d-or.jpg

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

nombre-d-or-design.gif

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

racine-carre-deux.png

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 !

colonnes-racine-carre-deux.png

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 ;)

2-colonnes-nombre-d-or.png

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

suite-fibonacci.png

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.

grille-960-pixels.png

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

2-cols-header-footer-racine-carre.png

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

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



88 commentaires pour “Nombre d'or, suite de Fibonacci et autres grilles de mise en page pour le design web”

  1. Alexandre dit :

    Juste un truc : OMG !

  2. leGizz dit :

    Et toi ? Utilises-tu l’une des ces règles ?

  3. Bruno Bichet dit :

    @Alexandre : lol ;)

    @leGizz : rarement à vrai dire, autant quand je faisait de la pao j’utilisais toujours une grille pour placer mes éléments, autant sur le web, je fais au mieux avec la résolution des écrans…

    Par exemple pour le design de css4design j’ai fait en sorte que la lecture ne soit pas trop pénible en 800×600 : un coup de scroll latéral permet d’avoir soit la colonne de gauche + le contenu ou le contenu + la colonne de droite.

  4. leGizz dit :

    Ok, ça me rassure ;)

    …je ne voudrai pas être le seul à ne pas utiliser ma calculette pour webdesigner :p

  5. Bruno Bichet dit :

    @leGizz, ceci dit, ce billet a été une manière d’explorer à nouveau le concept de grille pour m’en servir un peu plus à l’avenir ;)

  6. leGizz dit :

    Of course ! Il est toujours bon d’essayer de nouvelles techniques, même si c’est pour revenir aux anciennes méthodes par la suite (ça m’arrive assez régulièrement). Dans tous les cas c’est formateur.

    Petit oubli dans mon premier commentaire : félicitation pour cet article !

  7. Vincent V dit :

    Merci, merci, merci pour cet article.

    En quelques ligne je me suis retrouvé 7 ans en arrière sur les bancs de la fac la première fois où j’ai entendu parler du nombre d’or et de la suite de Fibonacci.

    J’utilise la règle des tiers pour la plupart de mes photos http://www.flickr.com/photos/hapax-pict/ mais je n’ai jamais vraiment utilisé ces principes pour mes sites.

    Raaahhhh ça y est j’ai envie de refaire toutes mes mises en pages !!!

  8. gabyu dit :

    un grand classique que ce nombre d’or, merci pour les explications en langue francaise

    Gabriel

  9. Cedric dit :

    Damned, en voilà un article passionnant ! Comme Vincent, ca me donne aussi envie de refaire tous mes sites…

  10. pickupjojo dit :

    Excellent article dont j’ai lu la quasi-majorité, son contenu étant excellent mais peut-être un peu poussé parfois. Bref, je vais me coucher moins bête et me rends compte que le design de mon blog n’a rien de ‘parfait’. :)

  11. burningHat dit :

    Hi, excellent article amigo… très clair et bien construit ! Question: tes récentes lectures sont-elles liées à tes (ré-)explorations des designs par grilles ? ;) (tout ça pour dire: j’ai toujours pas eu ton retour sur « Transcending CSS » :p)

  12. Bruno Bichet dit :

    @burningHat > En fait, j’ai fait le ménage dans ma bibliothèque et je suis tombé sur des vieux bouquins sur le secrétariat de rédaction, la mise en page, que j’ai relu avec plaisir.

    Quant à Transcender CSS, je l’ai acheté suite à ces lectures dans l’espoir d’y trouver des méthodes modernes, efficaces pour le design web, mais de ce point de vue, j’ai été très déçu…

    Il y a bien des chapitres très intéressants sur le balisage d’un document, etc. sur la sémantique des balises, sur les grilles, mais en revanche, j’ai trouvé les techniques de « prototypage » un peu « foutage de gueule » : je cherchais, moi, des techniques pour faire des vrais sites et pas des maquettes à présenter au client !

    Donc, je suis un peu partagé sur le bouquin. Mais j’essaierais de faire une note dessus à l’occasion ;)o

  13. burningHat dit :

    Yop j’ai comme l’impression qu’on va partagé un avis mitigé sur ce bouquin les deux :p (je passe des « oh c’est excellent ! » à des « hin ? il rigole ? » dubitatifs à chaque relecture de passages :D).

    Tu pourrais faire passer les titres, ISBN, etc des bouquins que tu as relu avec plaisir stplé ? c’est le genre de trucs qui m’intéresse au plus haut point ! :D

  14. Bruno Bichet dit :

    @burningHat > C’est vrai que j’aurais pu mettre la bibliographie. Allez, je la rajoute à la fin du billet ;)

  15. T’es un grand malade bruno.

  16. DavidM dit :

    Excellent article, à relire le matin

    Pour rajouter une pierre (ou un caillou) les cinq côtés du pentagramme ont un rapport de 1.618, tout comme le Nombre d’Or. Et dans la nature on le retrouve dans la répartition des graines dans une fleur de tournesol ou de marguerite.

  17. Jeff dit :

    Tiens un petit programme dont je me sers raisonnablement (en ligne ou téléchargeable d’ailleurs) qui calcule des chiffres selon le nombre d’or : phiculator :

    > http://www.thismanslife.co.uk/main.asp?contentid=phiculator

  18. burningHat dit :

    @Bruno : Merci beaucoup !

    @Jeff : sympa ton lien ;)

  19. Forge dit :

    Autodidacte, j’ai longtemps cherché ce type d’éclairage pour mes maquettes et je tiens à te remercier pour cet article, que je trouve excellent.

    Il me permet d’entendre enfin parler de structure de l’image (au sens « ce qui est vu »). Des idées à creuser, de nouvelles voies à explorer, un nouveau monde quoi. Ca, plus la lecture de l’excellent bouquin d’Amélie « ergolab » Boucher… « y a pu ka » :-)

  20. Bruno Bichet dit :

    @DavidM > Merci pour l’info, il y a aussi la croissance des feuille d’un arbre qui suit, parait-il la suite de Fibonacci. Je savais pas pour le pentagramme.

    @Jeff > PMerci ! Je l’avais dans mes tablettes, mais comme ça faisait longtemps que j’avais commencé l’article, dans ma précipitation à le publier, j’ai complètement zappé la liste de liens utiles à la fin… C’est vrai que phiculator est très pratique.

    @Forge > Ton commentaire me fais très plaisir et m’encourage à me lancer dans l’écriture d’autres articles sur le sujet, en adaptant pour le web les techniques utilisées dans le monde du print.

  21. artxtra dit :

    Excellent article. J’ai toujours bien distingué les logiques de conception entre web et print, mais c’est vrai que la question des proportions, ou grille de design, est commune aux 2. Cela dit, avec les écrans de portable (et de mobile), le rapport 1.33 est faussé. Je me suis amusé une fois à faire un script qui calculerait le ratio largeur/hauteur de la fenêtre d’affichage, et génèrerait un design harmonieux en conséquence, mais c’est vite devenu une vraie usine à gaz…

  22. Bruno Bichet dit :

    @artxtra > je l’évoque rapidement dans l’article, mais effectivement, une des raison du faible emploi des grilles basées sur le nombre d’or ou la suite de fibonacci provient essentiellement du nombre d’info à maquetter. Dans le print, ces grilles sont plutôt réservés à des ouvrages sur les arts ou les collections haut de gamme.

    L’utilisation d’une grille est plus fréquente et la plupart du temps on en utilise une sans même s’en rendre compte ; on peut faire des designs qui tiennent la route sans pour autant expliciter la grille. Mais après quelques essais, je me rend compte que le temps passé à mettre une grille en place peut-être rentabilisé assez rapidement par la suite.

    En tout cas, cet article devrait avoir des petits sous peu ;)

  23. artxtra dit :

    j’ai hâte de les lire, alors ;-)

  24. Forge dit :

    Je connaissais la suite de F., et la théorie qui dit qu’une image doit être structurée, et gna gna gni, et gna gna gna. En attendant, ça ne me disait pas comment ça marchait. Donc je réitère mes félicitations (ça fait « lèche-bottes » mais je vous assure que je suis très reconnaissant à M. BB pour cette mise en lumière).

    « En tout cas, cet article devrait avoir des petits sous peu. »

    Bon, ben j’ai plus qu’à me RSS’iser. Vivement les petits !

  25. Bruno Bichet dit :

    @Forge > « Lèche-bottes » c’est quand les compliments ne sont pas mérités, tu ne risque rien ^_^v

    En tout cas, au risque de donner l’impression de caresser les lecteurs dans le sens du poil, je réitère à mon tour mes remerciements pour tes remerciements :))

    En tout cas pour la suite, ça me donne le courage de me replonger dans le bouquin Grids… pour voir comment je peux adapter les conseils donnés (pour le print à l’origine) au design web

  26. Nicolas dit :

    Excellent post ! Voici une variante que j’utilise en print et en web : plutôt que de prendre en référence la taille de la typo, je prends la taille de l’interlignage (la grille de ligne de base en PAO), les résultats sont assez amusants surtout si on utilise un Fibonacci entrecroisé (où l’interligne ET la taille de typo sont dans la suite), cela a visiblement servi au Modulor de Le Corbusier. Tout cela est tiré de l’excellent ouvrage « The Elements of Typographic Style » de Robert Bringhurst grâce auquel j’ai pu faire le lien entre rythme (musical) et les espaces dans la page.

  27. Pourquoi une mise en page qui respecte cette suite serait-elle harmonieuse ?

  28. Bruno Bichet dit :

    @Nicolas > l’exemple de la typo que j’ai donné sert surtout d’illustration, mais on pourrait tout aussi prendre la largeur d’un visuel, ou même pourquoi pas la largeur d’un encart publicitaire pour bâtir une mise en page harmonieuse… Ou, encore la largeur d’un widget indispensable qui pourra ainsi être mis en valeur.

    Ce qui m’amène harmonieusement :°) à la question de @Acidifié. J’ai plusieurs pistes de réponses qu’il faudrait détailler, mais on peut déjà élargir la question à pourquoi des choses sont considérées comme harmonieuses et d’autres pas.

    1) Comme l’a démontré Léonard de Vinci, le corps humain est construit selon des proportions qui n’ont rien d’hasardeuses, il ne semble donc pas illogique que l’oeil humain soit sensible à certaines proportions.

    2) Un des canons de la beauté chez les êtres humains est basé sur la symétrie car notre corps (mais aussi pratiquement tous les être vivants) l’est aussi.

    Une mise en page idéale devrait donc être – si je reste fidèle à la raisons n°1 – symétrique. Mais c’est sans compter une caractérique importante chez l’humain : l’ennuie.

    Nous nous ennuyons vite et destestons les choses répétitives, de sorte que pour maintenir l’attention, il est important d’apporter des éléments asymétriques pour booster l’intérêt.

    Mais, comme le besoin de symétrie est toujours là, il faut fournir une asymétrie qui ait du sens pour le cerveau, par exemple la règle des tiers qui est très présente dans les proportions de l’être humain (cf Vitruve).

    Voilà. Pour finir, je dirais que ces proportions « mathématiques » ne sont pas sorties d’un chapeau quelconque, mais sont le résultat d’observations empiriques de choses que l’on trouve dans la nature, source de toute harmonie…

    3) Reste que le débat est toujours ouvert sur ce qu’est le beau, vue que tous les goûts sont dans la nature…

    Sinon, tu peux jeter une oeil sur cet article consacré à la création d’une charte graphique qui reprend les fondamentaux avec pas mal de liens.

  29. Mouais, ça reste à prouver tout ça, d’autant plus que l’homme de Vitruve n’a rien à voir avec le nombre d’or ou la suite de Fibonacci ;)

  30. Jeff dit :

    S’il n’y a certes pas « trace » direct du nombre d’or dans l’homme de Vitruve, Leonard de Vinci a néanmoins réalisé ce croquis selon ce qu’il a pu observé dans la Nature. Et il n’est point besoin d’aller chercher très loin pour remarquer que ce chiffre/ce rapport est très présent. Si tu regardes bien les tableaux de De Vinci, tu remarqueras que la composition des tableaux tient souvent compte du rectangle d’or. Ce n’est pas pour rien que ses tableaux dégagent une telle harmonie. Je dirai surtout qu’il suffit de faire des tests. Prends deux photos d’un personnage. D’un côté tu le cadres au milieu comme tout un chacun serait tenté de faire. Et prends en une seconde mais en plaçant le personnage un peu en bas à droite (plus ou moins le rectangle ABCD de la spirale d’or), eh bien tu remarqueras que la photo est bien plus « impactante » dans le second cas. Sa lecture sera bien plus confortable.

  31. Jeff dit :

    Reste bien sûr que le nombre d’or n’est pas la seule technique efficace (règle des 2/3, gestion du Noir, etc.). Mais son efficacité est prouvée :)

  32. [...] Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web par Bruno Bichet [...]

  33. netrun dit :

    Merci pour ce billet. Je viens de « retrouver » ce que j’avais appris en PAo et en Typo… Utiliser unsysteme de grille pour un maquettage parait assez evident, mais la structurer selon le « nombre d’or » est un sacre challenge, pourtant, je crois qu’en web comme en impression, cela peut vraiment apporter un « plus », une touche indefinissable de classe. La vraie question ne serait elle pas: pourquoi, du moins dans les alphabets occidentaux, ce type de rapport parait tellement « confortable » a voir? Je verifierai un de ces 4 avec un alphabet autre, juste comme ca ;)

  34. Bruno Bichet dit :

    @netrun > oui, effectivement, l’utilisation d’une grille est assez évident lorsqu’on a une formation de graphiste ou d’infographiste, mais il y a énormément de gens qui font des sites internet avec un background parfois très éloigné du graphisme (développeurs, webmaster, gérant de boutique en ligne, etc.) pour qui la notion de grille de mise en page est totalement étrangère.

    @jeff > je me suis limité au nombre d’or et à fibonacci parce qu’à l’origine, je voulais juste présenter le thème The ideal Website, et je me suis laissé emporté par les événements ;)

    Il reste énormément de technique de mise ne page à explorer.

  35. [...] La première, c’est que je vais héberger mon blog chez un hébergeur classique (pour le moment il est chez wordpress) avec mon propre nom de domaine. Je pourrais ainsi personnaliser plus facilement mon blog. Et justement pour ce qui est de la personnalisation je me suis lancé dans la création d’un thème pour wordpress. Quoi?? Un thème pour wordpress?? Vivi! Mais je ne fonce pas tête baissée! Je suis en train de suivre les tutoriels de Fran6 et br1o pour voir comment fonctionne le moteur de templates de WP (wordpress). Ensuite place au design : croquis, photoshop, découpe, intégration, CSS. Puis transfert des billets, commentaires, etc etc. Pour le design je vais également suivre les excellents conseils de Br1o. [...]

  36. Francis dit :

    Je viens de découvrir cet article via un autre, et je me suis dit: « comment j’ai pu passer à travers ?… Il est pas si vieux pourtant ?? O_o « 

    Mon avis là-dessus est assez partagé. J’ai pas mal utilisé ces techniques en peinture et illustration, mais surtout au début en fait, lorsque j’étudiais. Le nombre d’or j’en ai entendu parler en long et en large comme quasiment d’un impératif… Idem pour les couleurs complémentaires et les sens de lecture des peintures. Du coup, quand tu te retrouves en face de ta toile, tu as tellement de contraintes que la créativité et l’imagination sont quasi complètement étouffés. Certains artistes y arrivent facilement mais la plupart de nos jours préfèrent s’exprimer de A à Z plutôt que de tenter de s’exprimer tout en devant prendre en compte plusieurs hypothèses.

    Cela dit, ça peut être pris également comme une source de créativité, si on les utilise à bon escient. Par exemple, dans cet article de Mark Boulton, bien qu’on soit en print, on peut utiliser le nombre d’or ou tout autre « division » pour réaliser un système de grille. On divise et redivise pour arriver sur une grille au design particulier à partir duquel on peut s’exprimer.

    Et c’est article m’a fait réfléchir puisque j’ai commencé des recherches de designs basées sur ce genre d’ergonomie. La première question que je me suis posée, c’est « nombre d’or ou pas nombre d’or ? ». Franchement, je reste assez réservé sur le côté « zen » d’un design doré. C’est vrai que c’est agréable mais est-ce que ça change vraiment quelque chose par rapport à placer la colonne 2 cms plus loin ? L’équilibre à trouver ne doit-il pas plutôt être personnel ?

    C’est là que je reviens vers la créativité, mais au niveau du webdesign. Tu parles d’utiliser ces suites aussi bien pour l’agencement que pour la typographie. Pourquoi pas, mais ça me rappelle l’utilisation des couleurs complémentaires. Si l’association de 2 couleurs est censée être parfaite mais qu’elle ne me plaît pas ? Je dois la laisser comme tel ? C’est sûr que dans le milieu de l’Art, on apprécie ce genre de choses: « le gars a pondu une superbe oeuvre et en plus il a réussi à n’utiliser que des couleurs complémentaires… ». Perso, je me suis retrouvé à créer des travaux avec des associations de couleurs qui ne me plaisaient pas, avec un sens de lecture (bas à gauche vers haut à droite) qui ne me parlait pas, le tout en tenant compte de la règle des 3 tiers… Au bout de quelques mois, j’ai balancé tout ça à la poubelle et me suis concentré sur la créativité. Pas mal de personnes m’ont souvent dit que la créativité était souvent limitée du fait qu’on apprend trop ce genre de choses aux étudiants… A méditer…

    Quoi qu’il en soit, pour le webdesign, je pense que c’est pareil. C’est très intéressant d’utiliser les suites de Fibonnacci, mais à condition que ça serve votre créativité. Ensuite, l’étendue de leur utilisation dépend ce que vous pouvez en faire…

    Idem pour les grilles, mais là je trouve qu’au dela des dimensions de chaque espace, elles permettent une meilleure organisation et répartition…

    Enfin, comme lecture, le bouquin incontournable pour les « grids », c’est Grids Systems in Graphic Design. C’est en tout cas celui recommandé par les plus grands designers…

    Encore merci Bruno pour cet article !! ;-)

  37. Francis dit :

    Kazel machin chose, adepte de Fibonacci à ce que je vois !! :mrgreen: J’ai jamais trop compris l’intéret de ce genre de spam qui ne sert à rien sauf à emmerder le monde… ;-)

  38. Anonyme dit :

    Nombre dor, suite de Fibonacci et autres grilles de mise en page pour le design web…

    Si les plus grands artistes ont utilis les grilles de mise en page bases sur le nombre d’or ou la suite de Fibonacci, pourquoi ne pas s’en inspirer pour concevoir le design d’un site web ou d’un blog ? Cet article propose plusieurs pistes pour util…

  39. Greg-J dit :

    énorme l’article… De quoi remettre en cause plus d’un webdesigner, moi le premier… Mais bon je rejoins quand même Fran6 sur un point : la créativité d’abord !!! On va pas non plus se pendre à cause d’un mec qui a pondu une suite de chiffre et qui n’a même pas connu Internet ;) !!

  40. [...] Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web » « Background CSS : des fonds hachurés avec la “positive attitude” [...]

  41. wassy dit :

    Bonjour à tous,

    Le lien vers « The Ideal Website 1.1″ ne mène plus directement au thème et… je n’arrive plus à le retrouver. Une idée ?

    Merci,

    BB.

  42. Bruno Bichet dit :

    @wassy: Yep, effectivement, le thème The Ideal Website semble avoir disparu des thème WordPress. En attendant, voici le lien depuis le site des auteurs : http://informationarchitects.jp/The_ideal_Website.zip

  43. mihai dit :

    Très bon article, comme quoi… la science exacte et l’art se rencontrent.

  44. jul dit :

    Merci pour ce bel article!

  45. Olivier G. dit :

    Article superbe, mais que la découpe en chapitres est frustrantes ! Pourquoi avoir mis ça en place, ton écran est trop court ?

  46. Bruno Bichet dit :

    @Olivier G.: Merci :) J’avais mis en place la pagination sur certains billets pour éviter que les plus lus d’entre eux n’augmentent le taux de rebond général… A l’époque, c’était plus un test qu’autre chose. Je supprimerai la pagination sur ce billet en particulier et sur quelques autres à l’occasion.

  47. Olivier G. dit :

    « n’augmentent le taux de rebond général… » Gné ? C’est quoi, un taux de rebond général ?

    Merci d’avoir supprimé la pagination en tout cas, c’est bien plus agréable.

  48. Bruno Bichet dit :

    @Olivier G.: de rien ;) Pour le taux de rebonds : parmis mes billets les plus lus, figure un tuto sur le détourage des cheveux sur photoshop. Etant le seul de sa catégorie, les visiteurs quittaient naturellement le site une fois qu’ils avaient lu l’article. Du coup, vu le nombre, le taux de rebond était assez important à cause de cet article.

    Pour pallier à ça, j’ai pensé à la pagination de ce billet pour passer un une page vue à x pages vues. De fil en aiguille, j’avais étendu ce principe à quelques autres billets, dont celui-ci.

  49. ADVERTISE! // 4elementmix.com Blogs dit :

    [...] du nombre d’or et son influence dans le Web Design (vous pouvez d’ailleurs regarder le très bon article de Br1o à ce [...]

  50. [...] du nombre d’or et son influence dans le Web Design (vous pouvez d’ailleurs regarder le très bon article de Br1o à ce [...]

  51. Ouchh (O_o) … Vraiment très très complet cet article !

    J’avais fait des recherches sur la suite de Fibonacci et le nombre d’or mais je crois que cet article est finalement bien plus complet et plus proche des informations que je comptais trouver (Adaptation de la suite et du nombre d’or au Webdesign).

    Donc vraiment merci Bruno, ton article est passé dans mes favoris, dossier « construction web » :)

  52. le bateleur dit :

    La maitrise, voir l’expertise est atteinte lorsque la main (ou le reste) est capable d’atteindre ces proportions sans les rechercher (c’est à dire sans les calculer) Tout comme celui qui a appris la modulation de la phrase construit des ensembles de mots qui satisfont aux harmonies dont nous sommes pétris sans avoir besoin de compter les pieds.

    Chez eux, le nombre dort ! la pensée créatrice seule est éveillée.

  53. [...] dans les frameworks CSS. S’il suffisait de tomber sur des dizaines entières pour avoir des proportions harmonieuses, ça se saurait ! En matière de web design, quelques pixels de plus ou de moins peuvent faire la [...]

  54. [...] layouts. You can arrange the layout in different ways according to Fibonacci numbers. The article “Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web” (in French) explains in more depth the application of Fibonacci numbers to Web design. Again, [...]

  55. [...] layouts. You can arrange the layout in different ways according to Fibonacci numbers. The article “Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web&#8… (in French) explains in more depth the application of Fibonacci numbers to Web design. Again, [...]

  56. [...] de grille est le fruit d’une recherche constante de la grille parfaite : rien de tel que le nombre d’Or pour se rapprocher des dieux [...]

  57. [...] layouts. You can arrange the layout in different ways according to Fibonacci numbers. The article “Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web&#8… (in French) explains in more depth the application of Fibonacci numbers to Web design. Again, [...]

  58. [...] puede organizar el diseño de diferentes maneras según los números de Fibonacci. El artículo "Nombre d’Or, de Fibonacci et autres rejillas suite de mise en page pour le web de diseñ… (en francés), explica con más detalle la aplicación de los números de Fibonacci para el diseño [...]

  59. [...] layouts. You can arrange the layout in different ways according to Fibonacci numbers. The article “Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web” (in French) explains in more depth the application of Fibonacci numbers to Web design. Again, [...]

  60. [...] layouts. You can arrange the layout in different ways according to Fibonacci numbers. The article “Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web” (in French) explains in more depth the application of Fibonacci numbers to Web design. Again, [...]

  61. [...] To Web Design paru chez Smashing Magazine où j’ai eu la surprise de voir mon article sur l‘application du nombre d’or et la suite de Fibonacci dans le webdesign cité dans la partie Possible Applications [...]

  62. [...] ♥ Fibonacci et nombre d'or pour le webdesign [...]

  63. Mehdi dit :

    Bonjour, Tout d’abord félicitation pour cet article. Aussi, j’aurais une question qui relève de l’ordre technique : comment fais t-on pour concevoir une grille de mise en page sur Illustrator ? Y-aurait-il des tuto spéciaux ou tout simplement des grilles de mise en pages pré-élaborées ?

    Cdlt

  64. [...] ♥ Fibonacci et nombre d'or pour le webdesign [...]

  65. zepo dit :

    J’utilise ça.

    Mais c’est juste du MEGA VU ET REVU.

  66. zepo dit :

    et d’ailleur c’est un peu simplet de faire cette spirale finalement.

  67. zepo dit :

    comme le logo de loreal quoi

  68. [...] ♥ Fibonacci et nombre d'or pour le webdesign [...]

  69. [...] ♥ Fibonacci et nombre d'or pour le webdesign [...]

  70. Toh dit :

    Merci pour beaucoup pour ce superbe article.

    Concernant les proportions, nombre d’or, racine de 2, racine de 3 … Il y a de superbes ouvrages dans un tout autre domaine, l’architecture. Notamment les livres de Stéphane Cardinaux: http://livre.fnac.com/a1559249/Stephane-Cardinaux-Geometries-sacrees

    On y découvre beaucoup de schémas directeurs de monuments ou de lieux plus ou moins connus. Avec à chaque fois l’explication détaillé sur la façon donc le schéma à été pensé. Une fois les bases acquises, on peut facilement les appliquer à la façon de présenter une page web.

    Bien entendu tous les travaux ne nécessitent pas nécessairement autant de travail on est bien d’accord et l’oeil suffit dans bien des cas.

    Cela dit je ne suis pas de l’avis de certains comme quoi tu pinailles ou que par moment tu rentres trop dans le détails. Car a ce niveau, il suffit de mettre des règles en place, pour ensuite les appliqués à >>tous<< les éléments de la page sans exception.

    Apres sur les reflexions, « oui mais la créativité dans tout ça ? ». Il suffit de regarder toutes les grandes cathédrales, elles sont toutes basées sur un rapport (nombre d’or, racine de 2 …) et ce dans les 3 dimensions, pourtant elles ne manquent pas de créativité.

  71. [...] avec le nombre d’Or Le calcul d’une grille de mise en page modulaire avec le nombre d’Or est une bonne occasion pour mettre en pratique le manifeste pour un interlignage minimum syndical [...]

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

  73. Nicolas Gilis dit :

    J’ai découvert ton site il y a plus ou moins un mois, et je dois dire que les articles qui le composent provoquent en moi un certain orgasme cérébral ^^

    Je suis toujours sur les bancs scolaires et ça me fais du bien d’entandre des professionnelles parler du nombre d’or et de la suite de Fibonacci pour une composition d’un design web. Je pensais que c’était un aspect plus « théorique » et qui était rarement utilisé en pratique en fin de compte.

    Enfin dans les commentaires tu soulignes que tu utilises rarement (jamais?) ce genre de modèle. Donc j’imagine que ca reste quand même plus théorique, mais rien que le fait d’en parlé ça fais plaisir !

    Bonne continuation à toi

    PS : mhhh Futura j’adore !

  74. Nicolas Gilis dit :

    J’ai découvert ton site il y a plus ou moins un mois, et je dois dire que les articles qui le composent provoquent en moi un certain orgasme cérébral ^^

    Je suis toujours sur les bancs scolaires et ça me fais du bien d’entandre des professionnelles parler du nombre d’or et de la suite de Fibonacci pour une composition d’un design web. Je pensais que c’était un aspect plus « théorique » et qui était rarement utilisé en pratique en fin de compte.

    Enfin dans les commentaires tu soulignes que tu utilises rarement (jamais?) ce genre de modèle. Donc j’imagine que ca reste quand même plus théorique, mais rien que le fait d’en parlé ça fais plaisir !

    Bonne continuation à toi

    PS : mhhh Futura j’adore !

  75. beninsky dit :

    Merci beaucoup pour cet article très intéressant.

  76. [...] Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? [...]

  77. [...] Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web [...]

  78. [...] Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? [...]

  79. [...] Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web [...]

  80. [...] jQuery("#errors*").hide(); window.location= data.themeInternalUrl; } }); } css4design.com – Today, 1:13 [...]

  81. [...] équivaut à environ 0.618. On dit que ce ratio se retrouve dans la nature, l’architecture, des applications web, les premiers Ipod, etc.  Le cerveau humain reconnait inconsciemment ce ratio, ce qui provoque une [...]

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

  83. weber bryan dit :

    la figure n’est pas entière.

  84. bill dit :

    Salut cet article est vraiment intéressant. J’ai juste un problème, en effet les images ne semblent plus présentes dans l’article (seul leur lien s’affiche) et j’aurais aimé pouvoir voir les exemples illustrés de chaque partie pour pouvoir vraiment tout saisir. Alors si jamais l’auteur pouvait réactualiser les images ce serait vraiment sympa. Merci d’avance.

  85. remy62(remgi) dit :

    Bonjour je viens de voir ton site gg pour ces magnifiques informations mais je voudrais aussi savoir « combien y a t’il de nombre d’or dans une mise en page ? » merci de me répondre en m envoyer un email bonne journée

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site