Caleb Gittins | Website Design & Development Gold Coast

The Golden Ratio in web design

Published

Since ancient times the golden ratio (also referred to as the divine proportion, the golden mean, or the golden rectangle) has been used to create designs which are aesthetically pleasing.

The golden ratio is a visual representation of the number phi (1.618033988749895), and can be seen in ancient architectural design such as the Parthenon, and many works created by artists and architects during the Renaissance.

The Rule of Thirds

“The rule states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections. Proponents of the technique claim that aligning a subject with these points creates more tension, energy and interest in the composition than simply centering the subject would.”

– Wikipedia

In web design, the golden ratio and the rule of thirds can be used to create websites that adhere to these values and are aesthetically pleasing as a result. The golden ratio can also be used to determine a baseline for typography. For example, on this site the body font size is 16px, so the line height is 26px (16 x 1.618 = 25.888).

Examples

Apple logo showing Golden Ratio The Golden Ration used on the iPhone

Images by gold3nratio.tumblr.com

Resources

Further Reading