Website Preloader
Mighty Fine Logo

The Golden Ratio in Design: What It Is And How To Use It In 2023

April 11, 2023

John Hawley

w

Design

If we told you there was a distinct similarity between Twitter and the band Tool — would you believe us?

While it might seem kind of far-fetched, it’s true! Both have used the Golden Ratio in design in one way or another. The latest incarnation of Twitter’s iconic blue bird logo used circles based on the Golden Ratio, while Tool took a slightly different approach — they structured the song’s rhythms and time signatures using the Fibonacci sequence, which is closely tied to the Golden Ratio.

…Woah, right?

While it might seem kind of far-fetched, it’s true! Both have used the Golden Ratio in design in one way or another. The latest incarnation of Twitter’s iconic blue bird logo used circles based on the Golden Ratio, while Tool took a slightly different approach — they structured the song’s rhythms and time signatures using the Fibonacci sequence, which is closely tied to the Golden Ratio.

What is the Golden Ratio?

The Golden Ratio has been used in art for a long time and has been known by many different names — The Golden Number, The Divine Proportion, or Phi ( ϕ pronounced like the “fi” in wi-fi).

The Golden Ratio

Whichever way you want to call it, the first known mention of the Golden Ratio was around 300 BC recognized by early Greek mathematicians like Euclid and Pythagoras. It’s a proportion, or ratio, that equals approximately 1.6180… or somewhere around that ballpark. We’d love to give you the exact number, but then you’d never finish this article.

No, seriously.

It quite literally never ends. 1.618033988749895… and so on, until infinity and beyond. For the math whizzes, it’s what is referred to as an Irrational Number (like pi, or π, for example).

And according to the ancient Greeks, this Golden Ratio, or Phi ( ϕ ) as it was originally called, provided the most aesthetically pleasing proportion to sides on a rectangle. The most notable example of the Golden Ratio being used in their time is the Parthenon, commissioned by Pericles, which was likely to have inspired other Greek architects to design buildings using the same or a similar rigid system of ratios.

However, it wasn’t until 1509 that Luca Pacioli, with illustrations by Leonardo da Vinci, popularized the concept as the “Golden Ratio”, with drawings you have undoubtedly seen across a spectrum of media.

While it might seem kind of far-fetched, it’s true! Both have used the Golden Ratio in design in one way or another. The latest incarnation of Twitter’s iconic blue bird logo used circles based on the Golden Ratio, while Tool took a slightly different approach — they structured the song’s rhythms and time signatures using the Fibonacci sequence, which is closely tied to the Golden Ratio.
The Vitruvian Man, by Leonardo da Vinci

The method to the “mathness”

From ancient Greek architecture to the modern logos of major corporations, the Golden Ratio has been used by artists and designers to create visually appealing compositions. For example, Salvador Dali, one of the most famous artists of the 20th century, incorporated the Golden Ratio into some of his most famous pieces, such as “The Sacrament of the Last Supper” and “The Madonna of Port Lligat”.

And now you may be saying, “That’s cool. But how did they actually make use of a mathematical formula for art”?

We’ll explain. But first, we need to take a look at which elements of the golden ratio artists and designers use.

If math makes your head spin — don’t worry. We’re not about to bog you down with intricate numbers. We’re going to keep this pretty high level and not get lost in math sauce, so to speak.

Golden Rectangles

Golden Rectangle

It’s easiest to start by explaining the Golden Rectangle first.

Simply put, it’s a rectangle whose length and width are in proportion to the Golden Ratio. The easiest way to achieve one is by making a rectangle that’s 1618 pixels wide by 1000 pixels high — hence, a golden ratio of 1.618 on one side of the rectangle to 1.0 on the other.

Got your rectangle? Cool. Now let’s get to the magic.

Now, if you were to add a square to one side of the rectangle, the remaining space would still be a Golden Rectangle — exactly a ratio of 1.618.

And no matter how often you cut squares out of it, you’ll still have a Golden Rectangle every time. You can do this forever, and you’ll still end up with a golden rectangle every time. Neat, huh?
This is probably the most used element across the board. It can be used as a grid to place objects, create a balanced layout, establish spacing and proportion… and so on.

Golden Spiral otherwise known as the Fibonacci Sequence

Golden Spiral (The Fibonacci Sequence)

You may have already heard of this in some movie or another like “The Da Vinci Code”.

The Fibonacci Sequence is a sequence of numbers where each number is the sum of the two numbers that came before it.

