Relax Breath of Solution.Community tech blog of Sameera Thilakasiri - Consultant UI, UX, RWD Specialist/ Interactive Designer

Just I wanted.. Do you?…

Applying The Golden Ratio In Modern Designs

Posted on March 15, 2014 | No Comments

By underpinning the design of your website with a literally natural order, viewers may find your design more interesting and innately pleasing. This concept is called the golden ratio, a mathematical concept nature obeys and that we humans subconsciously recognize as an expression of perfection.

The Golden What?

In simple terms, the golden ratio (also known as the divine proportion or the golden mean), is a mathematical constant that appears repeatedly in nature and artwork.

Expressed as an equation, when a is larger than b(a + b) divided by a is equal to a divided by b(just look at the image below), which is equal to about 1.618033987. That number, often represented by the Greek character “phi,” is the golden ratio.

(Image Source:

The same theory can be used to construct a rectangle, called the golden rectangle. An image that follows the golden ratio can be placed neatly inside a rectangle that obeys the ratio.

(Image Source:

To construct a golden rectangle, choose a number that will be the length of the rectangle’s short side. For argument’s sake, let’s say 500 pixels. Multiply that by 1.618. The result, 809 pixels, is the length of the long side of your rectangle. Therefore, a rectangle that is 500 pixels by 809 pixels is a golden rectangle. It obeys the golden ratio.

Divine Composition

How then do you use this magic number in the composition of your web page? The math may seem like a stifling box that your creativity will struggle in, but the golden ratio is simply a useful guideline. Having a basic guideline to build from can end up giving you more creative room by taking some of the guesswork out of proportions and placement.

Think of it as a tool instead of a cage. At its most basic, you can use the golden ratio to designate the size and placement of content areas and side bars. A fixed-width layout is the easiest application. Decide on the overall size of your layout via the method for creating a golden rectangle.

For Grids/Blocks

The square created by the a lines would be your content block. The smaller rectangle would be a side or navigation bar. Once you have figured out the size of your rectangle, finding out how wide your navigation bar needs to be is easy math.

  • For this example, we’ll say your rectangle is 525 pixels by 850 pixels.
  • 525 is a and 850 is (a + b), and b will be the width of your side bar.
  • To find b, we simply subtract from (a + b), which is 325.
  • Therefore the width of your side bar is 325.

Remember that your rectangle can be flipped around to suit your purposes, putting the sidebar at the top, bottom, or opposite side. As long as the ratio holds, your design will feel harmonious.

For Text

There’s a faster way to get the measurements you need and it can be applied with text content.

  • Let’s say your context text is size 12.
  • Multiply 12 with 1.618, the golden ratio, and you’ll get 19.416.
  • A header text size of 19 or 20 would closely follow the golden ratio.

The golden ratio is a language your mind understands, and by communicating with it, your ideas will come across more effectively. You don’t have to adhere to it exactly; the basic principle is enough. Applying the ratio to image sizes, the relationship between text and image placement and the creation of subdivisions within side bars are all possible concepts.

Columns And Font Sizes: Fibonacci Sequences

Another simple tool for web design linked to the golden ratio is Fibonacci numbers. A Fibonacci sequence begins with 0 and 1. The previous two numbers are added together to produce the next number in the sequence: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34… and so on.

A little math tells us that the relationship between sequential Fibonacci sequence numbers is startlingly close to the golden ratio – divide the any number in the sequence with the number before it and you will get – you guessed it – 1.618.

As with the golden ratio, Fibonacci numbers can be used to dictate the relationship between header and content text sizes. It could also be used to designate the width of columns and is especially effective in blogs and other text-dense layouts. Composition could also be built upon the concept of Fibonacci tiling, in which tile size is built upon using the Fibonacci sequence.

(Image Source:

Golden Spirals And Content Clustering

Another possible method of using both the golden ratio and Fibonacci numbers are the golden spirals and Fibonacci spirals. Golden spirals get wider by a factor equal to the golden ratio for every quarter turn they make, and Fibonacci spirals are formed using Fibonacci tiling.

The spirals can serve as a guideline for content density and clustering. They can serve as the foundation for the ratio of your website header images, search bars and tool bars.

When choosing the ideal image for a front page built around large graphics, such as store home pages and photography websites, you can also benefit from the golden and Fibonacci spirals.

Powerful messages are often subliminal, and the golden ratio is one of nature’s most prolific subliminal advertisements. By utilizing the divine proportion, you give yourself an edge of natural logic and organic grace that all humans have a subconscious attraction to. The golden ratio is yet another tool at your creative disposal.

Sameera Thilakasiri By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.


Leave a Reply

You must be logged in to post a comment.