Le nombre d'or : le guide ultime pour le comprendre et l'utiliser

Les concepteurs du monde entier devraient connaître le nombre d'or. C'est un rapport mathématique qui crée des designs esthétiquement agréables. Étant donné que le nombre d'or existe si fréquemment dans la nature, il n'est pas surprenant que ses résultats soient d'apparence naturelle.

Photo de Bogomil Mihaylov sur Unsplash

Le nombre d'or porte également plusieurs autres noms :

• Proportion divine
• Juste milieu
• Section dorée
• Phi (lettre grecque)

Les mathématiques derrière le nombre d'or

Je vais expliquer les mathématiques du Golden Ratio aussi simplement que possible et sans entrer dans les détails que vous n'avez pas besoin de connaître. Si vous pouvez suivre les mathématiques, tant mieux. Mais si vous ne pouvez pas, ce n'est pas un problème – vous pourrez toujours utiliser le concept dans vos conceptions.

Pour comprendre le nombre d'or, il faut d'abord comprendre le rectangle d'or

Le rectangle d'or est un grand rectangle qui a un carré à l'intérieur. Les côtés du carré sont égaux à la plus petite longueur du rectangle :

Source : Wikipédia

Le nombre d'or est un nombre (en quelque sorte) égal à 1,618, tout comme pi est approximativement égal à 3,14, mais pas exactement.

Vous prenez une ligne et la divisez en deux parties – une partie longue (a) et une partie courte (b). La longueur totale (a + b) divisée par (a) est égale à (a) divisée par (b). Et ces deux nombres sont égaux à 1,618. Ainsi, (a + b) divisé par (a) est égal à 1,618, et (a) divisé par (b) est également égal à 1,618.

Retour au Rectangle d'Or, car c'est tellement plus facile à comprendre

Lorsque vous placez un carré à l'intérieur du rectangle, cela crée un autre rectangle plus petit. Ignorez les lignes noires et regardez les cases rouges et vertes :

Le carré rouge a quatre côtés de longueur égale, et cette longueur est égale à la longueur la plus courte du rectangle. En sectionnant ce carré, vous créez automatiquement un autre rectangle plus petit (contourné en vert). Ensemble, ils créent une disposition complète du nombre d'or et une base pour la spirale d'or.

Vous pouvez également créer un nouveau rectangle doré à partir du plus petit rectangle, comme celui-ci que j'ai décrit en bleu :

Un diagramme traditionnel du nombre d'or comporte huit rectangles d'or :

Et voici le plus petit rectangle d'or, n°8 :

Si vous commencez en bas à gauche et faites un arc pour relier le côté éloigné de chaque section transversale carrée et petit rectangle, vous obtiendrez la spirale dorée.

La séquence de Fibonacci

La séquence de Fibonacci est assez simple à comprendre : vous commencez par zéro et 1, puis obtenez le nombre suivant en additionnant les deux nombres qui le précèdent. 0 + 1 = 1, puis 1 + 1 = 2, etc. Les premiers nombres de la séquence sont 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Si vous utilisez ces nombres pour créer des carrés avec ces largeurs, vous pouvez à peu près créer une spirale dorée :

Source : Les mathématiques, c'est amusant

Les cercles d'or

Parfois, vous verrez des cercles dessinés dans les carrés à la place ou en plus de la spirale. Si vous dessinez des cercles parfaits dans les cases de la superposition Golden Ratio, ils auront le rapport 1: 1,618 avec un cercle adjacent.

Source : Département Limelight

Les logos Pepsi et Twitter utilisent les cercles d'or :

Source : pourparlers hybrides

Vous avez déjà vu ça, beaucoup

La nature est pleine du nombre d'or. C'est dans la flore, les coquillages, la météo…

Source : Photo par Annie Spratt sur Unsplash

Source : Photo de la NASA sur Unsplash

Et parce que nous le voyons si souvent, notre cerveau le préfère. Cette attraction innée est la raison pour laquelle c'est une mise en page si puissante que les concepteurs peuvent utiliser.

Le nombre d'or dans l'art et le design

Parfois le nombre d'or super facile à reconnaître :

Source : staceysdetailinginc.com

Parfois, vous dites : « Je n'ai aucune idée de ce dont vous parlez… oh, attendez. Maintenant je le vois. Je pense."

Source : Initiés du marketing

D'autres fois, vous pourriez devenir fou en le regardant…

Source : murs larges

… mais si vous vous concentrez sur le rectangle d'or principal, cela devient un peu plus clair :

Jetons un coup d'œil à un exemple couramment référencé : le Parthénon

Source : Bloc créatif

Au début, vous pourriez voir ceci et dire : « Cela me semble juste symétrique. Comment ce que je regarde s'intègre-t-il dans cette spirale de rectangle doré ? »

Le nombre d'or ne concerne pas la manière dont chaque partie d'un design s'intègre complètement et uniquement dans les sections spécifiques. Si tel était le but, le côté droit du Parthénon serait un gros bloc et le côté gauche serait divisé en blocs plus petits.

Au lieu de cela, le rapport est utilisé pour créer une harmonie et des proportions, et cela peut être interprété de différentes manières.

Bien que le nombre d'or soit fondé sur les mathématiques, il peut être adapté de manière créative. Dans le cas du Parthénon, le nombre d'or détermine la hauteur et l'emplacement des composants de conception. De plus, il existe plusieurs façons de poser des diagrammes du nombre d'or dessus :

Source : Architecte

Source : Esther Sugihto sur Medium

Source : GoldenNumber.net

Le nombre d'or et la conception de sites Web

