The best web page layout 6


The best web page layout is … with a main line of menu and a left sidebar.

 

This is the so called four block layout and it consists of 4 blocks: a header,a left sidebar, main content block and a footer. They can be clearly seen in the picture below.

Four box model with four rectangles: Horizontal red on the top, vertical green below the red one, yellow square next to it and blue horizontal rectangle below them

This simple formula combines a lot of qualities in itself. In order that the website is as comfortable as possible for the visitors the main center of information should be concentrated on the upper left side. Most of the rectangular resources of information – like newspapers, books, the main computer desktop and so on – start their content from the left upper area and move progressively to the right and to the bottom. Despite that we are dealing with a web page it is still a page and in general it is red in the same way.

In its mobile version the header is followed by the main block and the footer. The left sidebar is reachable by an icon preferably on the upper right side of the header.

 

It must be easy for the visitor.

Boy sitting in front of computer.

Put yourself in the shoes of your visitor when considering the layout of your website. Are you there? What are you looking for? Whatever you are looking for it is better if it is a part of of the main menu, somewhere around the upper left corner. It is not a coincidence that usually the “Home” page is exactly there. Another page that is increasingly important is the page “About us” or “Who we are”. It should be simple for your visitor to find who you are and what is your main activity and moreover it is essentially important for you to provide this information in such a way so as to gain visitors’ trust in you. He or she is just a random person looking at a random website which usually results in a mismatch unless someone (in this case you) makes a straightforward effort to present himself or his organisation.

Light Green Business Card with blue, orange, black and sky blue squares for address, telephone, web page and email.

Pay great attention to the details.

 

It is the dilemma between the beautiful and the useful that could eventually lead to disastrous results. A result of that kind happens when the text on the page is not easily readable due to the color of the background.

Grey text on a slightly lighter background.

Consistently this mistake affects the header block of the layout which is often a multicolored picture or a designed graphic. As a consequence the text intersects with the region of the background which is in a similar or in the same color, so that it is likely for the visitor to encounter difficulties in reading the letters. The same applies to the other blocks as well. Above all, the website should look like an inseparable whole unit. By the same token the smaller sections of the page should be devoted to their intent to. If, for instance, there is a rectangular box somewhere on the page, devoted to the safety on the roads, it would transmit the message much easier when next to the text “Save the pedestrian” there is an actual depiction of a person and a vehicle.

Pedestrians and a vehicle on the road. Typical city cross - blurred.

 

Let the color hold the composition just like painters do.

 

An equally significant aspect of the website’s layout is the color. As it was mentioned before, the choice of colors must not cause even the slightest problem for the reader to receive the message. Two or three main colors are enough for giving the pages an original view and distinguishing the primary elements from each other. The most essential point in here is to choose a light background for a dark text or a dark background for a light text. Having more main colors would demand more efforts from the visitor to adjust his perception to the changes. Even supposing that you choose to place some very unusual shapes or elements on the page it might still look nice if their color is one of the main ones.

Unusual shapes - curved rectangles in groups by three - two grey groups an blue one light blue.

Give the content its space.

 

As you place an element (text, graphic or something else) make sure to give it its appropriate space. The short distance creates an automatic bond between the elements. Imagine a picture with a beautiful green grass which is in a distance of 1 pixel from the beginning of the paragraph, starting with the word “Basically”. When bonding the word “Basically” and the picture you risk to cause confusion in the perception, which in turn might transform into unwillingness to continue reading. A minimum of 10 pixel space must separate these two elements.

Text in a close and in a good distance from the text.

Moreover, these empty spaces are needed in order that the user could click on them and cancel an action that he has started. If the main menu for instance is very close to an ad the visitor may easily find himself in another website that he does not care about.

Even though the space on your pages costs you money and it is natural to want to fill it at its maximum, beware of annoying any perspective or occasional visitor.

 

→ For those interested in the main types of page layouts here they are:

 

  • Absolute Layouts
  • Relative Layouts
  • Fixed Layouts
  • Elastic Layouts
  • Scaled Layouts
  • Liquid Layouts
  • Equated Layouts
  • Conditional Layouts
  • Hybrid Layouts

For more information check the following article – Types of Layouts


Leave a comment

Your email address will not be published. Required fields are marked *

6 thoughts on “The best web page layout

  • Stefan Stefanov

    My humble opinion is just that this article is a bit outdated. These things are just basics that has been explained long ago. Only the color thing was a bit new and that’s it.

    • sinanat@abv.bg Post author

      Apparently this post is not for the geeks but for those who are just starting. I remember when I was working on my first layout it was so confusing and the result was so ineffective. Most of the new beginners tend to choose something very flashy and then it becomes extremely difficult to deliver the main message.

  • Linda

    I like your advices, however, I don’t really think that only three colours are enough for the website to be attractive for visitors. Visitors are prone to like/dislike their prefered/disliked colours, so if you have more than three colours, it is much likely to attract visitors with various of colour preferences. The more diversity you achieve the more visitors you’ll get.

    • sinanat@abv.bg Post author

      I agree that a huge part of the layout’s “charm” is in the colors but we have to put the practical benefits in front of the aesthetic ones. It is’t a decision easy made but unfortunately necessary. When you give the visitors more main colors you give them more main types of information and this creates difficulties with acquiring the content. The content itself seems like being more diverse which is a good thing but harms the ability to follow and focus. The main type of “colorful pleasure” is usually achieved through graphics and pictures.

  • One-Click Lindsey

    Website design has so many factors. I think you bring up some really good points here. It shows you really need a professional to help you design your site because they know how to take all of these facts and make it all work together. White space is so important isn’t it? Keep up the good work.

  • Angelica Rivera

    Oh wow! You have the most best info I have read yet. I will continue to refer to this site to help me progress while creating my blog. I have accumulated a lot of insight reading your posts. Please keep the info coming! Great website! I just shared on Pinterest and my Twitter account In hope many other people get a chance to experience this opportunity that I have coming across this website. I’m so excited to see how much better I can make of my blog! Thank you thank you 🙂