Using the Golden Rectangle Proportions in Web Design Foundations

A golden rectangle, based on mathematical proportions called the golden ratio or golden mean is approximately the proportion of a credit card, and these same proportions are reflected in classical Greek temples, columns, and in Nautilus seashells. One of the ways to create designs that are these proportions or have key elements in the golden proportions is to copy an image of a temple, a Nautilus Seashell (cut open to show the interior) or a simple object like a credit card into a Photoshop layer, set the transparency to 50% - 70% and lay out your site design over the underlying image. Of course another way is to do the math and lay out designs based on those proportions.

I have used the "copy an ancient Greek temple and paste it on it's own Photoshop layer" technique myself in designing user interfaces for Microsoft to be more pleasant.

Really good web design facilitates site use, by directing customer's eyes to where they want and need to look to flow onto their next decision.

Used well an underlying design plan which includes proportions and how they are used, gives visual cues to end users and aids intuitive understanding both in navigation and context. By context I mean look and feel as it is applied to the end user's needs and the company or organizations' site design. In this way it helps the design speak!

On the ecommerce Crate and Barrel site for example, the design team is obviously using the exact proportions of the golden ratio to make an inspirational website that just makes visual magic even more exciting, harmonious, and pleasing. It's low key, clean and has that special something. When such proportions are not there, end users may not find the site as useful and helpful; such sites do not look beautiful, they don't flow, they don't look unified.

As soon as I can I will create and post some images that show exactly what I mean. The most well designed sites use CSS to control and display text, using fonts, background colors, and placement AND the golden ratio. It's not just color, not just images, it's the whole information architecture package as well.

Experienced, trained or intuitive artists use golden proportions to augment their designs, until they became completely natural design feature. Using the golden mean as a style and design tool - skilled artists also know how and when to break the "golden" rule.

I want to state that I am not advocating a too cold matchie - matchie kind of design which looks like it was generated by a computer with no human qualities - but I have to admit when demonstrating these proportations to another Microsoft manager, he was amazed where he could find that golden number. He was especially surprised to see where the corners of the proportions came together in key places to emphasize the important decisions, and how designers address the human eye and love for certain proportions -- humanistic design. It's not cold, it's vibrant from within, in part because of the intention of the designer sings through in an inspired design.

Yes let's call it beautiful! What do you think?

Fibonacci Numbers and The Golden Section in Art, Architecture and Music

Proportions of the Golden Rectangle

The Golden Rectangle and the Golden Ratio

Golden Rectangles

Phi: That Golden Number




If you need good web design for your site and are unable to find a web designer to suit your design needs check out these resources.