Website Content Layout Guidelines


A lot of websites are currently created or “designed”. But wait a minute have you ever thought what part of the screen should hold which content ?

website-layout.png

Let us try to figure out something on those lines…

Here are some of the points that we should consider while “designing” a layout

  • The most important content should be right in the front of the eye.
  • The less important should be around the most important
  • Even lesser importance, Show the way down! It should be further away from the reading view ( for least distraction )

Consider the image above.

The Blue area is the central part of the monitor screen. Most of us position our seats, height of screens so that we are at the center of the screen. That makes the blue area distinct, directly visible without the roll of the eye. Hence the most important content should go in the blue screen. Try guess the scenario where whole screen is filled with important material, and you rolling your eyes or head to grab hold of the small fonts on the high resolution monitor.

Green Area is the area where all your primary navigation related to the content should go. You’d like consider the violet area is prime are where the links should go. (A common right-side-navigation that you observe in the blogs now days). But would still recommend you to go to the left side. Why ? ’cause English is written from Left to Right, from years we’ve been reading back to left when we require some cross-checking of references, text, etc. We never go to right (unless its Arabic or Hebrew) So primary navigation of content on the Left.

Violet Area is the one with other navigation not so related to the content should go. Eg. considering you are making an online store, the violet region could hold some random product images, information about new products, etc. If you want to really be precise on your Content Text, then I would rather suggest you to remove the tertiary navigation (violet area) and instead replace it with plain background.

Orange area is where the brain should focus the least, unless you care for unneccessary details. Here you can place unwanted stuff, but still important content like links to Privacy Policy, Copyright notices, etc.

The whole page should not be more than 2 – 3 scrolls, (See: Long Scrolling Blogs)

Update: If you check the Kubrick theme, The one that I’m using, it has layout similar to what I stated.

Kubrick theme layout

Check out how very centrally the main content is placed !

2 Responses to “Website Content Layout Guidelines”

  1. More Info Says:

    I enjoyed this article and also wanted to point out which i truly like the style and really feel of one’s website. I’m utilizing wordpress as well on my weblog but have been searching for a template like this that is a lot much better than what I have. I see the theme is listed about the footer so I will carry a better appear at it.

  2. Garmin CSX60 Says:

    Hi there, What an wonderful web-site this is

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: