The Golden Ratio
The Golden Ratio (also known as the Divine Proportion), approximately 1.618, is a value frequently found in nature, and used in the construction of aesthetically pleasing arragements of visual elements (akin to the Rule of Thirds in photography). The exact value of the ratio may be calculated with the simple formula 0.5 × ( 1 + √5 ), resulting in a Golden Rectangle where the length of the perpendicular side is 1.
Calculator
This calculator determines the Golden Ratio of any given width or height, resulting in a Golden Rectangle.
Web Design Template
Click here to download a Photoshop template for a 960px-wide webpage layout. It contains a series of blocks that relate to each other in the context of the Golden Ratio, and which may be used for laying out various boxes and columns.
The Golden Spiral
The Golden Spiral is created by taking a Golden Rectangle and repeatedly subdividing it by the Golden Ratio. A curve can then be drawn between each section's opposing diagonal corners to create a spiral. The divisions created for the spiral can also be used for laying out visually pleasing designs with mathematical precision.
Golden Spiral Example
A Golden Spiral can be laid out as follows, with this 2000px-wide example.
The values here are approximate, rounded for simplicity.
- Begin with a rectangle of 2000x1240px.
- Split with a vertical line at 1230px.
- Split the new right section with a horizontal line at 765px.
- Split the new bottom section with a vertical line at 290px.
- Split the new left section with a horizontal line at 185px.
- Split the new top section with a vertical line at 185px.
- Split the new right section with a horizontal line at 115px.
- Split the new bottom section with a vertical line at 40px.
- Split the new left section with a horizontal line at 40px.
To create a spiral, now do the following: For each section, create a curve with points at opposite diagonal edges. The first section curve begins at the bottom-left and ends at the top-right.
To adapt the above Golden Spiral for other sizes, simply normalize the above values. For example, to create a 100px wide spiral, divide all values by the original width of 2000, then multiply by the desired width of 100.
For Web Design
For web design, here's a list of block sizes created using the Golden Ratio. They may be used together in a 960px-wide webpage layout, with 8x8px padding between elements. These values are the same as those used in the template provided above.
Block Size Maximum Dimensions Appearance
Full-Width 1x 944x224px Full
Half-Width 2x 464x224px Largest
Quarter-Width 4x 224x224px Larger
Sixth-Width 6x 144x144px Large
Tenth-Width 10x 80x80px Medium
Fifteenth-Width 15x 48x48px Small
Twentieth-Width 20x 32x24px Smaller
Thirtieth-Width 30x 16x16px Smallest
Combining Elements
Elements may be combined by eliminating their padding. For example, two large elements merged together horizontally would be 224px wide x2, plus 8px padding x2, for a total size of 464x224px.
Creating Columns
Each of the element sizes above may also be used to divide a webpage into columns. For example, using the quarter-width block size with arbitrary height would result in a four-column layout.
Where the Golden Ratio Appears
Many man-made creations use the Golden Ratio, including:
- Credit cards, index cards, envelopes, and business cards
- Standard paper stock such as legal, tabloid, and paperback
- Computer monitors
- Photographs
- Web and print layout
- The Egyptian pyramids
- The Greek Parthenon
- The Last Supper painting
- The Notre Dame cathedral in Paris
- Noah's Ark and the Ark of the Covenant in The Bible
Many items in nature use the Golden Ratio, including:
- The bodies and parts of humans and animals
- DNA segments and binary attractors in the human genome
- Snail shells, seashells, seeds, and plants
- The reproductive patterns of rabbits and bees
- The energy level transitions of a hydrogen electron
- The orbital period, orbital velocity, and mean distance of all planets in the solar system
- The rings of Saturn
- Several shapes such as the hexagon, tetrahedron, hexahedron, and octahedron
- The Fibonacci sequence
- Musical octaves
At least as far as ratios are concerned, it seems that beauty is not in the eye of the beholder!
Additional Reading
The Golden Ratio at MathIsFun.com
The Golden Ratio at Wolfram MathWorld
Fibonacci Numbers and the Golden Section
Is the Golden Ratio Evidence of God?
Rule of Thirds Definition & Examples
Using the Rule of Thirds
Why Does the Rule of Thirds Work?
Printed from bitfume.com.
↩ Back
Print
Permalink