A Blog by Linda Darlene

“The Golden Ratio has inspired thinkers of all disciplines like no other number
in the history of mathematics.” ~ Mario Livio

With the title I’ve given this blog, I’ve challenged myself to keep this somewhat complicated subject as simple as possible — especially for my mainly right brain readers. 🙂

I’ll be examining what the Golden Ratio is — why some artists and web designers use it — either purposefully or intuitively when designing websites — and why the finished results end up being much more beautiful and psychologically pleasing than not.

One Simply Golden Explanation

The Golden Ratio is the Rule of Thirds and is a mathematical ‘ratio’ prominently found in nature, that causes objects to seem beautiful, balanced, and harmonious to the eye.

This ratio is used in architecture as well. Some people say that the Ancient Egyptians used the Golden Ratio (also called the Golden Rectangle, or the Golden Mean, and lots of other names), suggesting that this principle probably dates back at least 4,000 years. But what is it exactly?

The principle is about proportions and ratios. Say we have a shape with a dimension ratio of 1 to 1.618 (or 1.618:1, it would look like this proportionately: _______________•_________

You may remember from high school geometry that this ratio of 1:1.6 is phi. The formula says that if there are two things and their ratio is the same as the ratio of their sum to the larger of the two things, you have a Golden Ratio. Another way of saying this is that the ratio of the longer side to the shorter is the Golden Ratio! Whoa! Still a bit too much for you? Yea, me too. Let’s try again.

I think a picture is worth a thousand words, so look at Sample A.

Let’s take a rectangle (see Sample B below) and draw a line inside the rectangle to form a perfect square, the remaining rectangle will have the same ratio as the main rectangle. And we can continue doing this over and over. By applying the rule of thirds to any shape with proportions approximately 1:1.6, we get very close to what is called a Golden Rectangle.  Many architectural elevations, artwork, and websites use these 1:1.6 ratios. In nature, the pattern is present in things like the human body, flowers, animals, hurricane patterns, leaves, animals, and even the Milky Way. If you want to see some examples from nature? Click here. 

---

A ‘Mind Blowing’ Video on the Golden Ratio

For those of us who tend to be allergic to math 🙂 , let’s watch the video below. It provides a simple explanation of the Golden Ratio. The presenter isn’t a math buff but loves sharing ‘mind-blowing’ concepts. Her explanations are really easy to understand, I promise.

---

Sample Images

Here are some of the images to study that we saw in the video.  They demonstrate the Golden Ratio of 1:1.6.

---

The Golden Ratio in Web Design

In web design, what these concepts mean to us is that we can take our initial web design mockup with its content and sidebar, if there is one, and apply these ratios to all the design elements to create a site that will be deemed to be appealing. It’s simply all about spacing and placement.

In the image below, we see a spiral shape, known as the Fibonacci spiral, within the rectangle. The line of the spiral starts at the bottom left corner, and the spiral is formed by following the opposite corner of each square as it goes, in this case, clockwise. This same ratio is found in nature in flowers, plants, pinecones, fruits and vegetables, the human face and hand, etc.

You may have wondered at some point at the many works of art that have the main focal point off center. This off-center positioning is due primarily to the Golden Ratio and the intersecting lines. Many website headers, for example, use the Golden Ratio, with the logo on the left and the site title using up the rest of the space. We have come to accept this as a balanced way to present logo and site title. Isn’t it interesting that specific proportions create designs that evoke a feeling of balance and harmony?

In design work, designers often place key focal points, images, headings, graphs, etc. on one of the intersecting lines of the series of rectangles formed from the Golden Ratio. These focal points bring elements to the fore in importance.

When our brains recognize the Golden Ratio in use, it quickly processes an image no matter whether that image was created organically or fabricated. The message the brain sends is that the image is balanced and harmonious. We call it beautiful. We do not have even to be aware that we are viewing the Golden Ratio, but the brain knows — and finds it pleasing. [1]  Here’s another interesting fact! Not only will use of the Golden Ratio help our eyes to scan and interpret an image faster, but our brains will process items even more quickly when the eyes take in a picture from side to side, as opposed to up and down.  [2]

This concept has a significant impact on web design where it is essential to capture a visitor’s attention above the fold, from side to side, without scrolling up to down. The message is: use the Golden Ratio on those home pages to evoke a pleasant sensation, where possible, and your website creation will be interpreted as aesthetically pleasing.

So there you have it!  A simply golden explanation of why some designers use the Golden Ratio in web design to create an appealing site. After all is said and done, this discussion wasn’t too complicated, was it?  🙂

---

FOOTNOTES

[1] The Unrealised Impact Of Golden Ratio

[2] Why golden ratio pleases the eye: US academic says he knows art secret

[3] Eightonesix designed a template that designers can use by placing it over a web site to test if the site uses proportions akin to the Golden Ratio.  Background vector created by eightonesix – www.freepik.com

[4] If you enjoy math, here’s a very simplistic mathematical explanation of the Golden Ratio.  Click here.

---

Chinese for Aesthetic