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