Elements of Game Design: Visual Composition

Visual composition is a very simple concept but is incredibly difficult to use effectively. It is simply the arrangement of visual cues whether in a still image, video or interactive experience. It is one of the key aspects to art which is often overlooked by art students but is studied thoroughly by successful artists.

Leonardo Fibonacci helped the study of composition to no end, much of what we know in terms of how to arrange images is down to his work in mathematics. The Fibonacci sequence led to a better understanding of "The Golden Ratio", this had already been discovered and used by ancient Greek sculptors such as Phidas. "The Golden Ratio" is represented in maths as the Greek letter phi, Φ, this is important as it shows us composition has been studied for thousands of years but more importantly composition is a fairly mathematical concept. It is important to remember the roots of these things and to remember that the old masters, whether you are talking about the Renaissance painters or the Greek sculptors, were not artists as artists are seen today. They were scientists, philosophers and mathematicians, if anything their art work came from this study and intrigue into understanding what was around them and how to communicate that understanding.

Below you can see a mathematical diagram of "The Golden Ratio", this is often simplified or slightly modified to be called the "Rule of Thirds". The two different ideas are slightly different but they are very similar. To use "The Golden Ratio" you split the length of the canvas using the ratio of 1.618:1 from left to right, right to left, then from top to bottom and bottom to top. This will give you a grid like the image below, you then position the points of interest and focal areas on either the line or the intersection of the lines.

Golden Ratio: Red, Thirds: Blue. Source.

Most artists have taken advantage of this technique, below you can see some examples:

The Fighting Temeraire by Turner Source

Seurat's Bathers at Asnieres Source

From "The Golden Ratio" comes the Fibonacci Spiral below you can see this spiral and the method for creating it. 

Fibonacci Spiral Source

Method for creating the Fibonacci Spiral Source

Applying this spiral to compositions allows the image to flow in a natural and interesting way which leads the viewer in, it creates an almost natural composition. When applying this to artwork it is the focal point that you want to rest within the spiral or at least near it. This is another way to create the affect seen from the "The Golden Ratio" or Rule of thirds but is slightly different.

The Mona Lisa clearly showing use of the Fibonacci Spiral. Source

Twitter's designers showing off Fibonacci's Spiral. Source

Twitter really love using Φ. Source

Just as a music needs both to flow and break to create a pleasing composition, these elements are also required in visual composition. This can be achieved in use of value, colour, placement and many other simple techniques. The aim of our work in the field of games is readability and understanding, we are visual communicators. It is important that we make understanding easy for the viewer this allows them to dissect whether they like it or not without being put off by confusion.

Sources:
http://landscapelearner.wordpress.com/2011/01/21/golden-ratio-rule-of-thirds-and-rabatment/
http://www.goldennumber.net/art-composition-design/
http://www.kurtzgraphicdesign.com/new-twitter-design-based-on-the-golden-ratio-image/