Appliquer le nombre d'or dans les conceptions modernes

La page Web idéale est à la fois fonctionnelle et harmonieuse, mais même les concepteurs de sites Web les plus expérimentés peuvent avoir du mal à vous dire ce qui donne un design naturel. Malgré les théories sur la couleur et la navigation, l'aspect le plus crucial de l'esthétique d'une page Web parfaite semble parfois ineffable. Nous ne savons pas pourquoi cela fonctionne, mais parfois, c'est le cas. Tout pourrait être à cause d'un concept simple.

En renforçant la conception de votre site Web avec un ordre littéralement naturel, les internautes trouveront peut-être votre conception plus intéressante et plus agréable. Ce concept s'appelle le nombre d'or, un concept mathématique que la nature obéit et que nous, les humains, reconnaissons inconsciemment comme une expression de la perfection.

Le doré quoi?

En termes simples, le nombre d’or (également connu sous le nom de proportion divine ou la juste milieu), est une constante mathématique qui apparaît de manière répétée dans la nature et les œuvres d'art.

Exprimé sous forme d'équation, lorsque une est plus grand que b, (a + b) divisé par une est égal à une divisé par b (il suffit de regarder l'image ci-dessous), ce qui équivaut à environ 1.618033987. Ce nombre, souvent représenté par le caractère grec "phi", est le nombre d'or.

(Source de l'image: mathsisfun.com)

La même théorie peut être utilisée pour construire un rectangle, appelé le rectangle d'or. Une image qui suit le nombre d'or peut être placée avec soin dans un rectangle respectant le rapport..

(Source de l'image: creativeautomaton.com)

Pour construire un rectangle d'or, choisissez un nombre qui sera la longueur du côté court du rectangle. Par exemple, disons 500 pixels. Multipliez cela par 1.618. Le résultat, 809 pixels, correspond à la longueur du côté long de votre rectangle. Par conséquent, un rectangle de 500 pixels sur 809 pixels est un rectangle d'or. Il obéit au nombre d'or.

Beauté naturelle

En vérité, les scientifiques ne savent pas en quoi consiste le rapport que les humains aiment tant. Ce dont ils sont sûrs, c'est à quel point nous l’aimons. Des études suggèrent que même des changements infimes d'une image le rendant plus fidèle au nombre d'or ont un impact important sur le cerveau de ceux qui la cherchent..

Le visage humain suit également le ratio et nous trouvons des personnes dont le visage est plus fidèle au ratio plus attrayant. Les coquillages, les chefs-d'œuvre classiques de la Renaissance, l'architecture de l'Antiquité et même les parties du corps humain sont proportionnées en fonction du rapport avec les doigts eux-mêmes..

(Source de l'image: in2visualdesign)

Quelque chose de profond au cœur de notre esprit enregistre le nombre d'or comme étant magnifique, un fait que les artistes et les architectes utilisent depuis des milliers d'années, consciemment ou non. C'est un langage primordial dans l'imagerie. Le résultat est organique, intuitif et se sent bien.

Composition divine

Comment utilisez-vous ce nombre magique dans la composition de votre page Web? Les maths peuvent sembler être une boîte étouffante dans laquelle votre créativité aura du mal, mais le nombre d'or est simplement une indication utile. Avoir une ligne directrice de base à partir de laquelle construire peut vous donner plus de place à la créativité en éliminant les approximations dans les proportions et le placement..

Pensez-y comme un outil au lieu d'une cage. À la base, vous pouvez utiliser le nombre d'or pour désigner la taille et l'emplacement des zones de contenu et des barres latérales. Une mise en page à largeur fixe est l'application la plus simple. Décidez de la taille globale de votre mise en page via la méthode de création d'un rectangle d'or.

Pour les grilles / blocs

Le carré créé par les lignes a serait votre bloc de contenu. Le plus petit rectangle serait un côté ou une barre de navigation. Une fois que vous avez déterminé la taille de votre rectangle, il est facile de calculer la largeur de votre barre de navigation.

• Pour cet exemple, nous dirons que votre rectangle est 525 pixels par 850 pixels.
• 525 est une et 850 est (a + b), et b sera la largeur de votre barre latérale.
• Trouver b, on soustrait simplement de (a + b), qui est 325.
• Par conséquent, la largeur de votre barre latérale est de 325.

N'oubliez pas que votre rectangle peut être retourné selon vos besoins, en plaçant la barre latérale en haut, en bas ou du côté opposé. Tant que le rapport tient, votre design sera harmonieux.

Pour le texte

Il existe un moyen plus rapide d'obtenir les mesures dont vous avez besoin et il peut être appliqué avec du contenu texte..

• Disons que votre texte de contexte est la taille 12.
• Multipliez 12 avec 1.618, le nombre d'or, et vous aurez 19.416.
• Une taille de texte d'en-tête de 19 ou 20 suivrait de près le nombre d'or.

Le nombre d'or est une langue que votre esprit comprend, et en communiquant avec elle, vos idées se présenteront plus efficacement. Vous n'êtes pas obligé d'y adhérer exactement; le principe de base suffit. L'application du rapport aux tailles d'image, la relation entre le placement du texte et de l'image et la création de subdivisions dans les barres latérales sont tous des concepts possibles.

Grid Work: La règle des tiers

Si les maths ne sont pas votre tasse de thé, le concept du nombre d'or peut être simplifié. le règle des tiers régit le placement des points d’intérêt dans une scène. Diviser une image donnée en tiers horizontalement et verticalement. Vous aurez 9 grilles.

(Source de l'image: digital-photography-school.com)

Selon la règle des tiers, les sommets de ces lignes (où les lignes se croisent) constituent l'emplacement idéal pour les points d'intérêt. Les personnes parcourant la page sont plus susceptibles de remarquer des objets placés près des points et la division est agréable à voir. Une conception plus complexe est possible en décomposant ces tiers en tiers supplémentaires.

(Source de l'image: net.tutsplus.com)

En bref, l'œil peut être paresseux et ne pas avoir à rechercher des détails importants. Notre cerveau aime ça. Les images principales, les boîtes de nouvelles, les barres de recherche et tout autre point d'intérêt peuvent être nichés sur ou à proximité des sommets. Ce joli petit raccourci vous donnera un design à la fois agréable pour les yeux et qui attirera les gens vers des données clés..

Colonnes et tailles de police: séquences de Fibonacci

Un autre outil simple pour la conception Web liée au nombre d'or est Nombres de Fibonacci. Une séquence de Fibonacci commence par 0 et 1. Les deux derniers chiffres sont additionnés pour produire le prochain nombre de la séquence: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34… etc.

Un peu de maths nous dit que la relation entre les numéros de séquence séquentiels de Fibonacci est étonnamment proche du nombre d'or: divisez le nombre de votre choix par le nombre précédent et vous obtiendrez - vous l'aurez deviné - 1.618.

Comme avec le nombre d'or, les nombres Fibonacci peuvent être utilisés pour dicter la relation entre la taille du texte de l'en-tête et du contenu. Il pourrait également être utilisé pour désigner la largeur des colonnes et est particulièrement efficace dans les blogs et autres présentations très denses en texte. La composition pourrait également être construite sur le concept de carrelage de Fibonacci, dans lequel la taille des carreaux est construite à l'aide de la séquence de Fibonacci..

(Source de l'image: Wikipedia.org)

Spirales dorées et regroupement de contenu

Une autre méthode possible d’utiliser à la fois le nombre d’or et le nombre de Fibonacci est la spirales dorées et spirales de Fibonacci. Les spirales dorées s'élargissent d'un facteur égal au nombre d'or à chaque tour qu'elles effectuent, et les spirales de Fibonacci sont formées à l'aide d'un pavage de Fibonacci.

Les spirales ont été utilisées dans les œuvres d'art aussi longtemps que les nombres et les ratios eux-mêmes. La théorie est que les zones d’espace négatif et visuel intéressé doivent s’inscrire dans la spirale. Au sein de cette mise en page élégante, comme pour la règle des tiers, l’œil est naturellement attiré vers le centre de la spirale pour rechercher des détails..

(Source de l'image: fabiovisentin.com)

Les spirales peuvent servir de guide pour la densité de contenu et la mise en cluster. Ils peuvent servir de base au rapport entre le nombre d'images d'en-tête, de barres de recherche et de barres d'outils de votre site Web..

Lorsque vous choisissez l'image idéale pour une page de couverture construite autour de graphiques de grande taille, tels que des pages d'accueil de magasin et des sites de photographie, vous pouvez également bénéficier des spirales dorées et de Fibonacci..

Les messages puissants sont souvent subliminaux et le nombre d'or est l'une des publicités subliminales les plus prolifiques de la nature. En utilisant la proportion divine, vous vous donnez un avantage de logique naturelle et de grâce organique qui attire tous les humains. Le nombre d'or est encore un autre outil à votre disposition créative.

Plus de lecture:

• Application du ratio d'or aux mises en page et aux objets Web

Note de l'éditeur: Cet article est écrit par Chris Pentago pour Hongkiat.com. Chris est un développeur, concepteur et spécialiste du marketing Internet expérimenté, intéressé par les technologies clés pour rendre votre activité en ligne performante. Vous pouvez le trouver sur Twitter..