Introduction

In this article, we‘ll take a look at the Golden Ratio, also known as Phi or φ, and how it can be applied to the design of a simple responsive web page.

If you’re not familiar with the Golden Ratio, also known as the Divine Proportion, it’s a fascinating number that appears everywhere from art and architecture to the DNA double-helix and other manifestations of nature.

Here are a few simple definitions of Phi:

a + b is to a as a is to b (a + b) / a = a / b φ = 1.618…

We won’t go into great detail about the number φ itself, however, we can get an idea of how to work with it in Photoshop by creating a 1366x768 “Web Most Common” image (chosen for convenience only) and then adding a vertical guide line at x = 1366px / 1.618 like so: