The Mathematics of Website Design

You might have heard of the Golden Ratio or Fibonacci Sequence. This is a sequence of numbers discovered by the medieval mathematician Leonardo Fibonacci in which the next number is found by adding the two numbers before it starting with 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 and so forth. As the numbers increase, the ratio of the larger number to the smaller number (the quotient of the larger number divided by the number preceding it in the sequence) begins to come closer and closer to 1.618 which is known as the Golden Ratio. This ratio is considered to be innately pleasing to the human eye. It is found in nature, art, and architecture in many different forms, for example in the conch shell and the Parthenon below.
 

You can watch a video below explaining the mathematics behind the Golden Ratio in greater detail and its significance for the world we live in.



So what does this have to do with this blog? This week, I attended a lecture on web design by Professor Keith Williams of NJIT in which he promised that after watching his presentation, we would never look at a website the same way again. Professor Williams kept his promise.

He explained that the key to good web design is the Fibonacci Sequence. Whenever a website has an unequal amount of information, a main section and then a sidebar, the ideal way to lay this out on the page is to use the Golden Ratio. The reason is as I stated above that this ratio is innately pleasing to the human eye. We are hard wired to find geometric shapes using this ratio to be attractive and other designs to be less appealing.

Why is this so important in web design? Because a good website has to be designed like a good billboard. One drives by a billboard and usually has maybe 3 seconds to scan its contents. A billboard has to attract the viewer and give a memorable message in this short span of time. Similarly, one surfing the web will perhaps spend 3 seconds scanning a website before deciding whether to stay on the site or jump to the next search result in Google. A website has to contain an innately alluring and pleasurable design in order to keep the user on it.

Professor Williams illustrated how virtually all of the most popular, professionally designed websites use the Golden Ratio. This blew my mind.

For example, below is a picture of a Google search page.

You will notice that the main search area is 570 pixels wide while the smaller right sidebar is 354 pixels wide. 570/354=1.61 very close to the Golden Ratio of 1.618.

Here is another example from Twitter.

Once again, the ratio of the main column to the left sidebar is 1.618. In this case exactly the Golden Ratio.

Try this yourself. Measure the pixels on any part of a website using the Measure It Chrome extension. When designing your own website, calculate the Golden Ratio for any website size (the ideal website width is usually 960 pixels) or column size using the Golden Ratio Calculator. For further reading on the Golden ratio in web design click here and here.

I was so inspired by this talk that I redesigned this blog to match the Golden Ratio. Here is a schematic.

Notice that the ratio of the height (116 pixels) to the width (72 pixels) of my icon is 1.611. The ratio of "Tech Rav" to the width of my icon is also 1.611. The ratio of the line "Discussions of Jewish EdTech" (188 pixels) to "Tech Rav" is 1.62. Finally the ratio of the larger body of my blog (590 pixels) to the right sidebar (366 pixels) is 1.612. These are all very close to the Golden Ratio of 1.618.

I was so excited about this that on Thursday I actually taught a junior math class on the Golden Ratio in web design. (Considering that I have not taken any math courses since high school, this is quite a stretch for me.) Why I am SO excited? Because this is an example where the concepts in mathematics and geometry come to life for students (like me) who would not otherwise find the math to be engaging. As the very talented department chair in math at my school often says, if one just teaches mathematics as a series of equations without touching on their real-world applications then one loses the excitement and beauty of this discipline. Creating attractive works of art, architecture, and web design is often not just an art but a science. The key lies in the magic of the Golden Ratio.