100%

Design & the Golden Ratio

R Proffitt
by Richard Proffitt
iopan design

There's a common mathematical ratio found in nature that can be used to create pleasing, natural looking compositions in your design work. It is called the Golden Ratio, although it's also known as the Golden Mean, The Golden Section, The Divine Proportion or as the Greek letter phi, φ. Whether you're an illustrator, web designer, art director or graphic designer, it's well worth considering the Golden Ratio on any of your projects.

Well-known to the ancients: The Pyramids of Giza, the Parthenon and Da Vinci’s painting of The Last Supper are all said to be designed and composed within the parameters of this ancient equation. The Golden Mean is derived from the famous mathematical Fibonacci Sequence in which each number is the sum of the two numbers before it.

The Fibonacci Sequence

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…

The Fibonacci numbers are the numbers in the above integer sequence, called the Fibonacci sequence, and characterized by the fact that every number is the sum of the two preceding ones.

Named after Fibonacci, also known as Leonardo of Pisa or Leonardo Pisano, Fibonacci numbers were first introduced in his Liber abaci in 1202.

The sequence Fn of Fibonacci numbers is defined by the recurrence relation:

Fn = Fn—1 + Fn—2 ,

With seed values:

F1 = 1, F2 = 1

or

F0 = 0, F1 = 1.

The difference between any two numbers in this sequence isn’t always exactly equal to 1:1.618 (The Golden Ratio - expressed as a more exact ratio - is: 1.61803398875…) - but it’s rather close.

The Golden Rectangle

A geometric example of the golden rectangle

A golden rectangle (in pink) with longer side a and shorter side b, when placed adjacent to a square with sides of length a, will produce a similar golden rectangle with longer side a + b and shorter side a.

This illustrates the relationship:

a+ba = ab ≡ φ

In Sacred Geometry, this is known as a Divine Progression. It's truly amazing how this simple ‘formula for regenerative progression and growth’ could be expressed by a ratio that is present everywhere we look, especially in the natural world.


img
Fibonacci Spiral/Rectangle

A Fibonacci spiral is a series of connected quarter-circles drawn inside an array of squares with Fibonacci numbers for dimensions. The squares fit perfectly together because of the nature of the sequence, where the next number is equal to the sum of the two before it. Any two successive Fibonacci numbers have a ratio very close to the Golden Ratio. The larger the pair of Fibonacci numbers, the closer the approximation. The spiral and resulting rectangle are known as the Golden Rectangle.

The Golden Ratio & Design

When applied to graphic design, the Golden Ratio simply provides us with a way of creating harmony and proportion that our subconscious mind seems to be attracted to. As we’ve previously mentioned, the Parthenon and the painting of The Last Supper appear to use the ratio, as does the Apple logo, the Twitter logo and even natural forms such as ferns, flowers, sea shells and the human face.

The golden ratio is a reminder of the relatedness of the created world to the perfection of its source and of its potential future evolution.

Robert Lawlor in Sacred Geometry: Philosophy and Practice

Using the Ratio

  1. Create a ‘Golden Rectangle’ — a rectangle whose length is 1.618 times its width. For example, a div which has one side of 360px and another of 360 x 1.618 ≈ 582px could be said to be a golden rectangle.

  2. In a sense, to an analytical eye, we are following the spiraling progressions [both inward and outward] of “design's” engagement with the senses. Often intuitively, as it seems the most pleasent route possible, the path of least-resistance, the divine geometry of a generative and mysterious force of nature. Begin to see where you already use the ratio in your daily life.

  3. Create a grid layout which adheres as closely as possible to the 1:1.618 [more accurately – 1:1.61803398875]. In other words, you ensure that the main sections of your design (your content bar and side bar in a web layout, for example) adhere to the ratio. You can then subdivide these into smaller sections and still keep the ratio intact if you’ve done your maths right. Consider for the content bar, a percentage width of: 61.8% and for the side bar the remaining: 38.2% — this is near-enough to the Golden Ratio as you can get.

  4. In typography, you can set the ratio between font-sizes using the golden ratio. For example, let’s say that you’re using 12pt font for the body text. Using the golden ratio, you can determine the best size for the headings by multiplying the body text number by 1.618. So, in our case it will be 12x1.618 = 19.416, which you can round up to 19.5pt font. The combination of between (12pt : 19.2pt) and (12pt : 20pt) seems particularly efficacious.

  5. With Images, it's all about how you crop and size them. When you crop pictures with the golden ratio in mind, you might also consider using the golden spiral as a guide for the shot’s composition. Consider the images below where the Golden Spiral has been placed over the top with the focal point of the image synchronising with the centre of the spiral.

  6.  


  7. You can also use Golden Ratio principals in Logo design and branding. Even if the logo itself isn’t shaped like a golden rectangle, it can still employ elements that use golden proportions. The Apple & Twitter Logos are firmly set within a functional design relationship with this ubiquitus ratio. Examples below from the article: Golden Ratio in UI Design at cubettech.com.
  8. If you look around the web, you'll find that there is a great deal of interest in design work guided by the Golden Ratio. I have found a few useful sites with automated tools that will assist you in the number-crunching and provide you with a system that is both functional and aesthetic. Scroll down the page to see the list of recommended sites.
img

Golden Ratio Calculation Tools

  • Phiculator
    Phiculator is a simple tool which, given any number, will calculate the corresponding number according to the golden ratio. The free tool is available for both Win and Mac.

  • Atrise Golden Section
    Atrise Golden Section is a program, which allows avoiding the routine operations, calculator compilations, planning of grouping and forms. You can see and change the harmonious forms and sizes, while being directly in the process of working on your project.

  • goldenRATIO
    GoldenRATIO is an app that provides an easy way to design websites, interfaces and layouts according to the Golden Ratio. Available in the Mac App Store for $2.99, the app features a built-in calculator with visual feedback.
    It also has a 'favourites' feature that stores you screen position and settings for repetitive tasks, and a 'Click-thru' mode that means you can use it as an overlay in Photoshop and still work on the canvas.

  • Golden Ratio Typography Calculator
    This calculator from Pearsonified helps you to create the perfect typography for your website in line with Golden Ratio principles. Just enter a font size, content width, or both into the field on the website, and click the Set my type! button. If you'd like to optimise for characters per line, you can enter an optional CPL value.

  • Phimatrix
    Phimatrix is an amazing tool for customizable grids and templates. It allows you to upload any image and analyze it in terms of golden ratio principle and design your idea in seconds.

  • Golden section finder
    Golden section finder is a pocket sized viewfinder to observe the golden ratio basically everywhere you want.
 


Articles