Using the Golden Ratio in UI Design

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.

354px-FibonacciSpiral.svg
Fig 1. Fibonacci Spiral approximating the Golden Ratio.

Natural examples

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.

Fig 2. Examples of the spiral in nature.

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!

Screen Shot 2017-12-10 at 5.52.43 PM.png
Fig 3. Spiral applied to a previous layout.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

A WordPress.com Website.

Up ↑

%d bloggers like this: