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.