tigvisitor
Member
The Golden Ratio is something every designer should know about. We'll explain what it is and how you can use it.
There's a common mathematical ratio found in nature that can be used to create pleasing, natural looking compositions in your design work. We call it the Golden Ratio, although it's also known as the Golden Mean, The Golden Section, or the Greek letter Phi.
In this article, we'll explain what it is, how you can use it, and point to some great resources for further inspiration and study...
01. What is the Golden Ratio?
Based on the Fibonacci Sequence (which you may remember from either your school mathematics lessons or Dan Brown's novel The Da Vinci Code), the Golden Ratio describes the relationship between two proportions.
Fibonacci numbers, like many elements found in nature, follow a 1:1.61 ratio - this is what we refer to as the Golden Ratio, and as it forms such a common sight in nature, it feels pleasing to the eye when we use this same ratio in our design work.
The Golden Ratio is the relationship between two numbers on the Fibonacci Sequence...
...and plotting the relationships in scale provides us with a spiral that can be seen in nature all around usIt's believed that the Golden Ratio has been in use for at least 4,000 years in human art and design, but it may be even longer than that - some people argue that the Ancient Egyptians used the principle to build the pyramids. In more contemporary times, the Golden Ratio can be observed in music, art, and design all around you.
Examples
Use of the Golden Ratio is well documented in art and design throughout history, and can be seen in everything from architecture to the grand masters. By applying a similar working methodology you can bring the same design sensibilities to your own work. Here are just a couple of examples to inspire you:
The Parthenon
Ancient Greek architecture used the Golden Ratio to determine pleasing dimensional relationships between the width of a building and its height, the size of the portico and even the position of the columns supporting the structure. The final result is a building that feels entirely in proportion. The neo-classical architecure movement reused these principles too.
The Last Supper
Leonardo da Vinci, like many other artists throughout the ages, made extensive use of the Golden Ratio to create pleasing compositions. In the last supper, the figures are arranged in the lower two thirds (the larger of the two parts of the Golden Ratio), and the position of Jesus is perfectly plotted by arranging golden rectangles across the canvas.
Nature
[video=youtube;kkGeOWYOFoA]http://www.youtube.com/watch?feature=player_embedded&v=kkGeOWYOFoA[/video]
There are also numerous examples of the Golden Ratio in nature - you can observe the ratio all around you. Flowers, sea-shells, pineapples, and even honeycombs all exhibit the same principle ratio in their make-up. So using the Golden Ratio in your design work is both appropriate and foreshadowed in our everyday environment.
03. How to construct a Golden Ratio rectangle
Creating a Golden Rectangle is pretty straightforward, and starts with a basic square. Follow the steps below to create your own Golden Ratio:
Step 01
Draw a square. This will form the length of the 'short side' of the rectangle.
Step 02
Divide your square in half with a vertical line, leaving you with two rectangles.
Step 03
In one rectangle, draw a line from one corner to the opposite corner.
Step 04
Rotate this line so that it appears horizontally adjacent to the first rectangle.
Step 05
Create a rectangle using the new horizontal line and original rectangle as guides.
05. How to use the Golden Ratio in your design work
Using the Golden Ratio is simpler than you might think! There are a couple of quick tricks you can use to estimate it into your layouts, or you can plan a little more and fully embrace the concept!
The quick way
If you’ve ever come across the 'Rule of Thirds' you’ll be familiar with the idea that by dividing an area into equal thirds both vertically and horizontally, the intersection of the lines will provide a natural focal point for the shape.
Photographers are taught to position their key subject on one of these intersecting lines to achieve a pleasing composition, and the same principle can be used in your page layouts, web mockups, and poster designs.
Although the rule of thirds can be applied to any shape, if you apply it to a rectangle with proportions approximately 1:1.6, you get very close to a Golden Rectangle, which makes the composition all the more pleasing to the eye.
Full implementation
If you want to fully implement the Golden Ratio into your design, you can do so easily by ensuring that the relationship between your content area and sidebar (in a website design, for example) adheres to the 1:1.61 ratio.
It’s okay to round this up or down by a point or two to make the numbers worth with pixels or points - so if you have a content area of 640px, a sidebar of 400px will match the Golden Ratio well enough to work, even though it’s actually a ratio of 1:1.6.
Using the Golden Ratio in a web-page layout provides a natural, eye-pleasing resultOf course, you can also sub-divide the content and sidebar areas up using the same ratio, and the relationship between a webpage’s header, content area, footer and navigation can also be designed using the same basic Golden Ratio.
06. Golden Ratio tools
goldenRATIO
GoldenRATIO's favourites feature stores your settings for repetitive tasksGoldenRATIO is an app providing an easy way to design websites, interfaces and layouts according to the golden ratio. Available in the Mac App Store for $2.99, the app features a built-in calculator with visual feedback, a 'favourites' feature that stores you screen position and settings for repetitive tasks, and a 'Click-thru' mode which means you can use it as an overlay in Photoshop and still work on the canvas.
Golden Ratio Typography Calculator
This calculator from Pearsonified helps you to create the perfect typography for your website in line with Golden Ratio principles. Just enter a font size, content width, or both into the field on the website, and click the Set my type! button. If you’d like to optimize for characters per line, you can enter an optional CPL value.
Phicalculator
Phicalculator does one job, and it does it very wellThis simple but useful free app is available for both Mac and PC. Give it any number and it will calculate the corresponding number according to the golden ratio.
source : Guide to the Golden Ratio | Graphic design | Creative Bloq
There's a common mathematical ratio found in nature that can be used to create pleasing, natural looking compositions in your design work. We call it the Golden Ratio, although it's also known as the Golden Mean, The Golden Section, or the Greek letter Phi.
In this article, we'll explain what it is, how you can use it, and point to some great resources for further inspiration and study...
01. What is the Golden Ratio?
Based on the Fibonacci Sequence (which you may remember from either your school mathematics lessons or Dan Brown's novel The Da Vinci Code), the Golden Ratio describes the relationship between two proportions.
Fibonacci numbers, like many elements found in nature, follow a 1:1.61 ratio - this is what we refer to as the Golden Ratio, and as it forms such a common sight in nature, it feels pleasing to the eye when we use this same ratio in our design work.
The Golden Ratio is the relationship between two numbers on the Fibonacci Sequence...
...and plotting the relationships in scale provides us with a spiral that can be seen in nature all around usIt's believed that the Golden Ratio has been in use for at least 4,000 years in human art and design, but it may be even longer than that - some people argue that the Ancient Egyptians used the principle to build the pyramids. In more contemporary times, the Golden Ratio can be observed in music, art, and design all around you.
Examples
Use of the Golden Ratio is well documented in art and design throughout history, and can be seen in everything from architecture to the grand masters. By applying a similar working methodology you can bring the same design sensibilities to your own work. Here are just a couple of examples to inspire you:
The Parthenon
The Last Supper
Leonardo da Vinci, like many other artists throughout the ages, made extensive use of the Golden Ratio to create pleasing compositions. In the last supper, the figures are arranged in the lower two thirds (the larger of the two parts of the Golden Ratio), and the position of Jesus is perfectly plotted by arranging golden rectangles across the canvas.
Nature
[video=youtube;kkGeOWYOFoA]http://www.youtube.com/watch?feature=player_embedded&v=kkGeOWYOFoA[/video]
There are also numerous examples of the Golden Ratio in nature - you can observe the ratio all around you. Flowers, sea-shells, pineapples, and even honeycombs all exhibit the same principle ratio in their make-up. So using the Golden Ratio in your design work is both appropriate and foreshadowed in our everyday environment.
03. How to construct a Golden Ratio rectangle
Creating a Golden Rectangle is pretty straightforward, and starts with a basic square. Follow the steps below to create your own Golden Ratio:
Step 01
Draw a square. This will form the length of the 'short side' of the rectangle.
Step 02
Divide your square in half with a vertical line, leaving you with two rectangles.
Step 03
In one rectangle, draw a line from one corner to the opposite corner.
Step 04
Rotate this line so that it appears horizontally adjacent to the first rectangle.
Step 05
Create a rectangle using the new horizontal line and original rectangle as guides.
05. How to use the Golden Ratio in your design work
Using the Golden Ratio is simpler than you might think! There are a couple of quick tricks you can use to estimate it into your layouts, or you can plan a little more and fully embrace the concept!
The quick way
If you’ve ever come across the 'Rule of Thirds' you’ll be familiar with the idea that by dividing an area into equal thirds both vertically and horizontally, the intersection of the lines will provide a natural focal point for the shape.
Photographers are taught to position their key subject on one of these intersecting lines to achieve a pleasing composition, and the same principle can be used in your page layouts, web mockups, and poster designs.
Although the rule of thirds can be applied to any shape, if you apply it to a rectangle with proportions approximately 1:1.6, you get very close to a Golden Rectangle, which makes the composition all the more pleasing to the eye.
Full implementation
If you want to fully implement the Golden Ratio into your design, you can do so easily by ensuring that the relationship between your content area and sidebar (in a website design, for example) adheres to the 1:1.61 ratio.
It’s okay to round this up or down by a point or two to make the numbers worth with pixels or points - so if you have a content area of 640px, a sidebar of 400px will match the Golden Ratio well enough to work, even though it’s actually a ratio of 1:1.6.
Using the Golden Ratio in a web-page layout provides a natural, eye-pleasing resultOf course, you can also sub-divide the content and sidebar areas up using the same ratio, and the relationship between a webpage’s header, content area, footer and navigation can also be designed using the same basic Golden Ratio.
06. Golden Ratio tools
goldenRATIO
Golden Ratio Typography Calculator
This calculator from Pearsonified helps you to create the perfect typography for your website in line with Golden Ratio principles. Just enter a font size, content width, or both into the field on the website, and click the Set my type! button. If you’d like to optimize for characters per line, you can enter an optional CPL value.
Phicalculator
source : Guide to the Golden Ratio | Graphic design | Creative Bloq
Last edited:
