Golden Ratio and Rule of Thirds
One of the key principles of design for web designers proportion, as it is applicable at the macro-level (the general layout of the page) and the micro-level (e.g. a single diagram or widget). Proportion refers the size relationship of visual elements to each other and to the whole. In art this principle has been examined for hundreds of years, and one timeless proportional relationship that occurs frequently for positive effect in design is the Golden mean or Golden ratio.
The Golden Ratio
Ratio refers to how one measurement relates to another, and the ratio formed of 1:1.618 is called the Golden mean - the ratio of bc to ab is the same as ab to ad. If you divide each smaller window again with the same ratio and join their corners you end up with a logarithmic spiral. This spiral is a motif found frequently throughout nature in shells, horns, flowers, etc.
It may be that humans are genetically programmed to recognize the ratio in the Golden mean as being pleasing. One unusal example: studies of top fashion models revealed that their faces have an abundance of the 1.618 ratio.
The golden ratio can be seen in many ancient architectural designs, including the Parthenon.
Golden mean grid applied to a landscape
Rule of Thirds
Many designers and artists are aware of the rule of thirds, where a picture is divided into three sections vertically and horizontally and lines and points of intersection represent places to position important visual elements. The rule of thirds can be a very useful guide for composing designs.
One can analyze photographs and designs by laying down grids.
Rule of thirds grid applied to a landscape.
Rule of thirds grid applied to a portrait.
As an experiment we started applying a rule of thirds and the golden ratio to some Web sites:
Some of these web sites, like Amazon.com, have a flexible design, meaning the width stretches to fit the user's browser. How might that affect proportion re. the rule of thirds?
Proportion is an important principle of design, and an excellent tool to help us as we make decisions about layout. But it is not the only tool; there are other elements and principles to consider as well.In placing visual elements for an effective composition, one must assess the other elements and principles of design including shape, texture, color, dominance, balance, etc.