Good design has been up for debate for as long as we’ve been creating. There are endless forums, social media threads, and in-person conversations about what makes for great design, with everyone contributing their point of view.
That’s the beauty of design, right? Everyone can interpret it differently.
While there will never be a one-size-fits-all approach for design, there is a concrete, mathematical approach that can help us get one step closer to creating an amazing design experience every time: The Golden Ratio.
The Golden Ratio?
A golden ratio is a special number that approximately equals 1.618. The ratio itself comes from the Fibonacci Sequence (the sum of the two numbers before it. It goes: 0, 1,1, 2, 3, 5, 8, 13, 21, and so on, to infinity.), a naturally occurring sequence of numbers that can be found everywhere, from the number of leaves on the tree to the shape of a seashell.
How does this relate to design? You can find the Golden Ratio when you divide a line 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. This formula can help you when creating shapes, logos, layouts, and more.
You can also take this idea and create a golden rectangle. Take a square and multiple one sides by 1.618 to get a new shape: a rectangle with harmonious proportions.
If you lay the square over the rectangle, the relationship between the two shapes will give you the Golden Ratio.
If you keep applying the Golden Ratio formula to the new rectangle on the far right, you will end up with an image made up of increasingly smaller squares.
If you draw a spiral over each square, starting in one corner and ending in the opposite one, you’ll create the first curve of the Fibonacci sequence (also known as the Golden Spiral).
How to use Golden Ratio in Design?
- Typography and defining hierarchy
The Golden Ratio can help you figure out what size font you should use for headers and body copy on a website, landing page, blog post, or even print campaign.
Let’s say your body copy is 12px. If you multiply 12 by 1.618, you’ll get 19.416, meaning a header text size of 19px or 20px would follow the Golden Ratio and balance the 12px body font size.
If you want to figure out how big your body text size should be, you could do the opposite. If your header text is 25px, you can divide it by 1.618 to find the body text (15 or 16 px).
- Cropping and resizing images
When cropping images, it’s easy to identify white space to cut out. But, how do you make sure the image is still balanced after you resize it? You can use the Golden Spiral as a guide for the image’s composition.
For example, if you overlay the Golden Spiral on an image, you can make sure that the focal point is in the middle of the spiral.
- Layout
Leveraging the Golden Ratio can help you design a visually appealing UI that draws the user’s attention to what matters the most. For example, a page that highlights a wide block of content on the left with a narrower column on the right can follow the Golden Ratio’s proportions and help you decide where to put the most important content. - Logo Development
If you’re designing a new logo and feeling stuck, turn to the Golden Ratio to help you sketch out the proportions and shapes. Many popular logos follow the Golden Ratio, like Twitter, Apple, and Pepsi.
Tools to help you use the Golden Ratio
You don’t need to break out the pencil and paper to calculate the Golden Ratio — there are several apps that can do it for you.
Here are five tools to help you use the Golden Ratio in your designs:
- Golden Ratio Calculator: Calculate the shorter side, long side, and the combined length of the two sides to figure out the Golden Ratio.
- goldenRATIO: Created for designers and developers, this app gives you an easy way to design websites, interfaces, layouts, and more according to the Golden Ratio. It includes a built-in calculator with visual feedback and features to store screen position and settings, so you don’t have to rearrange the Golden Ratio for every task.
- Golden Ratio Typography Calculator: Discover the perfect typography for your website by entering your font size and width. You can optimize based on font size, line height, width, and characters per line.
- PhiMatrix: This Golden Ratio design and analysis software come with customizable grids and templates that you can overlay on any image. It can be used for design and composition, product design, logo development, and more.
- Golden Ratio Sketch resource: Download a free Sketch file of the Golden Spiral to help with image and layout composition.
Once you know what to look for, you’ll start noticing the Golden Ratio everywhere. (Don’t believe us? Look at your hands. Even your fingers follow the Golden Ratio.) The human eye is used to seeing this magical number and we subconsciously react positively to it.
As designers, we can use this number to our advantage. Even small tweaks to the way you crop an image or develop a layout can dramatically improve how your users interact with your design.