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.
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.
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.
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.
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.
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.
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.
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