In this post I’m going to explain why I use the Golden Ratio and Fibonacci Spiral in my UI layouts.
In mathematics the Golden Ratio occurs if the ratio of two quantities is the same as the ratio of their sum to the larger of the two quantities. These proportions have been used used across architecture, fine art, musical composition and more in order to achieve a sense of harmony or balance in the design, because the proportions are often considered to be pleasing to the eye. It’s very applicable to user interface design but, sadly, is often overlooked!
Construction of the Golden Ratio
To construct a Fibonacci Spiral, the spiral must start with a rectangle partitioned into 2 squares. In each step, a square the length of the rectangle’s longest side is added to the rectangle, as seen in the illustration below.
Mathematicians have discovered that the Golden Ratio is copiously present in nature, in flowering plants, faces, seashells, astral bodies, to name but a few examples.
In fine art, paintings are very often composed using a Rule of Thirds, by laying out a painting balanced in thirds, the painting will flow better.
Applying this to my work
Following the spiral it becomes evident how to place elements. It allows you to compose a layout which will allow for a clear hierarchy of information, directing the player’s eye to to the information you want them to consider first.
As we can see, in the focal point we have action the most important information to a player, the loadout associated with this character. This information will have the single largest impact on their choice and their experience in-game and thus, needs to be communicated most of all.
Elements are large and located within a comfortable distance from each other and from the edges of the screen. The gaze of the player will be led across all information and will rest on the focal point. Great!