Great Website Design: The Golden Ratio

Think of your website as your Online CEO.

If you were approached by someone and told you have 5 seconds to engage them. To manufacture brand loyalty. How would you respond? Every time someone visits your website this happens subconsciously. Showcasing your most important information may result in further brand engagement. Great web design does this for you. If designed by an experienced professional your company will benefit greatly.

Composition: The Golden Ratio

Our mind perceives visual appeal based on a mathematical formula called the Golden Ratio. For thousands of years this has been used as a principle of good structure and design in music, architecture, photography and even patterns of human behavior. Foregoing the math, this ratio simply provides your brain a mental guideline of importance, relation and structure.

If you run a business you have had a family member let you know their son or daughter designs websites. How they should design yours and save you money. “It will look really nice!” Web design is much more complex than many realize. It’s more than putting your logo on the top and implementing your company color scheme. It’s a psychological tool that establishes credibility in your brand.

Think of your website as your Online CEO. As the face of your company the Online CEO is tasked with aligning your online brand with the strategic vision of your entire company. Would you hire just anyone to do that? No. Don’t take that lightly.

How websites implement the golden ratio

Let’s take a look at a few web designs and see how they structured each layout. I think you will be surprised that many successful websites implement the Golden Ratio in their design.


FastCompany.com

It’s no coincidence that Fast Company’s web design fits perfectly into the ratio. Companies of this size understand the importance of hiring a legitimate web designer or agency for their online brand strategy. Main content in #1. Navigation within #2. If you look closely, even their sidebar layout fits the 1/3 ratio. The featured article on top is roughly 1/3 the size of the ad below it.


Mashable.com
Although their website design breaks the horizontal mold of the ratio if you place it vertically against each content column it shows the thought put into the layout. Notice how the article headline next to #3? If we drew the 2/3 box under it, breaking the larger square below it in half, we would block out the headline space completely.

If they used horizontal Social Media sharing buttons for Twitter and Facebook under the headline this would result in more attention. By breaking this grid they are relying on visitor to take the initiative to locate the buttons. Although that small amount of effort probably goes unnoticed by many, moving the buttons to a more prime real estate would increase sharing numbers.


ColorMetrix.com

You don’t need a sizable budget to design, or redesign, your company’s website. Color Metrix is a small, Milwaukee based color verification company that needed a website redesign to provide a better guided user experience. I worked within their existing Thesis (affiliate link) framework and provided a face lift on a slender budget. Although still early in its life cycle, the new web design has garnered a great response from visitors.

Notice the key focal point to the Golden Ratio breakdown near #2. The shop link. Not only is it located near the most active focal point, it is colored green to encourage more attention. Titled shop to motivate action.

How can you implement this strategy?

To make this as easy as possible, I have created a free online tool for you to see if your website, or any other website, uses the golden ratio proportions. It literally takes a few seconds to use.

You can try it here: Golden Ratio Web Design Test.

Again, it’s 100% free and doesn’t require any sign-ups to use. If you find it helpful, please feel free to share it.

Take note on what content is taking primary focus. Is it the appropriate content? Is your main focus an advertisement or link to another website? Is your goal to send people away from your website? Not likely. Mashable does a superb job in converting your attention into brand loyalty by guiding you to subscribe to their content. Even if you aren’t interested, you take notice.

Imagine how many more leads you could be converting right now with the proper placement of content.

