Skip to content →

The Golden Ratio

The Golden Ratio plays a more vital role in the world around us than I first realised. In mathematics, its described as being ‘two quantities are in the golden ratio if their ratio is the same as the ratio of their sum to the larger of the two quantities.’ Also known as ‘The Divine Proportion’, this mathematical figure (1:1.61 ratio) can be found in all sorts of places all around the world, from ancient structures to sunflowers and even in the human body. Things that once seemed spontaneous and randomly placed are realised as following this proportional composition. It was first discovered by mathematicians who were trying to quantify the beautiful asymmetry found in nature.

The Golden ratio is used by designers when creating logos, icons and websites. This is to ensure that the design stays consistent and although may seem random, is carefully thought out and placed in line with the rules of the golden ratio.

The Rule of Thirds

The rule of thirds is used within designs, using a 3×3 grid, to ensure that if the key elements are placed either at the junctions or along vertical or horizontal lines. This is to ensure the arrangement will appear more pleasing and dynamic to the viewer. This rule is used in photography and film making but is also implemented in paintings and graphical designs.

It is used in the placement of vocal points, ensuring counterbalance and keeping asymmetry in compositions. Vocal points are used to guide the eye flow of the viewer as well as creating a dynamic atmosphere with proper use of asymmetry. These intersections highlight important parts of the piece.

Gestalt Principles

The Gestalt Principles are a set of visual perception principles that were developed in the 1920’s by a German Psychologist. It hypothesis that people try to perceive the world by connecting the dots from visual patterns and previous experiences. These principles are based on four key elements.

Emergence- Which states that people identify things first on their outline. Our brain processes and identifies a well-defined, simple object before a more detailed one.

Reification- Our brain matches the things we see to patterns we have in our memory meaning that people can recognise things even when parts are missing.

Multi-Stability- People can perceive objects more than one way because our brain will switch between alternatives to find out what it is. This means that we will see one thing more than the other and the initial perception will become harder to see.

Invariance- No matter what rotation, scale or perspective, our brain can identify the object even with the appearance being changed in these ways.

These principles are applied in design but are used in slightly different ways.

Continuation

When the eye is encouraged to follow from one object along or into another. An example of this is in the Amazon logo.

Closure

This occurs when an element is incomplete or not completely enclosed but our brain fills in the missing information to complete the design.

Similarity

when the viewer perceives objects as being in a group or pattern when they look similar to one another. This can be similarities in shape, texture or colour.

Proximity

When objects are positioned close to each other in a design, this portrays the relationship between each element. This can also be applied to the opposite, if there is a lack of proximity then the objects can be perceived as being separate.

Symmetry

Elements that are identical to one another along a line or mirrored. There can be more than one symmetry within a design and symmetry can convey a relationship between the elements. The opposite can also be applied just like proximity. In the Nintendo Switch Logo, symmetry and asymmetry are both used to convey the relationship within the design.

Figure and Ground

arguably the most interesting of the design principles but also the most complex when implemented. The brain can separate the objects from the background they are in, focusing on the foreground and separating the background. This poster for Batman: Criminal Underground is an example where the black silhouette of batman is the figure, and the yellow background is the silhouette of the villain penguin, the ground.

During class we were given the task of creating 3 wireframes of our favourite apps. I chose Discord, Pinterest and the Fonacab app. I really enjoyed creating these as it made me look at the structure of the apps I use everyday and some of the buttons I don’t notice when when using them.

Published in IXD101

Skip to toolbar