Awwwards

Improving Your Web and Logo Design Using Golden Ratio

by Ciprian Paraschiv on 5th May, 2017

Web design

What if I tell you that you can use centuries old techniques to improve your web and graphic design? What if there are mathematical described expressions of beauty you can apply in your design?

Definitely yes. Today I’m gonna show you how.

The Golden Ratio has been used in architecture and object design for ages. Can digital design make use of this principle and piece out all the elements of a design to create the balance that will satisfy the hard to please eyes of our digital users?

In mathematics, two numbers are in the golden ratio if their proportion is the same as the ratio of their total to the bigger of the two numbers. In terms of design, applying the golden ratio is one of the best ways to create harmony and balance that will please the eye.

With the Golden Ratio you can exquisitely bring to life more enjoyable designs.

If you are not familiar with the way golden ratio brings sense of balance and harmony in everything we experience and see in nature, I recommend you this short clip:

Golden ratio in practice

Feared of the math around here? Let’s see how easy it is to design with golden ratio. Start by drawing a square. From the middle of one of it’s sizes, draw the diagonal to the counter corner. The new formed diagonal is the radius of the arc. You can now get a “golden rectangle” if you draw the circle from the arc.

If we lay out diagonals in the bigger and the small rectangle, we will obtain a “focal point” at their intersection. This area naturally gets most attention so it’s clever to place important elements of the UI here. In any square of the arc with the radius the same size of the side of the square, we will get this effect of the “golden spiral”. Also, you must consider rotating and adjusting to the needed size of your interface.

So a “Golden Rectangle” is a rectangle whose length is 1.6180 times its width.  For example, a  div which has one side of 300px and another of 300 * 1.6180 ≈ 485px could be said to be a golden rectangle.

If you cut off a perfect square from this golden rectangle, you’ll get another golden rectangle.

You can replicate this step again and again. What you end up with is the following mundane picture.

What you will get will be a flexible layout content. You can place the headline to the left and some links to the right, separated by the grids. This will allow you to implement a content driven design and to allow breathing space for the typography. Normally, with a similar traditional grid, you would get a more densely packed layout, but using the Golden Ratio pattern you can remove the clutter. Users are now supported to explore the content horizontally.

“Golden Ratio” and logo design

‘Golden Ratio’ can be applied to design logos in two manners. One is using the ‘Golden Ratio Spiral’ to make the proportions of the logo shape, font etc. The other way is to use Fibonacci Number blocks (squares/circles) to achieve this. This way you will get the perfect balance and harmony any logo needs.

Let’s consider Apple logo: There are two groups in the design world: one considering it is designed according to the Golden Ratio while the others disagree. In my opinion, the Apple logo is created according to the Fibonacci number sequence rather the Spiral.

Ciprian Paraschiv

LEAD DESIGNER

I am a breed of SEO specialist and UX Design advocate. My strong engineering knowledge is key to reconcile the distinct goals of the two areas. I design with user’s delight in my mind, while not averting from optimizing conversion rates.