21 Comments

  1. SUPERGREENReplyAugust 18, 2010 at 9:09 pm 

    Very interesting thought. I’ve often used the rule of thirds in my designs, but never considered the Golden ratio. Makes sense though.

  2. Joshua GarityReplyAugust 18, 2010 at 9:36 pm 

    When you break it down, that’s all it really is. A rule of thirds. But when you break down the larger thirds into smaller ones, you begin to create relational distance in content. Which can lead the user’s focus to certain areas of your website without them realizing it.

    This Golden Ratio is also found in nature, facial structure, etc. It’s pretty mind blowing as a whole. I didn’t want to overwhelm everyone with a 10,000 word article though :)

    • CakezReplyJune 19, 2013 at 2:27 am 

      Uhhhhh no

  3. Naples web designReplySeptember 2, 2010 at 3:18 am 

    I didn’t know that the rule of thirds can be use also to a web design concept. Rule of thirds is for camera that’s all I know. Your thought about using the rule of thirds is really unique.

  4. perth web designReplySeptember 26, 2010 at 3:17 pm 

    Website and it’s content can be a deal breaker because it is the gateway of your business in the internet world so once launched make sure that you take care of it and update it from time to time.

  5. AnonymousReplyApril 22, 2011 at 1:42 am 

    In journalism school, they taught us modular design. Very effective for mediocre/passable designs. The golden ratio is a great way to extend that basic knowledge. Thanks for the great post

    • Joshua GarityReplyApril 22, 2011 at 2:40 pm 

      Thanks Troy! It really boils down to the rule of thirds as a basic guideline/framework for composition. That can be expanded to many mediums. The real ‘trick’ to successful design and user experience is understanding the psychology of why those rules work. How to make passable designs into greatly functional designs. The ‘why’ is much more important than the ‘how’.

  6. Rohit AgarwalReplyJuly 9, 2012 at 5:46 am 

    Thanks…..

  7. Rohit AgarwalReplyAugust 23, 2012 at 7:53 am 

    Great Post…. thanks!!

  8. sproketzReplyMay 3, 2013 at 6:56 am 

    Dynamic browser heights and widths make the golden ratio completely irrelevant in web design. The second you change the height of the browser or the width you no longer have a root shape that represents the golden ratio. You have something else that is not the golden ratio.

    I think we can give points to people for trying. But none of these examples represent the golden ratio aside from the Parthenon.

    • Joshua GarityReplyMay 3, 2013 at 7:25 am 

      I disagree. Just because you can’t see 100% of a non-responsive design doesn’t take away the fact that it may be designed with the rule-of-thirds.

      With mobile design, or in this case RWD that sizes down to mobile, it becomes far more contextual. You only have, roughly, 240-320 pixels of width to design with. So, your copy will generally rule over a majority of that space. But when you begin to implement buttons, etc, that is where the golden ratio comes into play.

    • RemartReplyNovember 24, 2013 at 8:50 am 

      I disagree with Sproketz: the ratio can be used in webdesign, because the ratio can be applied to the size of the website, not the size of the screen. In a small example: the layout of a banner of 300×250 can be made according to the ratio, using the 300×250 size as your base. So a website where you make your content focussed on say, a 980×570 area, then everything in that block can be laid out according to the golden ratio principle. What the size of the screen is, does not matter. Just like the Parthenon doesn’t have to be built in relation to the size of its surroundings. Only if you make your content dynamic, it starts to be more difficult, but still not impossible if you would work with percentages.

  9. GoodSalesPersonReplyMarch 31, 2014 at 11:53 pm 

    Hi Joshua,

    Great article! Very informative and thought-provoking indeed.
    What makes you realise the golden ratio of web designing? Are you inspired by the Fibonacci numbers?
    Have you thought about doing an simple experiment with 2 site offering similar contents, but 1 following the golden ratio and 1 does not, and see which site can attract a greater crowd?
    Just giving a suggestion and see if the result can substantiate your theory.

    Cheers,
    GoodSalesPerson

    • Joshua GarityReplyApril 15, 2014 at 10:23 pm 

      It would be difficult to create two versions of a site using different means without employing two different designers. One thing that could be done is take version A, the original site, and create baseline stats. Then shift things slightly to fall in line with the golden ratio and see how those stats effect conversions.

      I do this quite often but the changes I employ on websites or landing pages are usually too different to use as a before and after to the golden ratio argument.

      It would be a great thing to look into though. I’ve made note of it :)

  10. cogmiosReplyApril 15, 2014 at 7:14 pm 

    I assumed “the golden ratio” stuff was true for a long time. But now I actually found the whole golden ratio stuff is utterly nonsense , see: http://vimeo.com/88132964

    NO: architects, painters etc… did NOT use the golden ratio in their works, never, NOT: not the egyptians, NO: Da Vinci stuff is also nonsense. Even utterly nonsense.

    It was some kind of hype after Adolf Zeising published a book on the golden ratio in 1854. Before 1830 there is not even mentioning of it. Any statistical analysis on pyramids to any paintings reveal there is no such usages.

    Again see: http://vimeo.com/88132964 (the video is by http://www.stanford.edu/~kdevl… so a good authority)

    • Joshua GarityReplyApril 15, 2014 at 10:20 pm 

      I think that’s the common misconception. The ratio, rectangle, etc are probably not used to construct the buildings, websites, etc but our brain is able to categorize and classify the visual information easily because it’s presented in a certain way. The mathematical formula that, that ties into would fall under the golden ratio.

      I’ll have to take some time to watch the video you provided. It looks intriguing and I think your points are valid. The disconnect is just that the ratio was used to create the art versus having a mathematical way of explaining why the layout is pleasant and easily consumable.

      • cogmiosReplyApril 16, 2014 at 1:27 am 

        ” able to categorize and classify the visual information easily because it’s presented in a certain way.”

        I think there are 2 things (1) to have something called computational esthetica which seems a lot more complex than just a number: http://iaaa.nl/rs/compest.html in fact it seems we don’t have that model yet because it seems now to be personal for each person: each shape seems to bring up memories and meanings which are connected to all other shapes which would require a semantic model that is not present yet.

        (2) to have a cognitive user model that would allow us to categorize (and thus classify visual information faster) because it is presented in certain way. In other words: that wat is studied in cognitive ergonomics. If it was that simple cognitive ergonomics would not be a 4 years study :) E.g. : http://cogsci.stackexchange.com/questions/1627/is-golden-ratios-association-with-perceived-beauty-a-myth

        • Joshua GarityReplyApril 16, 2014 at 1:39 am 

          Agreed. It’s a complex theory. When I wrote this, probably 4 years ago, it clearly wasn’t meant to dig into true cognitive psychology, reference studies, etc. It’s a very, very basic approach to structuring visual data, specifically websites, to make them more usable.

          You’ve provided a lot of great resources to dig into the complexities of why this may, or may not, actually work and I commend you for that :)

  11. NetSearch Web DevelopmentReplyMay 1, 2018 at 12:06 am 

    Great blog! I didn’t know that the rule of thirds can be use also to a web design concept. Rule of thirds is for camera that’s all I know. Your thought about using the rule of thirds is really unique. Thanks!

  12. Nirav DaveReplyJune 18, 2018 at 12:06 am 

    Hey Joshua,
    Thank you for sharing this amazing and insightful post. This is one of the best web design practices that all must use. Keep up the good work, mate!

Leave a Reply