Creating a stunning work of art or a visually stimulating web site is not a cakewalk exactly. While creativity plays a big role in the success of any design, there is some amount of mathematics and science involved too.

When people see the artwork of iconic artists and maestros like Da Vinci or Salvador Dali, they think of creative genius. The same thing is felt when you see sculptures like the ancient Roman Pantheon. However, all these artworks have a common thing-which is known as the Golden ratio. The ace designers and website creators still rely on this time tested concept to create stunning artwork and websites that make your eyes enticed.

Golden ratio through the passage of history

The roots of the Golden ratio can be traced back to the glorious days of Greek civilization. It is also said the ancient Egyptians made use of it to create stunning pyramids and other tombs 4000 years back. The ancient Greeks had amazing excellence in art, music, and science.

The Greeks were possibly the first to find out there is a beautiful asymmetry in natural things like trees, flowers, animals, etc. They used the Greek letter Phi to express this phenomenon. Over the centuries, artists and architects have resorted to using an understanding of the proportions and core concepts of the golden ratio to make aesthetically pleasing architecture as well as the artwork.

Cut to the present times, the golden ratio is being used to decide the visual layout and format of things like logo, credit card, furniture, books, even something as mundane as the design of plates in an eatery. Even Facebook is looking to develop AR glass that can read human minds, when it comes to design it is immensely helpful with golden ratio.

In other words, you may not be aware, but the Golden ratio exists everywhere around you! Sometimes, you may not be too sure if why you choose a T-shirt with a specific design over the others at a store. It has a design that somehow appeals more to your eyes and mind and the core reason is the golden ratio.

Nuances of the Golden Ratio design professionals should know

The ratio is derived from the famous Fibonacci sequence which you may remember seeing in the critically acclaimed flick The Da Vinci Code. It is a naturally occurring number sequence that is found almost anywhere. The sequence is there in the shape of seashells and on the number leaves present on a tree – for example.

The Fibonacci sequence is basically the sum of two numbers preceding it. It is like: 0, 1,1, 2, 3, 5, 8, 13, 21, etc till infinity. From it, the Greeks created the Golden Ratio. It denotes the perfectly symmetrical relationship existing between two proportions.It is equal to 1:1.618 approx. This isoften shown using a Golden Rectangle: a big rectangle comprising of a square and a rectangle smaller in size. The square has sides equaling the rectangle’s shortest length. If you discard the square from containing rectangle, another smaller Golden Rectangle will be left. This goes on infinitely just like Fibonacci numbers- that work in opposite!

Some notable examples of Golden ratio in human life

The Greeks were the masters of the Golden Ratio. If you observe the ruins of the Greek edifices and temples, you can find a pleasing dimensional relationship between the building’s height and width. This is applicable to the size of columns, the portico and everything in it. This concept was used extensively in the neo-classical architecture movement too.

• The Last supper– The popular painting of Leonardo da Vinci, contains the stamp of the golden ratio –much like his other celebrated sculpture and paintings. In it, you can see the figures placed in the lower two thirds. The position of Jesus is also in sync.
• Natural objects and life-forms– Even in nature, you can find many instances of this concept. You may, for example, check out stuff like pineapples, honeycombs, different types of flowers, seashells, etc.

Why is the Golden ratio relevant to web and graphic design?

It is not too hard to understand why web and graphic designers and artists resort to the Golden ratio in their work. The target viewers or site visitors pay attention to design or patron that appears enticing and soothing to the eyes. The old-age saying of the first impression, being the last has a major role here. Unless the homepage of a website is appealing to the eyes, the visitors will leave it in an instant. Without a visual sense of symmetry and proportion, the web page or artwork does not make the viewers feel easy and comfortable.

Once the layout and design style of a website seems proportionate and aesthetically pleasing to the viewers, they feel interested to check out the content and proceed to the other sections of the site. Golden Ratio is also used in web design to balance text, rich content and make a hierarchy. The same logic is applicable for graphic artwork like the logo of a company.

The usage of the Golden ratio has a positive influence on the overall design and its elements individually. When the design elements are proportionate- it seems visually satisfying. From an icon to other visual elements-everything falls into place and seems proportionate when the golden ratio is deployed.

In web design, placing the text content at the right place and choosing the right type and size is also important. This is where the Golden ration can be utilized as well. You may select a specific text size for the header and then divide using 1.618. The result will be right for the subheaders. If the body text has a size of 10 px, you can multiply it with 1.618. The heading text size, therefore, can be set at 16 px. In a web page, where different types of content have to be used-this can be helpful.

In any web page, the amount of white or blank space also plays a role. Excessive spacing is not visually appealing and lack of white spacing on a page may make it look cluttered. By using the golden ratio, the designers are able to figure out the apt amount of white spacing in web pages.

Even in Logo design, usage of the golden ratio is relevant. The logo is what represents a company to the target users at first before they visit websites or brand shops etc. So, the logo has to be aesthetically pleasing and with a sense of balance. This is where the golden ratio steps in. The logos of many MNCs and corporate giants like Pepsi, Twitter and Apple were created by using the theory.

How to implement the golden ration in graphics and web design?

As a matter of fact, deploying the concept of the golden ratio in design and artwork is simpler than what you think. There are 2 ways of deploying it in web or graphic design:

• The quick solution: If you are involved in a web or graphic design project with a tight deadline and there is no time for too much experimentation in design, you can still deploy the golden ratio. The concept is dividing an area into 3 equal sections – horizontally and vertically. The intersection of those lines should serve as a natural focal point for your shapes and figures.

  The photographers are usually taught to place the main subject in one of such intersecting lines to get pleasing compositions. The same theory can be used in page layouts and poster designs.

• Full implementation: To ensure you adhere to the age-old concept of the Golden ratio without using shortcuts- that is not tedious either. For a web page, you should ensure the content area and sidebar proportion adheres to that 1:1.6.1 ratio. So, on an average, if the content area is 640px, you should ensure the sidebar is about 400 px. The same logic is applicable to the header, footer and navigation areas.

There’s an app for Golden Ratio, yes actually!

If you find understanding and deploying the concept in your design work tedious or fear you may deviate from the norms- relax. Like everything else in life- you get an app for Golden Ratio. In fact, you get several apps to deploy the concept in your design.

Listed below are some such apps that you can check out:

• Golden Ratio– GoldenRATIO is one app that lets you deploy the age-old concept to your design minus fuss and wasting time. It is available for $2.99 in the Mac App Store. The app has a useful favorites feature and a functional ‘click-thru’ mode. It can be used in Photoshop as well as an overlay. You get an embedded calculator with visual feedback.
• Golden Ratio Typography Calculator– This lets you make perfect typography for any website in sync with the theory of Golden Ratio.
• Phicalculator– Phicalculator is a useful and free app, which can be used both on PC and Mac. If you input a number in it, you will get the corresponding number as per the Golden ratio.
• Atrise Golden Section– This is a functional grid software with an on-screen ruler. By using this, you will be saved from sending time in calculations. You can see and alter the harmonious sizes and forms. It is steeply-priced, but the free trial versions can be used for 30 days.
• PhiMatrix– This is another handy and widely used tool for Golden Ratio based design and analysis. You get customizable grids as well as templates that can be used as overlays in the design projects.

There are third-party camera apps that let you take amazing photos while adhering to the Golden ratio and Fibonacci sequence. Some of these apps are free and the paid ones are also there. Available both for iOS and Android platforms, these apps are handy for the designers who want to shoot images for use in web or graphic design projects that are shot as per the norm. This will make working with the images easier and reduce the need to crop and tweak them.

• For iOS– The iOs device users can go for the app Golden Ratio calculate and photo. It costs just $1.99 and contains handy features for the users like a golden ratio calculator. Using it you can shoot images while keeping the elements adhering to the principle.
• For Android– The android users should opt for the app Camera Zoom FX which costs $3. Using the app, you can utilize the Fibonacci Spiral and the Phi grid as image overlays while shooting pictures.

Handy tips to use the Golden Ratio

There are a few handy ways to deploy the Golden ratio in a design project:

• You can use the ratio to make a base website grid, which will cover the sidebar and main content area. For a screen spanning 1366 by 768 pixels, you may choose a width of 846 pixels for the content area. The sidebar can be 520 pixels wide. The height is not important in this context.
• You may use this concept to create guides for spacing. You can use big squares like unit 13 and 8 to make layouts while using small squares of unit 1 to 3 to set gutters.
• You can create icons and logos using the formula.
• It can be deployed at the stage of wireframing. That helps you plan a structure and size the various user interface components. This is also helpful for web design professionals to crop images while maintaining the proportions in the right way.

Things to keep in mind

While using the Golden ratio in a web page or artwork design can be beneficial for a company or professional, going overboard is not advisable. Keep in mind that for inexperienced users or beginners, a sense of scale created by the sequence may go out of hands. The idea is creating a sense of aesthetic a balance using the norm without going into the extremes. You should use the numerical value in design in subtle ways and not everywhere. Some websites may need little deployment of the golden ratio, while others may need intensive implementation.

In the end, it comes down to using the right sized element in a design or web page. You also need to use the white space in the right way to create a visual balance in the design. That is where the Golden ration can be handy. Use it in the right ways to spice up the design but do not base your entire design on it. There are other aspects like the usage of suitable and contrasting colors and the right type of content.

Where it all leads to?

The golden ratio is the secret behind visually pleasing and aesthetic looking images, logos, websites and everything that you come across in nature. In the beginning, it may seem like a mathematical concept tough to use in design. However, with a careful approach and analysis of artworks created using the theory – you will get used to it.

Of course, you can make use of the third-party apps and web tools that are there. Nevertheless, mastering the golden ratio is not something you can achieve overnight. It will take a lot of practice and analysis of the examples to reach the point of perfection. However, it should be used in the right ways to make your design appealing to the viewers.