Main Menu
Teaching Support | Design Principles and Context

 

Composition and the Golden Ratio

 


 

What is Composition?

Composition is used to lead the eye around an image and affects the way a viewer interprets visual information.

Composition can refer to the sizes, positions and spacial relationships of the different elements within an image.
It can be used as a way to organise elements on a page or screen or to create a sense of dynamic visual tension.

Depending on how elements have been arranged, the overall effect will be either aesthetically pleasing or aesthetically displeasing.

 





Which of the rectangles below do you feel looks the most pleasingly proportioned?

Golden Section

Click the image above

 

 


 

The Golden Ratio - 1:1.618 (also known as the Golden Section)

Golden Section Rectangle

Most people - whatever their cultural background - appear to find these compositional proportions aesthetically pleasing.

At the end of the 19th Century, a German psychologist called Gustav Fechner researched human response to rectangular shapes based on Golden Ratio.

He measured thousands of rectangular items - eg books, newspapers, boxes, buildings etc - and found that the majority of people preferred to look at and use rectangular objects with proportions of 1:1.618

Similar experiments have been undertaken and have achieved approximately the same results.

The Geometry of Design, a book by graphic designer called Kimberley Elam refers to this.
(The Geometry of Design, Princeton Architectural Press, New York, 2001)



Click here to see how a golden section rectangle is drawn

 



Divine Proportion

The appearance of rectangles created using the Golden Ratio is based on the Divine Proportion.

The ratio 1 : 1.618 is also known as the Greek letter Phi.
http://en.wikipedia.org/wiki/Image:Phi_uc_lc.svg


