The mathematical Fibonacci Sequence (the Golden Ratio) is known for its ability to create scale and proportion. Today we are going to focus on the Golden Ratio and how it can be used to spice up a website design.
I’m not suggesting that every numerical value in the design needs to follow this pattern (1, 2, 3, 5, 8, 13, 21, 34, 55, 89, etc.) but when used in subtle ways it can lead to a pleasing visual hierarchy. On a recent Two Hats project for Encompass Consulting, we did just that. I used numbers from the sequence to build the site header.
The overall height of this header was 89 pixels (which I’ll refer to as simply “px” for the remainder of the article), the logo height was 55px, the menu bar height / spacing was 34px, and the font size was 21px. Looking at the header by itself you would probably never know that these numbers were present. Even the top orange bar is a combination of two numbers from the sequence (34 and 8) which equal 42px.
This header design is pleasing to the eye without the viewer knowing why — that is the trick. The method is to nest one number from the sequence inside the next, i.e. if you choose 34 for the menu bar height, the next “level” down in the sequence would be 21. If I had chosen 13px instead of 21px for the menu font, it would feel too small. But when implemented correctly, a pleasing amount of negative space between “levels” is created by the sequence.
One could take this idea a step further and implement it on a grander scale, perhaps even across the entire page. I’ll show you some examples of how a page layout could be made to exhibit this Idea of scale. First, I started by creating a set of layout “blocks” to help make creating the design easier, they look like this:
It’s really all about creating a visual hierarchy with the right amount of negative space. So many naturally occurring objects have this subtle sequence as their underlying structure that the average observer rarely takes notice. With just a quick google search, one can’t help but notice that mother nature is really all about this concept.
“It’s really all about creating a visual hierarchy with the right amount of negative space.”
To wrap this up, I want to reiterate that this article is suggesting using this design principle only as “spice” for your website and not as the main dish. Nothing can replace good content and solid web strategy when it comes to getting clicks and conversions. On the other hand, if you want to make your viewer think “That’s really nice” without them knowing why… give this a try!