The Golden Ratio is used within graphic layouts of all kinds, especially to balance content that is text heavy. It can help designers create hierarchy and draw users’ eyes to specific areas. Check out the following website examples and see how designers are making use of it!
What is the Golden Ratio?
The Golden Ratio is a mathematical ratio, commonly found in nature, and used in classical design theory to create balanced compositions. It roughly equals 1.6180, is also known as the “Golden Mean”, the “Golden Section”, and is referred to by the Greek letter Phi “ϕ”.
A “Golden Rectangle” is a rectangle whose length is 1.6180 times its width. For example, a div which has one side of 300px and another of 300 * 1.6180 ≈ 485px could be said to be a golden rectangle.
If you chop off a perfect square from this golden rectangle, you’ll be left with another golden rectangle.
You can do the same to the smaller rectangle, then the same again, indefinitely, giving you this familiar image:
The Fibonacci Sequence
The Fibonacci Sequence is similar to the Golden Ratio, but not exactly so. It’s a series of numbers where the next number in the sequence is the sum of the previous two. For example: 0, 1, 1, 2, 3, 4, 7
If we begin with a perfect square, then add to it another we get a rectangle:
Keep adding squares along the longest length
hen we add another square, equal to the longest length of the total shape:
Then again and again:
This can go on indefinitely, giving us the same effect as our Golden Rectangle, but this time building up instead of chopping down. Both the Golden Ratio and the Fibonacci Sequence give us similarly appealing proportions.
Let’s now analyse a few websites where we can see them in action.
Example #1: YStudio
What is This Website About?
“Your Local Studio” is a design and development studio based in Copenhagen, Denmark. They specialise in working with visual concepts in any form to create experiences that improve surroundings.
How it uses the Golden Mean
The website here uses the golden mean for two of its three pages. The home page is a conceptual overview of key pieces of work. However, when you visit the studio page it mixes a bit of the traditional web layout with golden mean rectangular shapes as you scroll down the page.
Why it’s Effective
Want to stand out in the crowd? Yourlocalstudio (YLS) have done that by utilising the golden ratio in their website design. The design features an progressive look with a definite grid system. You could argue that these days everything looks like bootstrap.. keep an eye out for more and more sites looking to grab attention with a more structurally dynamic layout.
Example #2: Mashable
What is the Website About?
Mashable is a news website; a source of information, knowledge and resources for the “connected generation”.
How it Uses the Golden Mean
I’ve used the Golden Ratio test from UX Triggers to demonstrate how Mashable uses the Fibonacci sequence in its layout. The content layout is flexible, with the headline to the left and links to more news on the right, separated by the grids.
Why it’s Effective
The Golden Ratio is effective here, as it allows a very content driven site to give typography breathing space. Similar sites may appear more densely packed with content, using traditional grid layouts, but Mashable demonstrates that the Golden Ratio can be effective even when it’s invisible.
Example #3: Jackson & Kent
What is the Website About?
Jackson & Kent is a web production agency from France. They specialize in digital services such as HTML5, CSS3, Drupal, Wordpress, PHP/MySQL, Flash etc.
How it Uses the Golden Mean
The screenshot above shows how the layout largely comprises previous client work. It also features a block of content about the agency itself and a navigation bar in the center of the screen. The contact button, as shown below, also uses the golden mean as a grid system to organise the layout in a unique way.
Why it’s Effective
The example here encourages you to pan through the website and explore its content horizontally. The gridded view and differently sized block shapes make the content more visually interesting. As users are likely to be viewing the content on a desktop (as well as tablet), there are pagination numbers on the horizontal axis navigation. This is an innovative way to view each piece of content, but also the UI as a whole.
Conclusion
The golden ratio naturally leads the users’ eye to specific points within a user interface. As a concept it can help you think about placement of content and using hierarchy effectively. The combination of layout, typography, colour and overarching principles will help take your designs to the next level.