Golden Ratio
The Golden Ratio — also known as Golden Mean, Golden Part, Fibonacci, Phi, or Divine Proportion — is the observation a geometrical proportion found everywhere over the natural world and universe. This ratio is proven to be aesthetically pleasing to the human eye. In the designs that we see in nature, this provides a sense of visual equilibrium, harmony and elegance. This same proportion, both consciously and subconsciously, is implemented by artists and designers alike to achieve balance, harmony and elegance in art , architecture, design and composition.
Throughout history, the Golden Ratio has been used to build visually pleasing designs. It became a formalized component of design theory in the Renaissance. Its repeated appearances in geometry (in forms such as pentagons and pentagrams) attracted the attention of ancient Greek mathematicians who, at least 2400 years ago, started studying it. In the Fibonacci series, the ratio is based on the relationship between consecutive numbers. Fibonacci was an Italian medieval mathematician, but to understand this sequence, you do not need to be a mathematician, as it is so simple.
Each number is simply the sum of the two numbers before it in the Fibonacci sequence. It starts with 1, 1 (i.e. 1 + the unseen 0 = 1), and the sequence’s first 10 members are 1, 1, 2, 3, 5, 8, 13, 21, 34, 55. It continues indefinitely. We can measure the ratio using the above formula (to represent the output, we use the Greek letter Phi). The ratio is approximately 1.618, but after the decimal point, like Pi, it has a long string of numbers. We don’t have to worry about going past 1.618 for our own purposes, though.
In nature, how is the ratio used? Think of a rectangle, length 1 with a short side. You easily multiply the length of the short side by the golden ratio approximation of 1,618 to determine the most aesthetically appealing rectangle. So, in this case, the long side will have a length of 1.618. If you have a handy pencil, paper, and ruler, try drawing this scale’s rectangle. Or, if you can jump to another screen in the drawing program, build one. What you’ll see before you is the perfect rectangle, not just any rectangle!
The Golden Ratio is currently leveraged by top brands. It is all used by famous brand logos like Twitter, Apple and Pepsi, and the same goes for the internet. By implementing the Golden Ratio, everything in the User Interface (UI) of your website can be made more balanced and aesthetically pleasing, from typography to the layout itself. So, let’s get started without further ado.
Responsive website design has become the standard because of mobile devices. Websites with fixed dimensions of height and width are antiquated and have given way to percentage-based fluid layouts. The best thing about using percentages is that it makes it very easy to integrate the Golden Ratio into your site. Percentage-based websites allow it to scale with the size of the browser, thus making it fluid. It’s all a matter of dividing it by 1.618. For instance, let’s say, your website has a main section and a side bar. You simply divide the total width of the site 100% by 1.618 to apply the Golden Ratio.
Ever wonder how big the headline should be when it comes to copying the body? Are you eyeballing it? Or are you going through an impeccable intestinal feeling that’s been honed over the years? As you’ve probably guessed by now, the Golden Ratio is a perfect way to build a hierarchy of forms. In a number of fixed and relative units, web type is measured. Since the Golden Ratio is all about percentages, fixed units such as pixels, relative units such as em, and percentage-based fonts may be added. We will work with the fixed pixel unit in this case, but note that the method for em and percentages is the same.
Over time, becoming mindful of the Golden Ratio and learning how to use it teaches the eye. You will begin to see subconscious changes in the design choices you make if you pay attention. You will join the ranks of individuals with persistence and time who tend to arrive at these proportions organically and subconsciously without much thought or effort-good designers.
Originally published at https://medium.com on October 28, 2020.
