Aidem Media

Using the Golden Ratio in Web Design

Using the Golden Ratio in Web Design


Commonly found in nature and sought by artists and photographers alike, there is a philosophy and a visual science behind The Golden Ratio. Visual artists use it to create attractive and captivating imagery that draws the eye. As a web designer, you too can use it to create stunning visuals.


What is The Golden Ratio?

The Golden Ratio determines the symmetrical relationship between two sections of a visual element, calculated to approximately 1:1.61 (or around 500 pixels high by 805 pixels wide). It is illustrated by dividing a rectangle with that ratio by a vertical line that separates a perfect square from a smaller rectangle. Next, divide that rectangle into a perfect square and a rectangle. Carry on this process of dividing each new rectangular section. What results is a sectioning of images broken down into what vaguely resembles a spiral. It applies to many of our most famous images including Leonardo Da Vinci’s painting of The Last Supper and even the Parthenon at the Athenian Acropolis.


How Does the Golden Ratio Apply to Web Design?

We’re glad you asked because website design is not exempt from this desire to have a structure based on The Golden Ratio. Even back in the day of simple websites with few (if any) visuals, sites followed a basic 1:1.61 visual format. It worked even though sites would be considered ugly by today’s standards.

It’s relatively easy to incorporate The Golden Ratio into your website’s design. To start with, simply ensure that the space of your content relative to the space of your sidebar adheres to a 1:1.61 ratio. It doesn’t have to be exact, especially as most laptops and desktop machines are now widescreen format and may not quite be able to get it exact. Tablet users tend to hold their device in a portrait orientation too, requiring some adjustment.


Why Use It?

There are many reasons why visual artists use The Golden Ratio; the reasons stated here are just as relevant to website design.


It’s Good for Structure

Without some kind of structure, a website can look too busy. Even if you have a lot going on with lots of necessary textual information, it will be easier to digest and examine when laid out correctly in a format that is easy on the eye. Viewers will leave or ignore a website that feels chaotic, messy or otherwise lacking in structure.


It Draws the Eye

Using this format structures the text, but by applying the template, you can work out how to best place certain section. You can effectively direct the viewer to certain areas, telling them where to look. Because this mimics both the natural order and hundreds of years of art history, the human mind is trained to “read” visual media in this way.


Because UX Design is King

Web design is no longer about businesses showing off what they can do with their text, animations and menus. With UX (User eXperience), the site needs to be easy to navigate, with intuitive design and pleasing on the eye. The Golden Ratio creates a pleasant visual aspect to the UX along with other features such as click rate and menus. Ignore aesthetics in the UX at your peril.

Categories: SEO.

Leave a Reply