Catégories
Digital Ressources

Rythmer votre design avec le nombre d’or

Le nombre d’or, ou « phi » en référence au sculpteur Phidias, est égal à 1/2(√5+1) soit environ 1,618.

Petite histoire de ɸ

La découverte du nombre d’or remonte à l’antiquité et sa définition à été enrichie au fil de siècles, y compris pendant le moyen-âge.

Les contributions majeures aux recherches mathématiques sur le nombre d’or sont celles d’Euclide, de Thalès et Pythagore, mais c’est sans doute à Fibonacci que l’on doit les avancées les plus significatives avec son Liber Abaci, ouvrage dans lequel on découvre la célèbre suite de Fibonacci, suite arithmétique dans laquelle le rapport d’un chiffre sur le précédent est égale à ɸ :

01123581321345589144233377610987

L’expression « nombre d’or » est un héritage de Léonard de Vinci qui utilisait l’expression de sectio aurea (section d’or) pour désigner ce que Luca Pacioli nommait divine proportion, ou « joyau de la géométrie » par Kepler.

Popularité du rectangle d’or

Même si les qualités esthétiques du rectangle d’or semblent faire l’unanimité, gardons à l’esprit que celle-ci est discutable. C’est pour évaluer par des faits les qualités esthétiques du rectangle d’or que Gustav Fechner, psychologue allemand, mène des tests en 1874. Il présente à ses sujets 10 rectangles blancs sur fond noir, allant du format f=1 jusqu’à f=2.5, chacun d’aire égale. Pour tester son hypothèse selon laquelle le rectangle d’or, ici f=1.62, serait naturellement préféré par son panel (lequel était composé de personnes des deux sexes, choisis sans facteurs discriminant), il demande à chacun et chacune de choisir un rectangle le plus apprécié, puis un rectangle le moins apprécié. Les résultats ont montré une préférence pour le rectangle d’or, comme le montrent les résultats suivants :

Rapport largeur/longueurf=1f=1.2f=1.25f=1.33f=1.43f=1.5f=1.62f=1.77f=2f=2.5
% d’appréciation30.222.57.720.635207.51.5
% de non-appréciation27.819.79.42.51.20.400.82.535.7

(Fechner, 1876)
Depuis Fechner, de nombreux autres chercheurs ont re-testés la même hypothèse dans des conditions différents. Si de manière générale le rectangle d’or reste le favori, il faut noter que cette préférence est rarement très marquée, et jamais précisément sur le rapport doré.

Structures géométriques de ɸ

Contrairement à une idée répandue, il n’existe pas qu’un seul rectangle d’or à proprement parler. Il existe un rectangle dont le rapport du plus grand côté sur le plus petit côté est égal à ɸ. D’autres constructions sont possibles cependant :

Parmi les formes non-rectangulaires, les plus populaires sont le pentagone régulier convexe et le pentagone régulier étoilé, ou pentagramme, en forme d’étoile à cinq branches. Deux polyèdres, tracés à partir de pentagones réguliers convexes, sont également célèbres parmi les structures géométriques relatives au nombre d’or : le dodécaèdre et l’icosaèdre.

Il existe évidemment de nombreuses autres structures liées au nombre d’or, comme des spirales ou des triangles.

Présence de ɸ dans la nature

Quand à la présence du nombre d’or dans la nature, de nombreux exemples sont déjà connus : tournesols, pommes de pins, coquillages, disposition des feuilles autour d’une tige de fleur, ou de pétales répartis en 5 points… Forment des spirales dorées, spirales logarithmiques formées à partir du nombre d’or. De même certains cristaux, dont les atomes s’organisent selon un schéma pentagonal, sont construits à partir du nombre d’or.
Il faut retenir ici que la nature a deux manières de produire des phénomènes naturels à partir du nombre d’or :
• en posant comme structure un pentagone, décagone régulier ou rectangle d’or ;
• en disposant des éléments selon une suite de nombre similaire à celle de Fibonacci.

Mythes et réalités

Afin de ne pas mystifier le nombre d’or, rappelons que si celui-ci est présent dans de nombreuses créations de la nature, si bien qu’un caractère divin a parfois été donné à ce nombre irrationnel, en faisant ainsi la clé de l’architecture universelle, il faut noter que bien d’autres nombres structurent les éléments de la nature. Les scientifiques et mathématiciens ayant cherché une structure commune à l’ensemble des éléments qui composent notre univers à travers le nombre d’or ont bien dû s’avouer sceptiques. Cela n’empêche pas les mathématiciens de tous temps d’apprécier les propriétés mystérieuses de ce nombre, ni les concepteurs-créateurs d’en faire une référence d’esthétique naturelle.

La géométrie dans l’architecture et le design

Oeuvres conçues autour de ɸ

Au cours de l’histoire, le nombre d’or a été très souvent utilisé pour structurer des œuvres à caractère artistique ou, du moins, esthétique. Cet usage fait du nombre d’or a pu prendre bien des modalités différentes, chaque créateur ou concepteur en usant à sa guise, sans forcément appliquer un process d’usage défini.

Le Parthénon

Exemple typique s’il en est, le Parthénon a été jusqu’à donner son nom à une variante du rectangle d’or. Le rapport du Parthénon au nombre d’or apparaît de manière évidente une fois qu’on a superposé un rectangle d’or à la façade de l’édifice.

La pyramide Kheops

Autre exemple de l’usage du nombre d’or dans la conception d’une œuvre majeure, ce dernier n’est pas aussi facile à distinguer que dans la conception du Parthénon. Pour retrouver le nombre d’or dans la structure de la pyramide, il faut en tracer la géométrie :

Il apparaît ainsi que le nombre d’or serait une clé de conception de la pyramide.

Musique et poésie

De nombreux compositeurs de musique ou de poésie ont également été mordus par le nombre d’or. La musique étant une série de notes structurées selon des intervalles, il n’a pas échappé à certains que ces intervalles pouvaient suive un schéma dicté par le nombre d’or. On retrouve ainsi la proportion dorée dans les rapports 2/1 et 3/2, présents dans les rythmes à deux temps, trois temps et quatre temps. Le rapport 5/3 se retrouve dans les mesures à cinq temps. On retrouve également les valeurs de la suite de Fibonacci.
Il en va de même avec la poésie, où le rythme des vers suit un schéma mathématique, une structure arithmétique, dont certains ont donné le nombre d’or en guise de clé. C’est le cas du célèbre poème Le Serpent qui danse, écrit par Charles Baudelaire. Il s’agit d’un poème en quatrains de 8 et 5 syllabes en rimes croisées. On retrouve dans ce rythme en 8 et 5 la proportion dorée, ainsi que des valeurs de la suite de Fibonacci :

Tes yeux, où rien ne se révèle 8
De doux ni d’amer, 5
Sont deux bijoux froids où se mêle 8
L’or avec le fer. 5

Tes yeux, où rien ne se révèle,

De doux ni d’amer,

Sont deux bijoux froids où se mêle

L’or avec le fer.

Charles Baudelaire, Le Serpent qui danse

L’usage d’un ratio dans le process de conception

Le Modulor de Le Corbusier

Près de vingt années sont nécessaire au célèbre architecte Le Corbusier pour finaliser et faire breveter son Modulor, clé d’un système de mesure adapté de la morphologie humaine et inspiré par les recherches mathématiques historiques sur le nombre d’or. Destiné à concevoir des architectures pleinement adaptées au corps humain, le Modulor fait fi du système métrique et du système de pieds et de pouces. « Le Modulor est un outil de mesure issu de la stature humaine et de la mathématique. Un homme-le-bras-levé fournit aux points déterminants de l’occupation de l’espace, le pied, le plexus solaire, la tête, l’extrémité des doigts, le bras étant levé, trois intervalles qui engendrent une section d’or, dite de Fibonacci. D’autre part, la mathématique offre la variation la plus simple comme la plus forte d’une valeur : le simple, le double, les deux sections d’or. » (Le Corbusier, Le Modulor: essai sur une mesure harmonique à l’échelle humaine applicable universellement à l’architecture et à la mécanique). Il faut retenir, de cet exemple dans lequel la géométrie et l’arithmétique sont au service du travail de conception, la démarche qui consiste à systématiser la conception selon une clé mathématique, un rapport de proportion. Ici Le Corbusier s’appuie sur 3 clés de référence (nombril : 1.13 ; homme debout : 1.83 ; homme debout bras levé : 2.26) qui sont reliées par le rapport de proportion qu’est le nombre d’or. De ces 3 clés découlent les mesures dont il a besoin pour concevoir des lieux de vie. Comme d’autres créateurs et concepteurs, Le Corbusier appuyait ses architectures sur un schéma dicté par le nombre d’or.

Guide d’utilisation de ɸ dans le design d’interface

Structurer sa page à partir d’un rectangle ɸ

Concevoir un UI design system à partir de ɸ

Il est techniquement compliqué de véritablement appliquer ɸ à un design system, et ce pour une raison simple: les limitations du langage CSS3. Plus précisément, un design system véritablement construit à partir de ɸ aurait besoin de beaucoup de javascript pour être développé. En effet, cela demanderait d’ajuster les mesures de chaque élément d’interface de manière individuelle, or notre objectif est de systématiser. Toutefois, nous pouvons ruser pour appliquer ɸ à notre design system tout en optimisant le code qui en découlera. Pour cela, il nous faut supposer que nos éléments d’interface ont soit une hauteur soit une largeur fixe. Dans les exemples suivants, nous assumons que notre élément html possède une hauteur fixe. Dans la conception de mon design system, je fixe par convenance un padding-left et padding-right égal à la hauteur du contenu html de l’élément étudié.

Si l’objet html a une hauteur fixe

Avant tout, il nous faut choisir une mesure-clé qui sera à la base de tous nos calculs. Lorsque j’ai conçu mon design system, j’ai choisi de me baser sur la hauteur d’un élément texte de contenu. A partir de cette mesure (c), il nous est possible d’extrapoler les valeurs grâce auxquelles nous construirons notre grille. Pour cela, nous reproduisons la logique de la suite de Fibonacci mais en partant de notre mesure-clé (c):

Ceci fait, nous construisons le bloc html lié à notre élément texte, ici un bouton. Les valeurs de padding découlent des valeurs extrapolées de (c). A présent, à partir de la hauteur de ce bouton, il nous est possible de déterminer les valeurs dans la même logique de la suite de Fibonacci:

A partir de la hauteur du html (c), nous avons extrapolé l’ensemble des mesures de padding et margin du bouton:

Le résultat me semble satisfaisant, qu’en pensez-vous ?

Si l’interface nécessite une densité élevée d’information

D’expérience, il est souvent nécessaire de varier la densité des informations sur une page, notamment lorsqu’on développe des interfaces pour un logiciel métier contenant des tableaux et de nombreuses actions possibles. Dans ce cas, nous pouvons densifier notre bouton en choisissant des valeurs plus ou moins avancées sur notre suite de valeurs. Par exemple, au lieu de calculer c/ɸ, nous allons calculer c/ɸ^2 ou c/ɸ^3, etc… A l’inverse, il nous est possible d’évaser notre bloc en calculant c*ɸ^2, c*ɸ^3, etc.

Limitation de la hauteur et largeur minimale d’un objet html

Bien entendu, toutes les mesures données aux éléments d’interface ne peuvent être relatives. Chaque interface a des contraintes, à commencer par la hauteur et largeur minimale que doit posséder un élément interactif pour pouvoir être utilisé confortablement sur écran tactile. Pour ma part, je fixe cette valeur à 40*40px. Ainsi, certains de mes éléments ne peuvent être simplement confiés au nombre d’or ; il faut vérifier que lesdites contraintes soient respectées.

Autres rapports utilisables

Et si vous n’appréciez pas l’esthétique offerte par cet usage du nombre d’or, pourquoi ne pas tenter l’usage d’une autre valeur de fonction ? Voici quelques exemples de boutons réalisés avec des valeurs différentes que ɸ: