The Golden Ratio-Conception Web, mathématiques et Seashells

n utilisant des largeurs fixes ou flexibles, mais dans le but d'utiliser le rapport, vous devez avoir un certain nombre. Pour cet exemple, je vais dire que je suis la conception d'un moniteur d'une résolution de 800x600, alors ma page ne sera pas plus de 780 pixels de large. Je vais faire mon largeur 760px. 2. Divisez par Phi. Une fois que vous connaissez la largeur, le diviser par Phi (1,62 arrondi est très bien). 760 divisé par 1,62 est 469,14 ou 469 (les navigateurs Web préfèrent nombres entiers). Telle est la largeur de ma colonne principale. 3.

Soustraire la largeur de la colonne principale de la toute la largeur. Cela vous donnera la deuxième largeur de la colonne. 760-469 = 291. De ce calcul, je dois produire un site de 2-colonne qui a une colonne principale de 469 pixels de large et une colonne secondaire 291 pixels de large. Si je fais cela, je vais avoir un site qui est esthétiquement agréable, sans avoir à faire quoi que ce soit d'autre. Vous pouvez le faire même calcul avec des pourcentages pour une mise en page de largeur variable: 100% /1,62 = 62% pour la colonne de large et de 38% pour la colonne de large.

Remarque: De nombreux sites vous recommandons d'utiliser un rapport de 3: 5 pour obtenir votre rapport d'or, mais ce rapport, alors que près, est pas exactement le nombre d'or. Si vous concevez quelque chose rapidement ou si vous avez une grille que vous travaillez à partir de, cela peut être une grande règle de pouce pour se rapprocher des proportions parfaites, et est idéal si vous détestez vraiment les mathématiques ou ne pas avoir une calculatrice .

Utilisez le ratio d'or pour plus de la mise en page Si vous pensez à la façon dont les éléments dans votre page sont placées, vous pouvez utiliser le rapport d'or en eux pour créer des rectangles mini-or. Ceux-ci seront tout aussi esthétique. Utilisez-le pour les légendes sur les images, le texte qui coule à côté et autour des images, de l'espace publicitaire, et de votre navigation. Si vous créez des boutons de navigation qui ont les mêmes proportions que le rectangle d'or, chacun aura l'air bien sur la page.