• Home
  • Design
  • Freebies
  • Toolbox
  • Tech
  • Tutorials
  • Inspiration
No Result
View All Result
Subscribe
The Designest
  • Home
  • Design
  • Freebies
  • Toolbox
  • Tech
  • Tutorials
  • Inspiration
No Result
View All Result
The Designest
No Result
View All Result
Home Design

The Golden Ratio in Design: Notions and Essentials

The Golden ratio is a common thing for artists, but do designers take it seriously (and can use it too)?

The Designest Staff by The Designest Staff
January 14, 2020
in Design
2

The Golden Ratio in Design

Share on FacebookShare on Twitter

Visual harmony is not something chimerical as it may probably sound. In fact, it is defined by the Golden ratio, the law of perfect proportion that comes from maths and nature and defines balance in architecture, painting, and all fields of design.

The closer an object is to the Golden ratio, the better the human brain perceives it. So since it was discovered many creators used it their works: Da Vinci in his Mona Lisa and The Last Supper, Vermeer’s Girl with a Pearl Earring or Hokusai’s Great Wave off Kanagawa. Feels far from you are actually doing? In fact, if you’re searching for the balance and harmony to your interfaces, logotypes or mockup scenes, the Golden ratio is a perfect tool to arm yourself with.

What is the Golden Ratio?

The Golden ratio, also known as Φ (Phi) in Greek, is a mathematical constant. It can be expressed by the equation:

Φ=a/b=a+b/a=1,618033987, where a is greater than b

This can also be explained by the Fibonacci sequence, another divine proportion. The Fibonacci sequence starts with 1 (some say 0) and adds the previous number to it to get the next one:

1, 1, 2, 3, 5, 8, 13, 21 …

The golden rectangle
The golden rectangle

If you try to find the quotient from the division of the two subsequent Fibonacci numbers (i.e., 8/5 or 5/3), the result is very close to the Golden ratio of 1.6 or Φ.

With the help of a Golden rectangle, a Golden spiral is also created. If you have a rectangle of squares 1, 1, 2, 3, 5 and 8 respectively, as shown in the picture below, you can build the Golden rectangle.

The golden spiral
The golden spiral

Using the side of the square as a radius, you create an arc that touches the points of the square diagonally. Repeat this procedure with each square, and you will eventually get the Golden spiral.

Examples of the Golden rectangle and Golden spiral can be detected everywhere: so there is a Golden ratio in nature, human body and its parts, and almost all works of art.

The Golden Ratio in Design

The Golden ratio is another tool to help you deliver the right emotional and visual tone to the user. This theory exists whether you apply it intentionally or not — but what really matters is that you should understand and acknowledge it in an effort to create the most usable design possible.

So, there are four basic ways a designer can use the Golden ratio and affine there designs with it:

Typography

Golden Ratio Typography Calculator
Golden Ratio Typography Calculator

With the Golden ratio you can see what font size to use for headers and body copy on a website, landing page, or blog post.

Let’s say your body copy is 14 px. If you multiply 14 by 1.618, you’ll get 22.652, meaning a header text size of 22 px would follow the Golden ratio and balance the 14 px body font size.

Golden Ratio Typography Calculator

Cropping and Resizing

Cropping and resizing
Cropping and resizing

To make sure the image is still balanced after you resize it, you can use the Golden spiral to keep the composition of the image — simply overlay the Golden spiral on an image to see the focal point is in the middle of it.

Layouts

Golden Ratio Canon Grid
Golden Ratio Canon Grid

With the Golden ratio, it’s easier to comprehend and design appealing interfaces. So, if there is a page that highlights a wide block of content on one side with a narrower column on the other, the Golden ratio’s proportions will help you decide where to put the most important content.

Logo Design

With the Golden ratio, it’s easier to comprehend and design appealing interfaces. So, if there is a page that highlights a wide block of content on one side with a narrower column on the other, the Golden ratio’s proportions will help you decide where to put the most important content.

Tags: EssentialsPhotographyTrendsUI/UXWeb design
Previous Post

Star Wars Fan Art Collection

Next Post

GoDaddy logo is remastered in company’s fresh branding design

The Designest Staff

The Designest Staff

Related Posts

Best Drawing Programs & Apps in 2024 For Your Creativity

by The Designest Staff
February 7, 2024
9

In 2024, art software scene is as diverse as ever. Read our guide to the top free and paid drawing...

Top Graphic Design Projects That Can Enhance Your College Portfolio

by The Designest Staff
January 26, 2024
0

What projects should you include to ensure your portfolio stands out? Let's dive in.

The Key Role of Digital Video Editing for Marketing

by The Designest Staff
December 26, 2023
0

Learn how to enhance videos and why video editing is important for marketing. Follow these best practices to improve your...

Pantone Color Of The Year 2024: Peach Fuzz

by Alina Yakovleva
December 7, 2023
0

The new color celebrates serenity, providing a sanctuary where we can simply exist, experience, mend, and thrive.

Bad Graphic Design Examples: Good vs Bad Graphic Design

by Evgenia Papicheva
December 5, 2023
4

Design is a powerful tool, but like any tool, it can lead to unforeseen accidents when misused. Check our guide...

Font Trends 2024: Creativity, Elegance & Usability

by Daria Lemiakina
November 27, 2023
0

Your guide to trending fonts that'll foolproof your designs in 2024. A blend of functionality and creativity is what we're...

Next Post

GoDaddy logo is remastered in company’s fresh branding design

Please login to join discussion

Popular Posts

  • Free CD Mockup Set For The Iconic Retro Design

  • Freebie: Aluminium Can Mockup

  • Quentin Tarantino Fonts: Exploring the Mastermind

  • 40+ Best Metal Fonts to Rock Your Designs

  • Bad Graphic Design Examples: Good vs Bad Graphic Design

Envato Elements
with Envato Elements membership

Categories

  • Design (80)
  • Freebies (88)
  • Inspiration (40)
  • Other (22)
  • Tech (26)
  • Toolbox (161)
  • Tutorials (57)
Youtube Facebook Instagram Dribbble Pinterest Twitter RSS

Subscribe

The Designest

Weekly Email Updates

We got tons of fascinating articles, videos and freebies for you every week!

SUBSCRIBE

Design Blog

  • Design
  • Freebies
  • Inspiration
  • Other
  • Tech
  • Toolbox
  • Tutorials

About Us

Welcome to The Designest — a professional design blog aimed to deliver fresh news & trends of the industry as well as the most essential courses & tutorials you must have been searching for.

Company

  • Advertise with Us
  • Contact Us
  • Cookie Policy
  • Privacy Policy
  • Terms and Conditions
  • Affiliate Disclosure
Advertise Options

© 2023 The Designest — Professional design blog aimed to deliver fresh news & trends of the industry

No Result
View All Result
  • Home
  • Design
  • Freebies
  • Toolbox
  • Tech
  • Tutorials
  • Inspiration

© 2023 The Designest — Professional design blog aimed to deliver fresh news & trends of the industry

Subscribe to Regular Updates
We got tons of fascinating articles, videos and
freebies for you every week.
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.