Golden Ratio in Web Design
A couple of months ago I was working as a UX Designer for the tech-news site Unocero.com with thousands of daily visitors catching up with the latest tech. Most of the traffic came directly to the articles, but there was a big problem with the homepage.
Even though we had a ton of new content, there was a big bounce rate because users didn't see there was more content below the highlights of the day, this was because the highlights grid was too big and didn't allow more content to peek just above the fold of the page so the users could see it without scrolling.
That was the main challenge: Show the users the highlights and let them know there's more content ahead. As a personal goal, there had to be some Golden Ratios involved in the design of the new layout.
For this design there were two main constraints. The first one was the height of the Fold; according to surveys, the vast majority of users have screens over 768px in height, so I took 768px as a limit for this design. The second constrain was the biggest one: the Ad size.
One of the most popular Ad sizes on the Google Ad Network is 300 by 250 pixels, this is a fixed size that needs to stay that way if you want to make money out of Ads in your site. As you may notice, this dimensions are not in Golden Ratio, which can make things complicated if you want to make a structured design strictly with the Golden Ratio.
What I decided to do is separate each axis: X and Y; and treat each of them individually.
I started with the X axis, fixing the starting point with the width of the Ad: 300px.
Now that we have the size of the horizontal dimensions, it's time to arrange them in blocks of content that can be clearly separated from each other by a gutter of 10px.
The separation of the three blocks on the left will become clearer when the vertical divisions are stated.
These are the vertical guides that we'll end up using.
For the Y axis a similar drill is made. The height of the Ad is 250px and this is used as a base to create more sizes based on the Golden Ratio.
Similar as the X axis, these blocks are arranged to have four different sizes of content sections. This time we have two more constrains: the site header, and the Fold.
For the Ad and the other three stories I used only three variations of sizes, while the fourth one is used to mark the part of the screen where the additional content is going to be shown.
These are the vertical guidelines.
Now that we join the X and Y axis guides we have a clearer view on where the content can sit on the site.
Using the created grid, we can set down the Ad on the first block with its exact same size and then we can set other blocks of content to show more content from the site. In this case there is one main story that tries to get more visual impact than the Ad and two other secondary stories to complement.
The bottom row is going to be used to show the rest of the content before the fold.
We can set the grid over the site to see more clearly how the content blocks will be shown on the homepage.
Story 3 and the Ad share the same height and the rest have other sizes based on the Golden Ratio. Each of the blocks on the main section have different widths with Golden Ratio based on the Ad width.
This is the final layout that is now being used on Unocero's homepage, providing a more modern and clean look, mixing the Ad in a more natural way, and making space for the rest of the site's timeline to ensure that users know there's more content
Check out the final product at
