How to apply the Golden Ratio in Design
The quickest way to apply the golden ratio in design is using the rule of thirds, dividing an area into equal thirds both vertically and horizontally, the intersection of the lines will provide a natural focal point for the shape.
Photographers are taught to place their key subject on one of these intersecting lines for a pleasing composition, the same principle can be used in the design.
Although the rule of thirds can be applied to any shape, if it is applied to a rectangle with proportions approximately 1: 1.6, it comes very close to a golden rectangle, which makes the composition all the more pleasing to the eye.
To apply it to any design, you have to make sure that the ratio of the design area is 1: 1.61, or multiplying the height or with of an area by .618
Making a grid is the basis for any great design, is a way of organizing content on a page, using any combination of margins, and guides.
There are different methods and proportions, the golden ratio is probably the most famous and used in art; we will study its history and how to apply the Golden Ratio in Design.
Table of Contents
What is the the Golden Ratio
The golden section or ratio is a mathematical relationship found in nature that can be used to create aesthetically harmonious compositions.
It is roughly equal to the ratio 1: 1.61 and it is commonly illustrated by the fibonacci spiral or golden rectangle.
The golden section is closely related to the Fibonacci sequence. The Fibonacci sequence results from adding the consecutive numbers in a sequence:
1 + 1 = 2, 2 + 1 = 3, 3 + 2 = 5, 5 + 3 = 8, 8 + 5 = 13
Outcome: 2,3,5,8,13
Each term is the sum of the previous two.
Mathematicians have studied the golden ratio because of its unique and interesting properties founded in nature.
Mathematicians have established the golden ratio as an irrational mathematical constant, approximately:
1.6180339887
This relationship means that two quantities are in the golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to (=) the ratio of the larger quantity to the smaller one.
Construction of the Golden Rectangle
A golden rectangle can be constructed with only a ruler and a compass using this technique:
- Construct a simple square
- Draw a line from the midpoint of one side of the square to an opposite corner
- Use that line as the radius to draw an arc that defines the height of the rectangle
- Complete the golden rectangle
History of the Golden Ratio
Since ancient times, man has studied or theorized about aesthetics, proportions, beauty, nature or the human body, everything seems to be made by patterns, and these patterns could determine whether or not an element is beautiful.
Ancient Greek mathematicians first studied what we now call the golden ratio because of its frequent appearance in geometry. Some studies of the Acropolis, including the Parthenon, conclude that many of its proportions approximate the golden ratio.
Plato, Michelangelo or Leonardo have been creating theories that determine that objects, elements, visual compositions, sculptures, etc. that are created according to certain principles, determine that they are more aesthetic or comfortable to look at, that they use a “natural” visual language that they make them appear better or prettier in our eyes.
The modern history of the golden ratio starts with Luca Pacioli’s Divina Proportione of 1509, which captured the imagination of artists, architects, scientists, and mystics with the properties, mathematical and otherwise, of the golden ratio.
Salvador Dalí explicitly used the golden ratio in his masterpiece, The Sacrament of the Last Supper.
The dimensions of the canvas are a golden rectangle. A huge dodecahedron, with edges in golden ratio to one another, is suspended above and behind Jesus and dominates the composition.
In 2003 Weiss and Weiss came on a background of psychometric data and theoretical considerations to the conclusion that the golden ratio underlies the clock cycle of brain waves. In 2008 this was empirically confirmed by a group of neurobiologists.
In 2010 the journal Science reported that the golden ratio is present at the atomic scale in the magnetic resonance of spins in cobalt niobate atom
Examples of Golden Ratio in Design
Logos
Golden Ratio is widely used in logos. In the following examples the text or the dimensions are apparently based on proportions of the golden ratio
Credit Cards
If we measure the sides of our credit or debit cards, we will notice that the relationship between their sides is. the golden number.
When the credits card were designed, they thought of giving it “ideal” dimensions.
Measuring the height and width of a credit card, we will see that they measure 85.60 X 53 mm. Well, if we do the division 85.60 / 53 it gives us the result 1.61, which is practically the value corresponding to the golden number
Maybe when the firs cards were made the designers never though of the golden ratio, and the size could be simply explained in that we humans tend to perceive dimensions that are based on the golden ratio as esthetically pleasing.
A card size that looked pleasing may have been chosen from others , and we found it pleasing because it was close to the golden ratio.
How to apply Golden ratio in Design
Let us use as example the ratio for the header of a web page. As a basis we will use a document of 1024 x 768 pixels.
We multiply the height by .618
768 x .618 = 474.624
That will be our measure for the content. The difference (293.38) will be the measure of our header.
In Web design is more difficult to implement because of the difference in the resolutions of the users monitors, but you can use it to design boards, Magazine advertisements, etc.
Resources
There are a few tools across the Internet that does a good job of finding the golden ratio
- Golden Ratio Calculator
- Kevin Cannon’s Golden Ratio Calculator. He also has a golden ratio widget.
- Adobe Exchange Search: Golden Spiral This golden spiral can be used to work out perfect proportions
References
http://www.maths.surrey.ac.uk/hosted-sites/R.Knott/Fibonacci/fibInArt.html#parthenon
The Author
