Posted Nov 9, 2022

4 min read

DESIGN

Create beautiful marketing graphics at scale.

Design & Inspiration

Private: A Designer’s Guide to the Golden Ratio

Design & Inspiration

Design & Inspiration

Private: A Designer’s Guide to the Golden Ratio

How to Use the Golden Ratio in Design (with Examples)

The Golden Ratio also called the Golden Mean or Golden Section Divine Proportion or Greek letter Phi is essentially a mathematical ratio that is found in the shapes and designs of nature.

When incorporated in the design, this ratio fosters organic and natural-looking compositions, aesthetically pleasing to the eye.

But again, how does it matter, what is it, and how can it be of help for designers? You shall have the answer to this and so much more by the end of this read!



What is the Golden Ratio?

As per Wikipedia, “In mathematics, two quantities are in the golden ratio if their ratio is the same as the ratio of their sum to the larger of the two quantities.”

What is the Golden Ratio? How to Apply It to Your Designs | Shutterstock


In other words, the Golden Ratio exists when a line is split into two parts and the longer part (a) divided by the smaller part (b) is equal to the sum of (a) + (b) divided by (a) – which both equal 1.618 – the number also called phi.

The ratio itself comes from the Fibonacci sequence, a naturally occurring sequence of numbers, found everywhere in nature, from the number of leaves on a tree, to the shape of a fern and even a hurricane.

Fibonacci Sequence is a series in which the pattern of each number is the sum of the previous two numbers. Starting at zero, it works as : 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, until infinity.

The Golden Ratio Formula in Design

In design, however, the Golden Ratio only strictly has to do with aesthetics. The Golden Ratio is about creating and celebrating a sense of beauty through proportions.

What Is The Golden Ratio, And How To Use It In Graphic Design

The Golden Ratio provides a sense of exquisite beauty, an indefinable charm, and a certain balance.

The proportions of Golden Ratio and the aesthetics thereof were even put to use centuries ago by the makers of the Pyramids in Giza and the Parthenon in Athens, all the way to Pepsi’s and Apple’s logo in recent times.

The Golden Ratio can be applied to faces, bodies, and even shapes. Our brains are wired in a manner that it prefers images that use the Golden Ratio.

For shapes, take a square and multiply one side by 1.618 and you get a rectangle of harmonious proportions. If you lay the square over the rectangle, the two shapes will give you the Golden Ratio!

The Golden Ratio in the Pepsi logo | Pepsi logo, Logo design process, Golden  ratio logo

Keep applying the Golden Ratio formula to the new rectangle on the far right and you will eventually end up with an image made up of increasingly smaller squares.

If you draw an arch over each square, starting in one corner to the opposite one, you’ll create the first curve of the Fibonacci sequence (also known as the Golden Spiral).

How to apply the Golden Ratio to your designs?

You should, by now, have a fair idea of what a Golden Ratio is at large. How do you use it for your designs though? Golden Ratios can help achieve some excellent, aesthetic designs and help you become an overall improved designer too! The Golden Ratio can be applied to elements like that of layout, spacing, content, images, and forms amongst others.

  1. Layout: Strike the right dimensions with the Golden Ratio

Golden Ratio in UI design. “Golden Ratio” is of great importance… | by  Mariya Tereshkova | Prototypr
  1. The Golden Ratio is useful when you are determining the dimensions of design. The simplest way to do this is to set your dimensions to 1:1.618. If you are working on a generic 960-pixel width layout, divide it by 1.618. You’ll get 594, which will be the height of the layout. Split the layout in two using the Golden Ratio. Now, placing your design or working within these two shapes will confirm the balanced proportion of the Golden Ratio!

  2. Spacing: Space your designs with the Golden Ratio

The Golden Ratio in Design: Examples & Tips | Design Shack
  1. Negative as well as positive spaces in a design has a lot of impact on the final delivered product. Spacing, in designing, can become very time consuming, taxing, and tedious. However, if you start your design with a Golden Ratio diagram and let the squares guide where you place each element, the whole process becomes very easy. Such a technique will also help you make sure that your proportions are consistent and calculated, especially if you are dealing with several elements.

  2. Content: Placement of content through tracing the Golden Ratio
    Our eyes are naturally attracted to the designs incorporated with a Golden Ratio, and hence, using the ratio to place content will naturally gain more appreciation and harmony. For example, if a page with two columns has a wide block of content on one side with a narrower column on the other side, the Golden Ratio’s proportions can be used to decide where to put the more important text. Adopting such a layout is very common for magazines. It also provides readers with a readable, well-organized text that has a natural sense of balance.

  3. Images: Golden Ratio for Images and the Rule of Thirds

Why The Golden Ratio Is Better Than The Rule Of Thirds
  1. A Golden Ratio based design can help you create an image that will have the person look at the more important elements of the picture. In other words, be drawn to the more important aspects of the picture instead of the less important noise. When using the Golden Ratio for an image, you split the picture into three random, unequal sections then use the lines and intersections to compose the picture.

    The Golden Ratio is a standardized 1: 0.618: 1 – so the width of your first and third vertical columns needs to be 1, and the width of the center vertical column should be 0.618. For the horizontal rows, the height of the first and the third row needs to be 1 while the width of the center should be 0.618. Voila! Now just use the lines and intersections have the viewer focus their attention on the part that you want the attention to be at!

    The Rule of Thirds is also used to crop images via the Golden Ratio. Though not as accurate, the Rule of Thirds can get you pretty close. All you need to do is to set up all vertical and horizontal lines to 1:1:1, thereby equally and evenly distributing spaces.  Align the important elements of the design around the center rectangle. This method works best if the elements are aligned at the four corners of the rectangle.

  2. Shapes: Golden Ratio for CirclesThe Golden Ratio can also be used to make the perfect circles for logo designing. A perfect circle in each square of the diagram will follow the 1:1.618 ratio with the circle being placed in the adjacent square. Even the most famous and well celebrated Pepsi logo is based on the intersection of two circles that follow the Golden Ratio.

  3. Cropping Images: The fundamentals of the Golden Spiral

Why The Golden Ratio Is Better Than The Rule Of Thirds
  1. One of the easiest things to do, something we have all done even before we got into designing, cropping could get rather technical at times. You can ideally always identify the blank space that can be removed but how will you make sure that the image is balanced after resizing? The answer is the Golden Spiral!

    For example, if you overlay the Golden Spiral on an image before your crop or resize it, you can always be sure that the focal point of the image is balanced in the center or the middle of the image.

All said and done, the beauty of any design is the fact that it is open to interruptions and no art is bad art. Use this magical number to create designs that please.

If not create, you can always use it to tweak your design because when it comes to it, even a minor crop or methodical layout development can speak volumes about how your viewers interact with your design!

Photography Composition: Think Twice Before You Break These 5 Rules

Though there never can be a standardized approach to making the best design, this mathematical approach can help one get at least a step closer to creating the correctly synchronized, balanced, harmonious, and aesthetic piece of art!

Similar Articles

The best design tool for e-commerce entrepreneurs

The best design tool for e-commerce entrepreneurs