blog.linke
Adequate proportions in web design
For as long as the greek ruled the western world, there has been th knowlodge of grids to compose structures, sculptures, paintings and designing stuff. Actually, the nature itself has got its ideal grid to build stuff. Those who don’t have design instruction, maybe don’t know this fact, so i introduce you to a really useful rule filed under the name of “golden ratio” or “golden section” from the latin phrase sectio aurea wich is represented by the number 1.61803399.
The golden ratio is the proportion in wich nature creates it’s stuff. It is like a magic number wich sets the basis of proportional growth. it is in flowers, snails, spirals, trees and also the human body as illustrated by Corbusier on its Modulor Studies and drawings.
So, you might be thinking on what does this relate to web design? WEll, actually a lot! cause you can implement a grid system wich will be allways proportional in a natural way using the golden section wich will lead to a better feeling of your visitors while browsing your page.
Lets make an example of a two column page on the most common wordpress configuration around.
You have to draw a sidebar that is 300px wide for ad purposes, so the other column width, whre your content will be placed, should be 485px wide, because 300 x 1.618 = 485.4 This makes a total amount of 785px, fitting your page in the 800 x 600 screen resolution.
You might think but what about the space left to fit the 1024 x 768 resolution? well, you could make this proportion grow on both columns by resolving the following equation, taking for granted that the usable space in that resolution is 1010px:
1) First equation
1010 = A + B
2) Second Equation
1.618 = B/A
3) Use Second equation to get a value of B in terms of A
B = 1.618 x A
4) Use the previous value of B in the first equation to get the value of A
1010 = A + (A x 1.618)
Use Distributive property to match a as a standalone variable
1010 = A x (1 + 1.618)
1010 = A x 2.618
1010/2.618 = A
A = 385.7
5) Having the value of A, lets find the value of B
B = 1010 – 385.7
B = 624, 3
6) Let’s round up to have pixel numbers
A =385
B = 625
And there we got the magic numbers for a two colum sit in 1024 screen resolution width.
Of course, there is a less geeky way to do this, and it is by having the golden spiral drawing, wich gives you the exact golden proportions to handle when creating a site. Hand this over illustrator or photoshop to expand or shrink and you are set to make.
Golden Ratio Spiral (Adobe Illustrator AI zipped) 941Kb
PHOTO CREDITS: The golden ratio in the growth of a Cactus pic was taken by Benjamin Penter
For as long as the greek ruled the western world, there has been th knowlodge of grids to compose structures, sculptures, paintings and designing stuff. Actually, the nature itself has got its ideal grid to build stuff. Those who don’t have design instruction, maybe don’t know this fact, so i introduce you to a really useful rule filed under the name of “golden ratio” or “golden section” from the latin phrase sectio aurea wich is represented by the number 1.61803399.
The golden ratio is the proportion in wich nature creates it’s stuff. It is like a magic number wich sets the basis of proportional growth. it is in flowers, snails, spirals, trees and also the human body as illustrated by Corbusier on its Modulor Studies and drawings.
So, you might be thinking on what does this relate to web design? WEll, actually a lot! cause you can implement a grid system wich will be allways proportional in a natural way using the golden section wich will lead to a better feeling of your visitors while browsing your page.
Lets make an example of a two column page on the most common wordpress configuration around.
You have to draw a sidebar that is 300px wide for ad purposes, so the other column width, whre your content will be placed, should be 485px wide, because 300 x 1.618 = 485.4 This makes a total amount of 785px, fitting your page in the 800 x 600 screen resolution.
You might think but what about the space left to fit the 1024 x 768 resolution? well, you could make this proportion grow on both columns by resolving the following equation, taking for granted that the usable space in that resolution is 1010px:
1) First equation
1010 = A + B
2) Second Equation
1.618 = B/A
3) Use Second equation to get a value of B in terms of A
B = 1.618 x A
4) Use the previous value of B in the first equation to get the value of A
1010 = A + (A x 1.618)
Use Distributive property to match a as a standalone variable
1010 = A x (1 + 1.618)
1010 = A x 2.618
1010/2.618 = A
A = 385.7
5) Having the value of A, lets find the value of B
B = 1010 – 385.7
B = 624, 3
6) Let’s round up to have pixel numbers
A =385
B = 625
And there we got the magic numbers for a two colum sit in 1024 screen resolution width.
Of course, there is a less geeky way to do this, and it is by having the golden spiral drawing, wich gives you the exact golden proportions to handle when creating a site. Hand this over illustrator or photoshop to expand or shrink and you are set to make.
Golden Ratio Spiral (Adobe Illustrator AI zipped) 941Kb
PHOTO CREDITS: The golden ratio in the growth of a Cactus pic was taken by Benjamin Penter
Live Assistance
