Golden Ratio: A Swiss-Army-Knife for carving Beauty & Attraction into your own Website
What do you think beauty is? A beautiful flower? A beautiful building? Is it subjective from person to person? Whom would you perceive as a beautiful girl? Is beauty about being of a certain colour? Can it be measured? Is there a secret formula for carving beauty in any design?
Most of the above questions didn’t carry answers until recent times, in fact we’ve defined a distinct area from Science termed “Aesthetics”, to distinguish what is subjective and that can’t be measured based on a universal standard scale. The never-ending curious research with modern Mathematics has been able to unlock the secrets behind how our eyes and brain perceive beauty in a quantitatively re-presentable manner.
This article is an attempt to introduce the “golden ratio” and its amazing involvement in Nature for defining “beauty” in the human mind. Further, the focus of the final section is to provide elaborated tips on how to introduce beauty into web design using the concepts based on the golden ratio.
Golden Ratio
Suppose we divide any single line into 2 non-equal parts, and the ratio of lengths between the longer and shorter part is x:1, the golden ratio (denoted by greek letter φ)is defined as the value of x in which the longer part length divided by shorter part length (a/b in Figure 1) is also equal to the total line length divided by longer part length ([a+b]/a in Figure 1).
The value of the golden ratio (φ) is a constant which is approximately equal to 1.618.
Forming Simple Shapes with Golden Ratio
Now that we know what the golden ratio is we can form various shapes out of it. Of course the simplest shape we could form is called a “golden rectangle”; a rectangle with width:length ratio being 1:1.618.
Imagine a door or window in your house… Is the length of your door/window is the same as its width? Is the length twice its width? Or is the length roughly 1.618 times the width? Which configuration do you find most in doors or windows? Which configuration appears more appealing to the average eye? I think you guessed it already. It is when the length of the door or window is roughly 1.618 times its width.
In fact, if we observe several images of classical architectures it becomes amazingly evident the usage of 1:1.618 ratio based rectangles, consciously or unconsciously. You may do a self exercise to find out how many significant edges in the buildings coincide with 1:1.618 rectangles that could be found in Figures 4 and 5.
the distance from the pupils to the bottom of the chin
Does the golden ratio present itself in a human face? What do you think of Figure 6? The golden ratio is the key formula behind carving beauty into everything in the universe.
We could construct triangles seen in Figure 7, based on the golden ratio, in which 2 to 1 sides of the triangle having a ratio φ:1. The triangle on the left (Figure 7) is called the “golden acute triangle” (since all 3 angles are less than 90 degrees). The triangle on the right (Figure 7) is called the “golden obtuse triangle” (since one of the angles is greater than 90 degrees). These triangles can be used as foundational building blocks to form more complex shapes originating from the golden ratio (φ).
Forming Complex Shapes with Golden Ratio
A regular pentagon (Figure 8), also called the “golden pentagon” is formed by combining 2 golden obtuse triangles and 1 golden acute triangle.
Figure 9 illustrates, how the formation of a golden pentagon (based on golden triangles in Figure 7), is amazingly related to φ. Although the pentagon appears as a different shape to us as a whole; a detailed analysis as in Figure 9 depicts the propagation of the golden ratio(φ) property during the formation of the overall shape.
The 5-sided star (illustrated blue in Figure 10), also called the “golden star pentagram”; is built by combining 3 golden obtuse triangles together on the base of a golden pentagon.
The regular decagon (also called the “golden decagon”) is a polygon with 10 equal sides formed when 2 golden pentagrams rotated 180 Degrees apart coincide with each other (Figure 11).
For a golden decagon, the ratio between the distance to a vertex from the center versus the length of a side is φ (1.618).
Figure 13 illustrates an animation of a Nautilus shell. The proportion between the blue and white areas observed when traversing the spiral is aligned with 1:1.618 (1:φ), all the time (which is the definition for the “golden spiral”).
So that we know what is a “golden spiral”, the next question would be how to construct a golden spiral geometrically.
One of the approaches to construct a “golden spiral” is to start from a golden acute triangle and recursively subdivide into smaller golden acute triangles (Figure 14).
A second approach to generate a golden spiral is using a set of shapes formed by “Fibonacci numbers” (Figure 15).
For the laymen, “Fibonacci numbers” is a self-generating series in which; the first two numbers are 1, 1 and each number after that is the sum of the previous two numbers. As you can see in Figure 15, 1+1=2, 2+1=3, 3+2=5, 5+3=8, 8+5=13, 13+8 = 21 and so on…
But why is the Fibonacci series connected with generating a golden spiral? In fact, nothing related to beauty escapes the golden ratio. As in Figure 16; when you divide any number in the Fibonacci series with the previous number (except during the first few cases), the answer coincides with the value of the golden ratio. (e.g. 34/21, 21/13, 13/8 and so on…)
Defining a Golden Ratio based Layout for your WebSite
Figure 17, provides several ideas in which you could initiate a cool web layout; by starting from a “golden rectangle” and evolving it to an artistic layout as a constructed “golden spiral” with sub-division based on Fibonacci proportional squares.
A useful practical application is arranging widgets in a documentary or news website with different sizes based on the importance and priority of content in each item (Figure 18).
You could also use the “golden spiral” based sub-division within a web layout when designing a product website (Figure 19) with comments; to define areas dedicated for different roles (such as product information, tweet display, stats board etc…)
Figure 20, illustrates how the Facebook landing page adheres “golden spiral”.
Using “golden ratio” based Shapes to embed Web Content
Figure 21, illustrates how you could use multiple golden pentagrams as web content. This kind of a design could be used for describing steps in a customer supply chain, values of a company, goals of a project…
Multiple golden pentagons could be used to provide an attractive user experience for a 5-way metric dashboard (Figure 22).
A 10-step based business process workflow could be attractively visualised by combining golden pentagons with partial golden decagon shapes (Figure 23).
Golden Spiral with fibonacci proportioned squares, could be used to position objects in an animation that is continuously zooming in or zooming out.
I know that you’re curious to know the reason behind how the golden spiral construction fits perfectly in a zoom in and out animation.
In fact mathematics can explain anything.
Mathematically, it could be proved that the value of the “golden ratio” (1.638…) is an infinitely continuous fraction (Figure 25). Hence the zooming based animation of the golden spiral is a 2-dimensional geometric interpretation of this continuous fraction.
Golden Ratio and Logos
The golden pentagram (i.e. 5 sided star) is a very popular shape used to represent different things; including famous brands, sports teams worldwide (Figure 26).
Figure 27, illustrates the relationship between the “golden ratio” and several well-known company logos.
Figure 28, shows some ideas in terms of modelling and interpreting any complex shape in nature using the Fibonacci radii based circles (see Figure 15 too).
In fact you can model or interpret any complex beautiful shape in nature with a little extra effort of research, including the beauty of the human face.
Putting It Altogether
Any man-built entity (including your own business website), could be built in a better convincing manner; by applying lessons learnt from Nature and how they revolve with Mathematics and Engineering.
Interested in making your own business website, more accessible to customers with a better User Experience? Contact Us.