So, you’d start with 0 + 1 = 1. Then 1 + 1 = 2. Then 1 + 2 = 3.

And so on, until you have a string of numbers that looks like 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

If all the numbers are making your eyes glaze over, don’t worry.

The takeaway is that when these numbers are used to create squares with curves in them, you end up with the Golden Spiral.

Artists and designers use this spiral to create a sense of movement and flow in their work, and as a means of guiding the viewer’s eye through the composition. And interestingly enough, this spiral appears in nature all around us. From how leaves grow on a stem to shells or even a spiral galaxy… it’s seemingly everywhere.

Golden Circles

Golden Circles

Golden circles are the easiest of the bunch to explain, but they can be a bit tricky to use.

But to form Golden Circles, you have to draw circles within each of the squares of a Golden Rectangle. This will give you circles that are all perfectly proportioned with a ratio of 1.618:1 to the adjacent circle.

And that’s it! There’s a variety of things you can do with these, but we’ll get more into the application later.

How often is the Golden Ratio used in Art and Graphic Design?

With all these formulas, ratios, shapes, and rules you may be asking yourself — do artists and designers really use all of this? Isn’t this kind of unnecessary?

And, well, you couldn’t be faulted for thinking that.

Graphic design, art, and creative expression as a whole have never been about adhering to strict mathematical commandments, especially since much of art and expression is personal and subjective. Not to mention, you could follow all the rules of the golden ratio and still come up with something poor… so ultimately, no, it’s not inherently more important than any other ratio — golden or not!

So now you may be asking yourself, “Then is the Golden Ratio just a bunch of baloney?”

While it might seem kind of far-fetched, it’s true! Both have used the Golden Ratio in design in one way or another. The latest incarnation of Twitter’s iconic blue bird logo used circles based on the Golden Ratio, while Tool took a slightly different approach — they structured the song’s rhythms and time signatures using the Fibonacci sequence, which is closely tied to the Golden Ratio.

The short answer — is no!

Even though the grand majority of artists and designers won’t make conscious use of the Golden Ratio, that doesn’t discount the valuable themes it presents within itself. After all, it’s been around for thousands of years for a reason!

Useful ways to use the Golden Ratio

As with any other principle, rule, or ratio in art and design, the Golden Ratio is best used to inform your decisions rather than a strict set of rules that must always be followed.

There are a plethora of valuable principles present within the Golden Ratio, and they can be an excellent means of adding structure to any given project. For example, the intentional use of Layout, Positive and Negative Spacing, Hierarchy, Movement, Proportion, and Composition are indeed fundamental to a fantastic piece of art or design.

So while it may be underutilized nowadays, the Golden Ratio can still be used as a powerful tool for creating. But that’s enough of talking about the philosophy and theory behind it… let’s get down to it!

Layout

When it comes to art and graphic design, choosing the right canvas size and layout can make all the difference in creating a composition that is visually appealing and well-balanced. So much like Dali chose a canvas with a 1.618 ratio for his painting, you can do the same with any project you’re working on.

layouts are a great way to use the golden ratio in design

By adding a square on either side of your canvas, you can create a dynamic, two-column layout that can be used in a variety of design projects, from book layouts to web pages to photo collages. Using the Golden Ratio as a guide can help you to achieve an asymmetrical balance that emphasizes the hierarchy of the elements within your design. This means that the most important elements will naturally draw the viewer’s eye first, making for a more effective and engaging design.

Whether for a book, a page on the web, or creating a collage of photos, using the golden ratio will allow you a foundation to begin building your elements.

Spacing

Spacing is crucial in art and graphic design and can make or break a peice. Designs that are too cluttered are overwhelming and chaotic — and very easy to ignore (think cluttered magazine ads).

While it might seem kind of far-fetched, it’s true! Both have used the Golden Ratio in design in one way or another. The latest incarnation of Twitter’s iconic blue bird logo used circles based on the Golden Ratio, while Tool took a slightly different approach — they structured the song’s rhythms and time signatures using the Fibonacci sequence, which is closely tied to the Golden Ratio.

And a design that is too sparse can appear bland and uninteresting… so striking the right balance is key. However, figuring out where to place objects can be a challenge, especially for beginners.

The Golden Ratio can be an excellent starting point, as it provides a guideline for where objects should be placed for optimal balance and visual appeal. By adhering to the Golden Ratio, artists and designers can create grids and frames of reference without having to rely solely on their intuition.

