<p>Published on <a href="https://blog.prototypr.io/golden-ratio-what-it-is-and-why-should-you-use-it-in-design-7c3f43bcf98?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Pratik Hegde <img alt="" src="https://cdn-images-1.medium.com/max/855/1*NGNon6GsqrUSrzMsF9vrEw.jpeg"></p>
<p>What is all the fuss about the famous <em>golden ratio</em>? Why is it that whenever you lookup for Golden Ratio, all you find is an image that looks like one above. Why are structures or patterns in golden ratio perceived to be aesthetically pleasing? Is there something more to golden ratio than we know of? If you also share this intrigue, let us break it down and try to understand what golden ratio is and why should it be of an importance to us as designers?</p>
<h3>What is Golden Ratio?</h3>
<p>Mathematically speaking, two quantities are in the <strong>Golden Ratio</strong> if their ratio is the same as the ratio of their sum to the larger of the two quantities. Referring the image below, a/b is the golden ratio.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xz6c1EbEM92UDNSd4bFvvQ.jpeg"></p>
<h3>What is the value and how was it deduced?</h3>
<p>That’s correct! 1.618, mathematically irrational number is interestingly considered to be the <em>golden ratio</em>, <em>golden mean</em>, <em>divine proportion</em> and many other names that golden ratio is associated with. What is more interesting that the value is the discovery of the value.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*PB3rNh0p6qxcRpPIu2-vFQ.jpeg">Credits : <a href="https://static1.squarespace.com/static/526e93fde4b0825dbf634205/t/55376c19e4b04fa840f0d570/1429695527113/">Totem Learning</a></p>
<p>Centuries back, genius minds started observing patterns in the beautiful nature around themselves; From the leaf arrangement in plants, to the pattern of the florets of a flower, the bracts of a pinecone, or the scales of a pineapple; everything had the same pattern. And the arrangement goes <em>1, 2, 3, 5, 8,13, 21, 34</em> and so on. <em>Voila! The Fibonacci. </em>When you start calculating ratio of fibonacci number with its previous fibonacci number, we end up with something like 1.61803… an irrational number rounded up to 3 decimal places 1.618 which is the golden ratio we read about.</p>
<p>What was naturally pleasing to the eyes, this number was then used in creating proportions for architectures, paintings, sculptures, photography, design etc.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ZgCUla7OYZU6FxumjS1jFQ.png">Application of Golden Ratio for creating pleasant art</p>
<h3>Golden Ratio and Designers</h3>
<p>Golden Ratio finds huge application in print design like : posters, marketing materials, visiting cards etc. This discussion revolves more around the how can we use golden ratio effectively in our work as <em>user interface</em> designers. Lets find out.</p>
<h4>1. Golden Shapes for use</h4>
<p>The most used golden shapes in design are Golden Rectangles, Golden Circles, Golden Spiral and Golden Triangles. Many a times, these are used in combination to create mesmerising design compositions. If you are a complete beginner, I urge you to go through tutorials online to understand how to create the golden shapes.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9ZbbQPxLwnf7Ms7vwWAI8Q.jpeg">Golden Rectangles, Spirals, Circles, Triangles</p>
<h4>2. Setting Layout dimensions with Golden Ratio</h4>
<p>Layout in web or graphic design is used to arrange visual elements on a page. It involves organising the art composition to achieve specific communication objectives. Golden Ratio can be used here to define the widths of panels, sidebars or even height of the views. For example, layout of width 960px. Dividing this by 1.618 approximately gives us 594px (593.325..) which can very well be defined as the height of your view. Two separate sections can also be made of sized 594px and 366px(960–594) which can form two sections on a page. We can go further dividing the space in golden mean to achieve more grids.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*I0iscJTgaHsvEoYtU2sA1Q.png">Layout structuring using Golden Ratio</p>
<p>Defining the height of any view is very prominent in Graphic design as compared to Web design since content is the factor that decides the height of the page in web design.</p>
<h4>3. Defining spacing between content using Golden Ratio</h4>
<p>Many a times, we go by standard padding and margin to define the gutters and spacing between the content blocks irrespective of what the layout sizes are. Management of these positive spaces or negative spaces often make or break the final result. However, one can make use of golden rectangles to ensure that the inter-layout spaces are proportional and calculated.</p>
<blockquote><p>“Tip : Use larger squares like unit 8 and 13 to define layouts. Use smaller squares of unit 1, 2 or 3 to define gutters and content spacing”</p></blockquote>
<h4>4. Using Golden Ratio in Typography</h4>
<p>If you have a hard time figuring out the sizes of different text hierarchies in your design composition, you can use golden ratio as a guide to determine the best size for each of them. Let us say body text is 10px. Multiplying it by 1.618 you have 16.18. The heading text size can be 16px. If you have a title of size 24px and are wondering what is the best size for body text, that’s correct! Divide it by 1.618, which comes 14.83 which you can round up to 15px or 14px. Here you go! Using golden ratio simplifies the decision in determining the sizes for text hierarchy.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/818/1*VF3Sk7U9MniETtQ1Z78xlA.jpeg">Using Golden Ratio in Typography</p>
<h4>5. Icon/Logo design using Golden Ratio</h4>
<p>Golden Shapes like triangles, squares, circles and spirals are widely used while designing an icon or logo. Proper use of the golden shapes can harness a proper balance and can turn a good design to a great one. We will not get into a lot of details of this section since this entirely is a larger section in its own. However, below are some examples of using golden ratio in icons and logos.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/691/1*gOzXlWhe4TC9wtvPh3cFQA.jpeg">Images taken from Google for illustration purposes</p>
<h3>Conclusion</h3>
<p>Mathematically golden ratio is an irrational number, which means we can never achieve it perfectly in design; a debate going on forever.</p>
<p>Takeaway for designers is, use of golden ratio is not something that will make or break your designs. Not every design composition can be derived using golden ratio. If needed, it must be used as a guide to create proportions in our design. Use of golden ratio in design needs a lot of understanding and practice to perfect it. Golden Ratio is thus one more useful tool that should be there in designer’s toolbox.</p>
<blockquote><p>“Use of golden ratio in artistic composition brings in a natural balance and visual harmony”</p></blockquote>
<p>However, since these are the patterns that exist in very nature around us, use of golden ratio in artistic composition brings in a natural balance and visual harmony, thereby giving an undeniable aesthetic appeal.</p>
<p>There is a lot that to Golden ratio and cannot be put together in 5–6 minute read. Do let me know what you think about the golden ratio and how you use it while designing for digital and print. Let us together make the Golden Ratio <em>easy to understand and effective to use</em>.</p>
<p>Thank you for reading. Claps to appreciate!</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=7c3f43bcf98" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/golden-ratio-what-it-is-and-why-should-you-use-it-in-design-7c3f43bcf98">Golden Ratio : What It Is And Why Should You Use It In Design</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Golden Ratio : What It Is And Why Should You Use It In Design

Top Stories