Learn basic principles of website design.  Home Web Design Basics Design Principles The Golden Ratio in Web Design

The Golden Ratio in Web Design


"Beauty is a characteristic of a person, animal, place, object, or idea that provides a perceptual experience of pleasure, meaning, or satisfaction" — so describes the meaning of this word Wikipedia. But everybody knows that tastes differ and those things that can be "beautiful" for ones can be absolutely not attractive for others. Nevertheless, there is a certain type of proportion that is considered to be an ideal one which can cause some natural sense of order, harmony, balance and comfort — it is the Divine proportion or the Golden Ratio (often referred to as the Greek letter phi). Biologists, artists, musicians, historians, architects, psychologists, and even mystics have pondered and debated the basis of its ubiquity and appeal. Nowdays this proportion causes not less interest in the sphere of web design. This mathematical ratio is commonly found in nature, being a constant part of our world and that is why being so easy for our perception. So what exactly is Golden ratio? Well, it is a proportion 1.618033988749895 ≈ 1.618 which holds between objects placed within some context. For thousand years people were using it either intentionally or unintentionally, being sure in its need.
Lets try to accept the reliable experience of of such genius as Leonardo da Vinci and to implement it to a modern life and particularly in the process of web design creation.

 

The Golden Ratio in Web Design


The usage of the Golden ratio is very simple. You can easily design a page using the Golden ratio with fixed or flexible widths. Let´s take for example the main content of your page and the sidebar. You should just take the total width of your content area (let it be 900px) and divide it by1.62 , so the number you get (in this case it will be 555.55px or just 555px — for convenience) will be the width of your content area and your sidebar columns width will be the rest (900-555=345px).

The Golden Ratio in Web Design

This rule can be used not only for width, but also for height in order to find the most acceptable proportion and, of course, you can use it for any part of your web page.

The Golden Ratio in Web Design

 

There are some special Golden ratio calculators, or, so-called, phiculators nowdays that will help you to realize this task, for example:

The Golden Ratio Calculator

The Golden Ratio Calculator - on-line tool and a free desktop widget for the Mac.

The Golden Ratio in Web Design

 

Phiculator

On-line tool and a free widget for your Mac OSX dashboard, it will calculate the corresponding value using the golden ratio.

The Golden Ratio in Web Design

 

But very often we are too lazy or just have no time enough to take out a calculator every time in order to find the needed figures. In this case you can just use the Rule of Thirds - a simplified version of the Golden ratio that is often used for web design creation today. The main idea of this rule is that every composition can be divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, forming a simple grid.

The Golden Ratio in Web Design

 

The four points formed by the intersections of these lines will be the central ones and should be used for the most interesting and important information, being able to catch the attention because of their location and also creating an aesthetically pleasing layout. Pink blocks in the picture show the most preferable places for such information. The left upper corner is considered to be the strongest one, since users scan web-sites according to the F-shape. Each division can be even further reduced by thirds, producing a more detailed grid in accordance with your design needs.

If you wish, you can download a grid template in order to simplify your work.

Grid System

The Golden Ratio in Web Design

 

It will be surely useful to know that an optimal number for comfortable reading lies between 60 and 80 symbols per line. Paying more attention to the improvement of the layout you will simultaneously improve readability of the content, making it more natural for perception and thus increasing its meaning.

Being acquainted with these simple rules you can effectively highlight the important functions of your site and create a web design easy for future work and perception, in the same time, making your main message more memorable and important.

 



About the Author:

Kate Burton Hi, I am Kate Burton, I propose you to look through some interesting materials that may be useful for your creative work. I do hope you will find here fresh ideas for inspiration or necessary practical advices.
Author's URL: Kate Burton
Learn basic principles of website design. More Design Principles Tutorials: Featured Materials | Fresh Materials | Website Templates


Like us to: