Fibonacci and Golden Ratio in Web Design
General Development Concepts
Using Fibonacci and Golden Ratio principles to help design web pages
Date : 2006-05-04
For some designing layouts comes naturally but knowing the mathematics behind the designs that work will make any designer better. Whether you can pull design ideas out of thin air or you are more of a browse and adapt type designer this article will help you do better.
First of all, the Fibonacci numbers are a sequence of numbers that are at once simple and complex to describe. The easiest explanation is that the next number in the sequence is reached by adding the previous 2 (starting with 0 and 1). Here is a small sample of the Fibonacci sequence so you can see how that works. 0, 1, 1, 2, 3, 5, 8, 13, 21Ö and so on. The Fibonacci sequence is closely related to the Golden Section which can be described as the ratio: 1.6180339887 (or of course the inverse .6180339887) depending on if you are starting with the long side, or the short one. The Fibonacci sequence on the other hand can be described as the function:
F(n) = (a^n - b^n)/(a - b)
Where a and b are the two roots of the quadratic equation x^2-x-1 = 0. This is not the easiest function to punch out on your calculator but the concept is simple enough that you can easily determine the next or previous number in the sequence with a little old fashioned glance at the Fibonacci string that you spent an hour punching out.
Some may ask at this point, why would I want my layout to conform to some Golden Ration, or Fibonacci sequence. Well, it's kind of a popularity contest that we already know the results. When asked which Rectangle they prefer 9 out of 10 respondents (or some such majority) picked rectangle B.
Basically, then this takes the guess work out of design features.
The easiest way to work with the concept of the Fibonacci sequence is actually by using the Golden Ratio because the higher the Fibonacci sequence gets the closer itís numbers get to the Golden Ratio. Another benefit to using the Golden Ratio as opposed to the Fibonacci sequence is that the Golden Ratio can be applied to any number and many times in design we are stuck with certain dimensions. For instance we may be designing for an 800x600 display and we want to make our layout work with the Golden Ratio. We would simply multiply 800 x .6180339887 and come up with 494. Trying to achieve this with the Fibonacci sequence itself you first require figuring the sequence to the 800 range. Which results in something like Ö233,377,610,987Ö the 900 is too large and the 600 too small to really help us with our 800x600 area. We could use the 610 to determine a good looking narrow box perhaps of 377x610, but that isnít going to fix any design issues.
An example of what the Fibonacci Sequence looks like in design, sometimes referred to as a Fibonacci spiral:
So far weíve discussed the concepts of Fibonacci (briefly) and the Golden Ratio but it is especially important to see how we can use these in a site layout. We will find many times in a site design that we have to decide fairly at random the dimensions to use for a content area. This is where the Golden Ratio really shines. It is highly recommended for thumbnails, screen shots, advertising areas, and other content boxes.
The easiest way in real-world applications to apply this theory is using the simple ratio 3:5 or 5:3. The only other thing you need to take into account is that many screens donít have a simple 1:1 pixel size ratio, so donít forget to take the target screen pixel size ratio into account when figuring the actual pixel height and width to use for a screen element.
You can see examples of this in the standard ad sizes. Several of the standard sizes fit the Golden Rectangle. One in particular is 240x400. The Ratio 3:5 can be expressed as the decimal 0.6 so multiple 400 x 0.6 and, wait for it... yes, 240. Of course if you wanted to be more accurate you could adjust a little for the pixel ratio, but obviously it's not absolutely necessary.
So, the next time you are working on a layout, take a minute to check your math. You will be glad you did.
A simple Flash based tool to do the math: Phiculator