Why Does Math have To Be everywhere Or The Golden Ration In Web Design

QArea Expert by QArea Expert on October 25, 2014

Why Does Math have To Be everywhere Or The Golden Ration In Web Design
Reading Time: 6 minutes

Math everywhere!

Math may seem as a boring science with various strict rules and nerdy members of the ‘digits club’ as its Apostles in highs cool. Yet it’s not all that evil. And do you know what changed my opinion about math as a science. As unlikely as it may sound Web Design was math’s key to my heart. Math can actually point out how visually acceptable and pleasant for the users eyes your layout is. Sure, Web Design is an art, but as all the well accepted masterpieces, it has to also follow some rules in order for everything you create to look appealing. We will be talking about the Golden Ration in this post, the anatomy of a web page and many more interesting tricks you are to use while crafting your website. Thus the following may easily be used with people from a huge Drupal web development company to simple enthusiasts who are wishing to create a beautiful website.

The anatomy


Every element that is placed there on your site is like a piece of a more advanced puzzle. An inner organ like a heart or a brain, only digital. They are providing several functions, yes, but there are two of highest importance. Ensuring your site is alive is function one. The second function is the sites esthetical value. The elements may be displayed and organized in thousands of different ways, your imagination is capable of coming up with. But there is still the right and the not so right path you may take. We may wish to know every element a bit closer.

The Container

Every single website is a container. The container is there to serve a particular goal of containing (duh!) different elements of a site. <div> and <body> tags are commonly used for such goals. I believe it’s more of a fiction, yet ancient history professors often tend to argue about whether tables were used for those purposes earlier. Old-school is a great thing, yet not in this case. Don’t use tables as the quality of your content will be reduced dramatically. Basically there are two types of containers:

  • The ones that are stretching in order to meet the fool width of a browser tab
  • And the ones that don’t. These are the ones with pre-determined parameters



Well, the header is not just what I would call an element, yet I must force myself to deal with it, so, it is. It’s used to divide the upper part of the page from the rest of the content. It contains the logo and the navigation bar of your site. It’s usually placed somewhere in between <div> tags for easier styling. The header may also be considered a container.

So the header has your logo. It is what identifies your band. The logo is often placed in the top left corner, although only your fantasy is the limit while web Designing. It’s just that we are commonly used to reading left to right and up to down, so if you will go with the choice of the majority while placing your logo it will be the first thing to get noticed.

The navigation bar is also of some crucial elements in your header. Your users need to move around the page somehow, right (although trends are stating users will prefer simply scrolling down for navigation in the future couple of years. But that won’t be our subject matter for now. Just a tip, nothing more)? The navigation bar has to be user-friendly and as simple as it gets. It may be horizontal or vertical, no matter, as long as your users are OK with it.

The body of your webpage


In the body part of the page we have the king himself, his royal majesty, the Content as well as a side bar (often) as a king needs his servants. Your pages main content is what users should be focusing their attention at rather than just looking through multiple tabs and features. Unless your site is a portfolio of tabs and features, that is.

Then goes the sidebar, the royal servant of our king. It will be displaying some extra things you wish your users to get familiar with like ads or news, etc. There are various ways of displaying sidebars. Some of them are great, others are not. We will get to that part later.

And as the last, but not the least, there is the footer. Mostly it is there for your users to understand that there will be no more content below. It contains some basic information about your company, some contacts, etc. It is a great idea, actually, to place some links to your top content there.

Oh, and one more thing. Footer appears not to be the last thing worth mentioning. There are still white spaces. White spaces are the areas of the page that are not containing any content whatsoever. They are used for user’s better understanding of the content as they are making everything more readable and watchable. It may prove to be as important in Web Design as content of high quality itself. White spaces are used to create balance in the layout and to guide any user to where you are wishing him to go.

But what about the math, with words about which, I was beginning my post with. We are getting to it.

The science part


Visual attractiveness is based on proportions. For thousands of years architects, artists and sculptors were creating masterpieces. But why are some of them legendary, like Mona Lisa when the others are forgotten under layers of dust? Because the smart of those creators were using appropriate proportions that are pleasant to be seen in real life. There is a magical number you are to remember. It is 1.62 (or 1.618 to be precise). This is something originally created by Luca Pacioli yet I will not be going deep in this history as I don’t simply have enough space and the this might require a separate post as well. Yet I will be writing about how that number may be used appropriately with Web Design.

This is the part of math that is (Wow!) quite easy to understand. Let’s simply imagine you are looking for the width of the main content area and the side bars for all to look smashing when combined. To do so we will require to:

  • Take the general width of the page with all the content (let’s take 1000px for easy counting)
  • Divide it by 1.618 (we will get 618.something px) This will be the big part of the layout width.
  • Then we are to subtract 618 from the total we have, which is 1000 and we will be getting 382px and that will be our sidebar. Easy, right?

Attention! More math to come!

Nobody has ever forbidden us to use the Golden Ration to determine perfect width as well as heights. Blocks that are containing the Golden ration will always look sharper than their counterparts. If you are allergic to calculators or are simply not too fond of using those with every action you take you may use a simple net of cells. For doing so you are to divide the general width and heights to nine equal parts. Each part is the total width and height of any element you have to place on your site. Then you are returning to step one we have spoken about and measure just the right amount of content pieces, whitespaces, etc.

That is where you have a nice net that makes it so much easier to design your future masterpiece. If you are not too familiar with designing with those cells and are looking forward for me to tell more, just note that in the comments below and I will be glad to write one more guide on that subject with more cakes and ponies.

Source of images: “This is my Body – Anatomy for Kids” application by urbn; pockets