Que vous soyez amateur de mathématiques ou que votre tête soit sur le point d'exploser, le nombre d'or est un peu plus facile à comprendre en termes de design. Vous avez fait le gros du travail. Il est maintenant temps de prendre la superposition de base et de rendre vos composants Web parfaitement agréables.

Le nombre d'or et la mise en page

Si vous voulez une disposition parfaite du nombre d'or, définissez les dimensions sur 1: 1,618. Par exemple, vous pouvez définir la largeur sur 960 pixels et la hauteur sur 594 pixels. Le rectangle d'or fait 594 pixels de chaque côté et le rectangle occupe le reste de la mise en page (594 x 366).

Calculator Soup a une calculatrice de nombre d'or utile où vous pouvez définir n'importe quel terme (A, B ou A + B) pour trouver les valeurs correctes du nombre d'or.

Ou, vous pouvez simplement utiliser ce type de mise en page à deux colonnes, où une colonne est un peu plus large que l'autre colonne. Il est organisé et montre clairement la hiérarchie.

Source : National Geographic

Je l'utilise sur mon site Web parce que la page d'accueil est une collection de mes articles de blog, et j'ai l'impression que c'est l'une des mises en page les plus reconnues pour les blogs :

À mon avis, cependant, la disposition symétrique que nous utilisons sur les thèmes élégants est plus moderne :

Le nombre d'or et l'espacement

Le nombre d'or peut vous aider à déterminer où placer les éléments de votre conception, les proportions à utiliser et où laisser un espace négatif. Voici un exemple simple, et vous pouvez presque voir la superposition du nombre d'or sans même avoir à la mettre dessus :

Source : Digiarts 2011

Voici à quoi cela ressemble lorsque j'applique la Spirale d'Or dans Photoshop :

Encore une fois, le nombre d'or est fondé sur les mathématiques, mais lorsqu'il s'agit de l'appliquer à la conception, ce n'est pas parfait. Ce design n'est pas créé sur un rectangle doré, donc la spirale dorée est hors de proportions normales. Cependant, vous pouvez voir comment cela peut guider un concepteur pour choisir où placer le plus grand élément de la conception, ainsi que les plus petits éléments et l'espace négatif.

Vous pouvez également superposer la superposition Golden Ratio pour l'appliquer à différents éléments du même design :

Source : Image de marque par Lemongraphic. Exemple de Canva.

Le nombre d'or et le contenu

Lorsque vous réfléchissez à la disposition et à l'espacement du nombre d'or, vous pouvez commencer à décider où placer le contenu sur votre site Web.

Regardons à nouveau le site Web de National Geographic, cette fois avec la superposition du nombre d'or de Canva :

La mise en page est divisée de sorte que le contenu s'aligne le long de la ligne centrale de la spirale. À gauche, il y a un gros bloc de contenu. A droite, le contenu devient plus dense et il y a beaucoup plus d'espace négatif. Vers la courbure centrale de la spirale, vous verrez un deuxième logo National Geographic.

Voici un excellent exemple de la façon dont la spirale dorée peut guider votre œil à travers un design, même au-delà de son composant principal. Ceci est utile si vous avez beaucoup de contenu à presser sur une seule page. Vous remarquerez également que même avec un design aussi emballé et détaillé, il y a toujours un espace négatif là-dedans.

Source : Conception par l'atelier Helms. Exemple de Canva.

Mention honorable : Le nombre d'or et les images

Le nombre d'or est également utilisé dans la composition photographique. Au lieu de créer une spirale dorée, le nombre d'or divise l'image en six blocs. Le même nombre d'or est utilisé dans ce type de grille : les largeurs et hauteurs des sections sont soit de 1 soit de 0,618.

Source : Canva

Vous utilisez ensuite les intersections pour composer le plan. Le but est de placer un sujet ou une partie principale d'un sujet sur l'une des lignes d'intersection - le sujet ne doit pas être centré et certains blocs doivent être laissés vides (au moins dans la plupart des cas - la macrophotographie et les portraits en gros plan remplira presque tout le cadre). En faisant cela, vous créez un portrait plus intéressant que si le sujet était centré.

Un moyen beaucoup plus simple et plus accessible de suivre cette règle consiste à utiliser la grille de la règle des tiers, que vous avez probablement sur l'appareil photo intégré de votre téléphone ou votre reflex numérique.

Voici une photo que j'ai prise du fils de mon cousin. J'ai placé la grille de la règle des tiers dessus pour vous montrer où le sujet remplit et ne remplit pas le cadre.

Regardez aussi comment la Spirale d'Or s'enroule presque parfaitement autour du sujet :

Le nombre d'or diffère de la règle des tiers car la grille de la règle des tiers comporte des sections de longueurs et de largeurs égales. Cependant, c'est tellement proche - et tellement plus facile - que c'est ce que les photographes utilisent couramment lors de la composition ou de l'édition d'une photo.

Emballer

Le nombre d'or peut être utilisé tel quel ou adapté à vos besoins et ajusté en fonction de la taille - les mathématiques peuvent avoir des règles strictes, mais pas la créativité. Bien que vous puissiez utiliser le nombre d'or dès le départ pour guider votre conception, vous pouvez également l'utiliser après avoir commencé à concevoir pour apporter des modifications et des améliorations. Le but est de vous laisser guider par le ratio, pas de forcer un design à y insérer.

Prêt à jouer encore plus avec la mise en page de votre site Web ? Consultez notre article sur l'utilisation des nouvelles options de hauteur et de largeur de Divi pour créer un design réactif.