Check
it out
Guide to Increasing Conversion

In our 7-part Guide to Increasing Conversion we'll introduce you to proven e-commerce functionality including, but not limited to, live chat, loyalty programs, and back in stock notifications! Sign up now and we'll deliver tips and best practices about each straight to your inbox!

Blog

Bulletproof Your Designs with the Golden Ratio

Bulletproof Your Designs with the Golden Ratio

Bulletproof Your Designs with the Golden Ratio

One of the first things graphic design students learn are grids. What is a grid system? It’s a series of horizontal and vertical lines that divides the canvas into areas for ordering graphical elements such as text and images. Think about it as the foundation of a house, it holds all the different pieces together but are unseen. Where do grids come from? We’re not going to go through a history lesson but we are going to talk a little math. Grids are made from rational and irrational ratios. The irrational ratio for creating cohesive web designs that we are interested in  is called the Golden Ratio.

Design in Gold

The Golden Ratio can be a powerful tool for any designer.  Indeed, it can allow us to explain why something “feels right," and when we can acknowledge what people normally can’t pinpoint, it gives us an advantage.

How can we capture the wealth of the divine proportion in web design? We begin by acknowledging that even design is mathematical, using a grid system constructed by ratios like the golden ratio to help facilitate the design.

So, what is the golden ratio? The golden ratio, or Phi, is a visual composition that can be seen in science and nature. Phi, or the Fibonacci sequence, is 1.618033988749895 or roughly 1.618. If it sounds familiar, you must have heard about the Da Vinci Code. Below is a spiral plotted using Phi and an example of it in nature.

Internal chambers of a nautilus shell

You can see the resemblance of the Golden Ratio in seashells and some flowers. (From the Creative Bloq)

Mark Boulton, a notable designer who knows more than a thing or two about grids, believes that “feel is an emotional reaction to construction, to mathematics.” This means that when we think a certain design “feels” right, there is possibly a mathematical component behind it. More often than not, we are unconscious of the mathematical intricacies of the golden ratio or divine proportion even though examples of it are available everywhere around us. If you look out the window, you may not notice it, but you’re looking at examples of golden ratio! It may be a tree, a flower, anything! It’s a very ‘natural’ and organic pattern.

Web design can (and should) also follow this natural trend. Designing on a grid will help maintain the flow and usability of the site. We should think of design as essentially a plan, something to lay out before the construction process begins. Like architecture, building a website also needs structure. We can’t build anything without a foundation. Grids are our foundation in web design. Can you imagine how hard it would be to build a house without a frame?

Since this article’s purpose is not to show you how to make a grid, we will refer to Mark Boulton’s article on how to design grid systems. The basics are that if we use the ratio 1:1.6 we can create a grid that “feels right” and guide you in content management and placement to maximize usability. To achieve the golden ratio, you just need to do a little bit of math. For example, if your main content area is 640px, then you’re sidebar or aside should be 400px to maintain the 1:1.6 ratio.

640px ÷ 1.6 = 400px

“Using the Divine Proportion as a guide to your compositions can improve the communication of your design.” -Mark Boulton

In design school, you may have just referred to the golden ratio as the rule of thirds. You divide an area into equal thirds vertically and horizontally. Where the lines intersect is where photographers are taught to position their subject to achieve the composition that “feels right.” Now, we learn that what feels right isn’t just by chance, it’s calculated.

Example of Twitter using the golden ratio in their 2010 redesign.

(From the Creative Bloq)

Conclusion

All in all, we want to keep in mind of the mathematics that can help us impose the natural order into our designs. Grid systems that make use of the golden ratio will not restrict you creativity but rather help communicate and deliver messages to your users more effectively.

Golden Ratio:

Further Reading: