spiral-stairs
Throughout time, designers have used concepts like proximity, similarity, continuation, repetition, and rhythm to illustrate harmony and unity. Symmetry, asymmetry, and radial patterns are used to create balance.

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.

fibonacci golden ratio

Precautions

Many designers avoid using the Golden Ratio as the basis for their designs. The sense of scale created by these numbers can easily get out of hand, making things way too big or too small. The idea is to strike a balance with the numbers, making sure that they fall within a range that is pleasant to the eye without getting too extreme.
fibonacci golden ratio
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.
encompass-concept

Implementation

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.
encompass-header
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:

fibonacci
Then, using Balsamiq Mockups, I created a concept for Encompass Consulting’s home and services pages. One should notice how nested elements “feel right” inside of each other. These layouts have a great sense of scale without the viewer thinking, “Hey, they are using the Golden Ratio.”
encompass-concept-home
encompass-concept-services-2

“It’s really all about creating a visual hierarchy with the right amount of negative space.”

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.
golden ratio in nature
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!