While it might seem kind of far-fetched, it’s true! Both have used the Golden Ratio in design in one way or another. The latest incarnation of Twitter’s iconic blue bird logo used circles based on the Golden Ratio, while Tool took a slightly different approach — they structured the song’s rhythms and time signatures using the Fibonacci sequence, which is closely tied to the Golden Ratio.

Images

Photography and imagery are some of the most powerful tools in a graphic designer’s arsenal. As the saying goes, “A picture is worth a thousand words,” — so it’s essential to know how to frame your images correctly.

By using the Golden Ratio, you can first start by creating a grid that is divided into thirds both horizontally and vertically. This type of grid utilizes the Golden Ratio, where the widths and heights of the sections are either 1 or 0.618. Afterward, you can use the intersections to highlight areas of interest.

While it might seem kind of far-fetched, it’s true! Both have used the Golden Ratio in design in one way or another. The latest incarnation of Twitter’s iconic blue bird logo used circles based on the Golden Ratio, while Tool took a slightly different approach — they structured the song’s rhythms and time signatures using the Fibonacci sequence, which is closely tied to the Golden Ratio.

Of course, you could also just use the rule of thirds (which is much easier to apply). Instead, all squares are of equal height and width. It’s not exactly the same as using the Golden Ratio… but it’s close enough.

But wait, there’s more!

There are also a couple of different approaches you can take. One could be to consider the overall aspect ratio of the image itself. For example, you might choose to crop an image to have a 1:1.618 ratio, which adheres to the Golden Ratio.

Another way would be to use the Golden Spiral. This spiral follows the pattern of the Golden Ratio and can be used to draw the viewer’s eye to specific points in the image. By placing important elements of the image along the path of the spiral, you can create a sense of movement and flow that guides the viewer’s gaze in a natural and aesthetically pleasing way.

Golden Circles… remember me?

Remember when we mentioned the Twitter bird being created with the Golden Ratio? Well, more specifically, it was created by using Golden Circles.

While it might seem kind of far-fetched, it’s true! Both have used the Golden Ratio in design in one way or another. The latest incarnation of Twitter’s iconic blue bird logo used circles based on the Golden Ratio, while Tool took a slightly different approach — they structured the song’s rhythms and time signatures using the Fibonacci sequence, which is closely tied to the Golden Ratio.

While all of the circles aren’t perfectly precise, it’s easy to see the intention. Remember, as we said before — these rules don’t exist to be the end-all, be-all. There’s a time to follow rules, and a time to break them!

One great way to use Golden Circles is by overlapping two or more of them and then extrapolating new shapes that are created from within. Doing so will allow you to create geometric objects that will look clean and in perfect (or golden) proportion. They can also be used to create interesting patterns and textures, too.

And of course, you don’t have to limit yourself to using this technique to circles. You could really apply it in any shape — so get creative!

Closing Section

In addition to other design elements like contrast, color, and typography, the Golden Ratio has a rich history and can be an excellent tool for the right project.

Ultimately, the best designs are the ones that effectively communicate your message and resonate with your target audience.

If you’re struggling to create interesting graphic design for your business, don’t hesitate to reach out to Mighty Fine for help. Our team of experienced designers can help you create designs that are not only beautiful but also effective at achieving your business goals. No need to thank us — it’s our job, and our passion!

Author

John Hawley
John is the lead designer at Mighty Fine and has been crafting visual solutions for clients for over a decade. Hailing previously from Boston, John graduated from Northeastern University with a Bachelor of Fine Arts in Graphic Design. Outside of work, he enjoys drawing, writing music, and playing video games.

Related Articles:

Will AI Replace Graphic Designers?

Will AI Replace Graphic Designers?

With AI technology progressing at a breakneck pace, many wonder, will AI replace graphic designers? The technology for AI-based applications is truly advancing at an incredible pace. Without a shadow of a doubt, artificial intelligence is the next-level...

The Website Design Process: 6 Steps To Get It Done Right

The Website Design Process: 6 Steps To Get It Done Right

With the rise of new technologies and tools on the web, it’s easy to oversimplify the website design process. Fortunately, it doesn’t have to be overly complicated, either! We’ve said it before… and we’ll keep saying it ‘til we’re blue in the face! The value your...

Why Our Customers Think We’re Mighty Fine

Why Our Customers Think We’re Mighty Fine

We value our customers — and our customers value us! Do you remember the Budweiser commercial from the 2017 Super Bowl? Probably not, even though it was voted among the best commercials that year. You do probably remember another one from that year, where Kylie Jenner...

Pin It on Pinterest

Share This