(The mathematical formula of the Divine proportion is (AB divided by AC) = (AC divided by CB)

Divine Proportion

It appears that a structure based on (or approximately based on) the measurements of the Divine Proportion will look aesthetically pleasing.

Designers can use this understanding of proportion in an effort to make their work more visually appealing.

Many designers do not consciously use the Divine Proportion in their day to day work.
However it may be that people who gravitate towards the art and design fields have an intuitive understanding of this system of proportion and make use of it unconsciously.

 


 

Examples of the Golden ratio as it appears in the human body

Perhaps the reason human beings appear to prefer Golden Ratio proportions and find their use visually appealing is because at a subconscious level we are accustomed to seeing these proportions in ourselves and each other.

• The ratio of hand to forearm approximates the Golden Ratio.
(Please note that in practice the ratio may be lower.)

Arm - Divine Proportion

Arm - Divine Proportion

-----

• Each bone in the index finger of your hand is approximately 1.618 times larger than the bone preceding it
(From the tip of your index finger working your way in towards your palm.)
http://goldennumber.net/hand.htm


-----

• Golden Section proportions can also be found in the 'layout' of our faces.
http://goldennumber.net/images/face-phi.png

-----

• Professor Stephen Marqu
ardt believes that human attractiveness may be related to the Golden Ratio.
He has developed 'face masks' based on the mathematics of the Golden Ratio and claims that the faces of people who could be described as 'attractive' appear to fit into the outlines appearing on the masks.


http://www.beautyanalysis.com/index2_mba.htm

(The perfect face > The Masks)

http://www.intmath.com/Numbers/mathOfBeauty.php

Try the Flash interactive mask overlay 'game'


The Fibonacci Sequence

Leonardo of Pisa (also known as Fibonacci) was a 12th-13th Century Italian mathematician.

He introduced Hindu-Arabic numerals - which were significant to the decimal counting system - to Europe through the publication of his book, Liber Abacci (which means The Book of Numbers or The Book of Calculation. )

The Fibonacci Sequence is a series of numbers named after him and which he studied extensively.
(He did not actually discover the properties of the numbers himself although the Sequence is now named after him.)

In the Fibonacci Sequence below, every third number is made by adding the previous two numbers together.

ie

1
1
2 (1+1)
3 (1+2)
5 (2+3)
8 (3+5)
13 (5+8)
21 (8+13)
34 (13+21)
etc

The Fibonacci Sequence is said to be linked to the Golden Ratio.
From the number '3' onwards, all the numbers in the sequence - if they are divided by the previous number - give a result which is approximately 1.618

When we draw a square within a Golden Ratio rectangle, the rectangular shape that is left over is also of Golden Ratio proportions.

This remaining rectangular shape is approximately 1.618 times smaller than the previous Golden Ratio rectangle it sits within.

This process can be repeated endlessly as below.


Golden Section Rectangles

-----

When we draw a spiral based on Golden Ratio rectangles repeated within larger Golden Ratio rectangles,
we find that the shape of this spiral is reminiscent of shapes seen in the natural world.


eg a sea shell.
Sea shells grows approximately 1.618 times larger during each phase of their growth. >>


Golden Section Spiral

http://en.wikipedia.org/wiki/Image:Fibonacci_spiral.svg

 


 

The Golden Ratio of 1:1.618 is said to appear in many other areas

The ancient Greeks thought that the Golden Ratio was aesthetically pleasing and wrote of this in as early as the 5th Century. They suggested that we can find examples of the Divine Proportion in the man made world as well as in the natural world.

The Parthenon in Athens, Greece
The structure of the facade of the Parthenon is subdivided using Golden Section proportions.

• The outer shape of the Parthenon fits within a rectangle based on the 1:1.618 ratio
• The facade has been divided up in way that fits within the pattern appearing when a Golden Section rectangle is drawn and then repeated inside itself.


Parthenon - Golden Section Proportions


More examples -

http://goldennumber.net/
http://goldennumber.net/acoustics.htm
http://goldennumber.net/music.htm

The Vitruvius Canon

Marcus Vitruvius Pollio (known as Vitruvius) was a Greek scholar and architect who was active between around 80BC and 25BC. He felt that architectural proportions of Greek temples should be based on the visually harmonious proportions of the human body.

The Renaissance artists Leonardo da Vinci and Albrecht Durer used the Vitruvius Canon at the end of the 15th Century and at the beginning of the 16th Century.

The link below shows one of the best known images of the idealised proportions of 'Vitruvian Man' created by Leonardo da Vinci.
http://en.wikipedia.org/wiki/Image:Da_Vinci_Vitruve_Luc_Viatour.jpg

He noted a number of things about the proportions of the human body -
• The height from feet to top of head is approximately equal to the length of the arms if outstretched
• The height of the body and the length of the outstretched arms are equal, and so a square can be drawn based on these measurements which encloses the whole body
• If a figure stands with feet far apart and arms outstretched/raised up they would all make contact with points on the circumference of a circle if drawn using the distance between navel and feet as its radius
• The figure can be divided by the Golden Ratio at the navel
• If the distance between navel and feet is divided by the distance between navel and head, the number we get is approximately 1.618


However . . .

Not everyone, especially mathematicians, is convinced about this extrapolation of mathematical formulae - particularly with implied 'mystical' properties - from occurences in nature.

As with most bodies of information which assert that 'beauty' can be measured, there is an opposing body of information which says that it can't

Check out:
http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm
http://www.umcs.maine.edu/~markov/GoldenRatio.pdf


Root 2 Rectangles

A Root 2 Rectangle has a proportional size ratio of 1:1.41

Root 2 Rectangle

Root 2 Rectangles are used as the basis for the way 'A' standard paper is sized - ie A5, A4, A3 etc.
Any sheet folded in half on its longest edge is the next A size down or if doubled on its longest edge it is the next A size up.

A size paper

The pattern made by the divisions on the back and seat of Mies van der Rohe's 1929 Barcelona chair is based on Root 2 rectangles. From the side, the structure itself is based on 3 simple curves. The length of the base of the chair is the same as its height (so from the side, the whole structure could be enclosed by a square.)

http://en.wikipedia.org/wiki/Image:Mies-Barcelona-Chair-and-Ottoman.jpg

Click here to see how a root 2 rectangle is drawn

(Root 3, Root 4, Root 5 etc rectangles are based on a similar structure)

 


 

Traditional Layout of Text on a Printed Page

Early manuscripts are said to have been laid out using similar proportions to the example below.
The underpinning structure on which elements on the page have been placed helps the page to look visually well balanced and ordered.


Traditional Page Layout


A common overall page proportion is 2:3
• The measurements here are based approximately on Golden Ratio proportioning.

Each block of text is proportionately the same size as the page on which it sits - ie 2:3

• Text is positioned to coincide with the diagonal lines.
• The height of each block of text is equal to the width of each page.

Looking at the left hand page -
• The right margin is approximately 1/9th of the width of the page.
• The left margin is appoximately 2/9ths of the width of the page.

Still looking at the left hand page -
Each margin is twice the size width of the margin opposite.

• The left margin is twice the width of the right margin and the lower margin is twice the width of the top margin.
• This gives a ratio of 1 : 1.5 : 2 : 3


-----

This system of proportioning is named the Van de Graaf Canon after the person who discovered it.
Click here to see how a double page is constructed.

-----

'A' Size paper

Although the above layout is considered well balanced, we do not often see it in use today.
'A' size paper (eg A3 / A4 / A5) has become a 'standard' format. Any sheet folded in half on its longest edge is the next 'A' size down, or if doubled on its longest edge it is the next 'A' size up.

'A' Size Papers

• It is cost effective to print on 'A' size paper because this is a readily available and standardised paper size.
• The layout that was used in creating manuscripts (above) leaves a large area at the bottom of the page empty. This means that less text can be fitted on each page. For this reason, a book laid out like this would require a greater number of pages and so would cost more to produce.

Modern paper 'A' sizes along with production and economic requirements might produce a result more like the image below.

'A' Size Layout

 


 

The Golden Ratio can also be applied to the layout of web pages

Below is a screengrab of the BBC website. Click on the image below.

Web page with Golden Ratios


It would be quite unusual to find a web page which was laid out using exactly 1:1.618 proportioning.
However we may find some examples of web pages where areas of pages have been laid out in a way which approximates Golden Section proportioning as above.

This use of asymmetry helps to make the layout look more visually interesting.

The company at the link below has produced a layout tool to help design web pages based on Golden Ratio proportioning. http://www.atrise.com/golden-section/screenshots.php

 



Main Menu