BLOG
The secret of Golden Ratio and how to use it in your designs
BLOG
The secret of Golden Ratio and how to use it in your designs
Embedded Files
Book for a free demo session
The secret of Golden Ratio and how to use it in your designs
Date
19-Dec-2024
Written by
Halo Design Academy
Ever wondered why A series papers have a particular dimension? What's so special in those paper sizes? It has a simple yet important mathematical principle hidden in it, which when understood and applied in your designs right would help you create wonders.
What are A series papers?
A series papers are a set of papers that follow the International Paper Size (ISO 216) standard. There are 11 page sizes ranging from A0 to A10.
The Golden Ratio
Let us imagine there are two distances as "a" and "b". Now if we add both the distances we get a+b. The ratio between a and b is the same as the ratio between b and a+b. Look at the images below to have better understanding.
So, this 1:1.414 or 1:√2 is called as Golden ratio. Implementing the above Golden ratio only A series papers have been created.
What's so fascinating about this size is, if you cut this into two halves still the proportions between the width and the height will be the same. The following table will explain it.
These dimensions follow a similar series like fibonacci series. Fibonacci series is where the last two numbers add to create the next number like shown in the example below.
1 >> 2 >> 3 >> 5 >> 8 >> 13 >> 21 >> 34
1 >> 2 >> 3 >> 5 >> 8 >> 13 >> 21 >> 34
Similarly in A series, two A10 pages create 1 A9 page, 2 A9 pages create 1 A8 page and so on. When we put this relation into a diagrammatic pattern you will know what a beautiful structure it turns out to be. And this is called as golden spiral which is used in many design and related industries.
Implementation of Golden ratio in UI/UX design
In Layouts: Instead of having equally split sections, split your sections as per golden ratio to enhance user's viewing experience.
In the above product details screen the image and the description of the product occupy equal areas. This might look cool initially but the bitter truth this does not helps either the consumer or the product owner. The reason is, as a potential buyer the user does not knows on what to concentrate, whether the picture of the model or the description content below. Which of those two is going to influence the user's decision? Definitely it is the picture, so giving it more importance like the below image would help the e-commerce merchant sell more goods.
In this layout the ratio between the upper section and lower section matches the golden ratio of 1:1.414 where the upper section takes up the larger area. Now this allows the user to get a better perception of the product and will increase the chances of buying the product. Similarly in the description section, the left section and the right section are also split according to the golden ratio which enables the user to easily click on the size buttons as it is closer to the right hand thumb which most of the users use to interact. This is how golden ratio can be used in UI designs.
In Typography: When you apply golden ratio in choosing font sizes and line spacing and paragraph spacing it turns out to be a more readable and legible content.
The size of the title is 36 px and the size of the body content is 18 px, thus making the body:title ratio as 1:2 and it is not that impressive.
Body content size is 14.
14 x 1.414 = 19.796
19.796 x 1.414 = 27.991
27.991 x 1.414 = 39.58 ~ 40 px
This looks far more legible and implies visual hierarchy also. This is how we can implement golden ratio in typography
In Typography: Another example of implementing golden ratio in typography.
In the above image, font size is 14 and line spacing is 18, thus making it too congested and difficult to read
In the above image, font size is 14 and line spacing is 24, though it feels lot more better to read but still there is lot of unncessary space making the page too long.
In the above image font size is 14 and the line spacing is 20.
14 x 1.414 = 19.7988 ~ 20.
Now this is neither congested nor too spacious occupying unnecessary area. This is how we can implement golden ratio in typography.
Conclusion
By understanding what golden ratio is and how it works will help you create wonders in your design. The above examples are just a few how, i often use golden ratio in my designs, you can learn a lot by experimenting and implementing golden ratio in your designs. Definitely you can create impactful designs that create win-win-win situation for your company, client and the end users as well.
About the author
Sipi Sagar is a veteran in the field of graphic and UI/UX designer with over 16 years of experience. He began his career as a faculty member, and had the privilege to share knowledge with professors of foreign universties. Later switched to the IT industry and was leading major projects. In 2020 he founded Halo Design Academy to provide accessible and affordable design education with a passion for mentorship.
About the author
Sipi Sagar is a veteran in the field of graphic and UI/UX designer with over 16 years of experience. He began his career as a faculty member, and had the privilege to share knowledge with professors of foreign universties. Later switched to the IT industry and was leading major projects. In 2020 he founded Halo Design Academy to provide accessible and affordable design education with a passion for mentorship.
Using point to simplify and represent complex objects and concepts
Page updated
Google Sites
Report abuse