Quand Fibonacci m’aide à designer des sites web

Lorsque  je me remémore de mes années de lycées, j’aimais bien les mathématiques. Mais je me suis toujours posé la question de savoir quelles sont les applications dans la vraie vie de tous ces théorèmes et autres notions enseignés.

Cette impossibilité de percevoir l’utilité réelle d’une suite de nombres, du théorème d’untel et ce malgré les efforts des enseignants, a fait que j’ai jamais pu être passionné de la matière.
J’ai fait des efforts comme beaucoup d’élèves en série scientifique parce que je voulais avoir des notes.

Aujourd’hui dans mon travail de Designer d’interfaces et d’expériences utilisateur (UX/UI Designer), je me retrouve à faire usage de certaines notions mathématiques apprises au lycée et la chose que je me dit toujours: et si j’avais su avant à quoi ça peut servir?

Ainsi dans ce post, je vais partager avec vous l’usage que je fais de la Suite de Fibonacci et du Nombre d’Or pour définir de belles et  meilleures proportions entre les éléments d’une page web.

La notion de proportions en design web

Lorsqu’on définit la disposition des informations sur une page web, on peut par exemple décider de segmenter la page en deux ou plusieurs sections.
Prenons l’exemple d’un cas où on a décidé qu’on divise la page en deux sections (colonnes): une principale et une autre secondaire (sidebar).

On peut être tenté de fixer leur largeur au feeling, ça marche, mais visuellement les proportions peuvent s’avérer non naturelles et ruiner le design.

En effet, que ce soit dans l’oeuvre divine (design d’une fleur, d’une spirale, d’une galaxie) ou celle d’illustres artistes ou architectes  (Parthénon grec), les proportions n’ont jamais été laissées au hasard.  
Elles sont définies suivant des règles mathématiques qui leur donnent cette harmonie visuelle naturelle.

Le nombre d’or

Le nombre d’or, appelé aussi la proportion divine est une constante mathématique dont la valeur approximative est égale à 1,618033987 qu’on va considérer égal à 1,1618.

En géométrie, le nombre d’or est la valeur qui correspond au rapport entre deux longueurs a (la plus grande) et b (la plus petite) telles que (a+b)/a = a/b

Dans notre cas, supposons que j’ai une page avec une largeur totale de 1440px.
Pour obtenir la largeur de mes deux sections (principale et sidebar), je fais 1440/1,1618= 889,98 qu’on peut arrondir à 890 px. Donc le sidebar aura 1440-890=550px.

Ici un exemple du site web de l'ANADEN que nous avons designé à Kinu Ink avec deux blocs répondant au cas cités ci-haut
J’utilise régulièrement le nombre d’Or pour déterminer des proportions dans une page avec largeur fixe.

Fibonacci

Fibonacci est un mathématicien italien du début de la renaissance. Il est connu pour sa suite, appelée suite de Fibonacci qui est est suite d’entiers dont chaque terme est la somme des deux termes qui la précédent: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…

Il y’a plusieurs manières d’utiliser une suite de Fibonacci pour déterminer les largeurs des sections d’une page.
L’approche la plus simple et que j’utilise consiste à déterminer une largeur de base, disons 100px, puis déterminer la largeur de mes sections en multipliant la largeur de base par des termes de la suite comme c’est le cas dans cet exemple.

Il est par contre très contraignant d’utiliser la suite de Fibonacci quand on a une largeur fixe, dans ce cas j’utilise le nombre d’Or.

Il serait utile que les enseignants de mathématiques se projettent avec les élèves sur les usages des notions enseignées en cours que ce soit dans leur vie de tous les jours ou leur vie professionnelle. Car en donnant du sens à ce qu’on apprend, on renforce en même temps la motivation des étudiants.