Light Dark

Spiral Web-Design

Essentials in Art & Design - Divine Ratio

Fibbonaci Sequence

Something I read this morning that was very interesting is about the “Essentials in art and design” Or it can be called “Divine Ratio,” in relation to GOOD website design.

Now, this isn’t necessarily about if the button should be RED or GREEN I am going to focus specifically on the layout of a website.

I am going to call it here thou – NERD ALERT!!  Read on if you want your mind blown.

In my experience in this industry, we are constantly promoting hero imagery with nice banner images and clear CTAs (Call to action).

However, this insight has me thinking in circles that are found naturally in seashells, hurricanes, and even in the way galaxies spiral.

The Fibonacci Sequence is something you probably have inadvertently come across when doing math logic puzzles. Or maybe they are all over your notes when drawing snails during the zoom meeting … Raise your hand if you are guilty! 

This particular sequence comes from adding the last two numbers to get the next, e.g. 0, 1, 1, 2, 3, 5, 8, 13, 21, 34. Using the Fibonacci numbers as dimensions of squares, and drawing quarter circles within them, you end up with the aforementioned spiral.

Now I know you are more than likely thinking… WHAT??? However, roll with me on this.

If we overlay this spiral design on our website with the correct dimensions we can adjust our website designs to be more appealing to the human/ buyers eye.

So let’s break down how this applies to websites.. The Golden Ratio is 1.61. As an example, if you intend to create a web page that is 900 pixels wide, then you simply divide that number by 1.61. That will give you 559.0. This number, or 560, will give you the width you need for your text in the main box. Your right side column (or left), will be the difference of 900 minuses 560, which equals 340.

This same ratio also applies to vertical objects, such as the height of your graphics within your heading.

Now if you don’t want such a wide sidebar you can flip the sequence upside down, so the ratio still applies.

Was your mind blown? Mine was, I am looking forward to applying it to our next project 

As a Shopify Partner, we love the case studies they send us for inspiration. 

Ready to launch or re-launch your e-commerce store online get in touch to see if you are a good fit for our methodology.

None of this content is authorised by Shopify. This is 10 years of working in the media and learning like a human-machine on live projects.

Sign up to our mailing list