It's time to try to distinguish the common parts of the website. We will divide them into elements and attributes.
Elements are those parts of a site that exist independently. I mean that you could replace them and those changes would not affect the rest of the site. An example of an element is a footer or a menu. You could change the look of the footer (color, font, or border) but it wouldn't affect the menu or any other element.
An attribute is something that affects the whole site (all elements). An example of an attribute is page width. If you decide to make your website wider or narrower, you will probably have to redesign all of the elements to fit into the new space. Think of the footer mentioned previously. The footer is usually as wide as the whole page. If you make the site wider, you have to make the footer wider too.
The list of elements may vary for particular websites, but in general we can distinguish them.
A header is a container that identifies the site. It is usually as long as the whole page and is located at the top of the page. It's also the first element that you see while reading the page. According to the subject of the site, a header contains other elements in it, such as the company logo (on a company website), the author's photo (in a blog), a slogan, a picture of a product, or an image that refers to the content. A header can also contain some additional elements, such as language flags or contact data.
If a page has a horizontal menu, it's usually located either just below the header or above the footer. It is a navigation element, containing links to other pages.
A vertical menu is a navigation element, usually located on the left or right side of a page. Like the horizontal menu, it contains links to other pages.
Content area is the place where you read content (information that you get from the page). It may contain text, pictures, galleries, movies, tables, forums, links, and any other kind of information you can publish on a website. Content area is the main and biggest part of the page.
Special blocks includes additional elements that may be required by some pages and that appear on all (or almost all) subpages, for example, a login form.
Note
The division of what is an element and what is content is rather smooth and may vary in particular cases. We are trying to list the elements that are common for the whole site (they appear on all the subpages). Depending on your design, the same information can once be an element, while at another time, it can be just content. For example, consider a phone number. If you write it on the Contact page, in the content area, it is content. But you can also conclude that this is such an important piece of information that you want to display it on every page in a special Contact block, or even in the header. In that case, it will be an element. It's not uncommon either for information on a website to be both content and an element.
Attributes are the characteristics that apply to the whole page. Typically we can distinguish them as follows:
There are many devices you can surf the Internet with: we have desktops, laptops, netbooks, tablets, smartphones, and so on. Each of these devices has a different screen size and resolution. This means that layout size is important. Your site should be displayed correctly on as many different devices as possible. This usually leads to a compromise. You shouldn't design your page too wide (making it look good, but only for the visitors with new, high-end monitors), but prepare it for a wider public, and also for those with older hardware. That's why the layouts are usually centered with an empty space or a background around it.
The first point of interest is the width. The height is not so important because you can scroll the site with the mouse without breaking the flow of reading, while horizontal scrolling is burdensome. Nevertheless, you shouldn't totally forget about the height either, especially when designing the header. Nowadays, screens are increasingly becoming panoramic, and it's not too good if your visitor can see only the header.
Typography is a set of fonts and its styles that appear on a page. You should avoid using different fonts on different subpages. Instead, the content on every subpage should be written with the same, consistent fonts. Just imagine reading a book in which every page is printed with different fonts. You would not think it was very professional, would you? According to the complexity of the content, you will have to define at least the font for the headers (titles), for the paragraphs (normal text), and for the hyperlinks. If your content is more sophisticated, you may need more header levels, table headers, table contents, quotations, and so on. Also, you shouldn't forget about line spacing and margins. Typography is an important part of design and can greatly improve or spoil the final effect.
The colors of all elements (their borders, backgrounds, and so on) should be chosen in such a way so as to create a coherent whole. We're going to call this set of colors a color theme. A color theme is a very important factor of any design because it can define the ambience of a whole website. The right color theme for a design is like the right rhythm for a song.
A layout is an arrangement of all the elements of the page. When talking about layout, we talk about the columns that a layout usually contains. A column is the vertical part of a page that can contain elements such as a vertical menu, special blocks, or a content area. The columns are usually located between the header and the footer.
You can say that every layout has at least one column. Even if it seems that a layout doesn't contain any columns at all, in reality it's a one-column layout.
Remember that when we talk about a layout column, we do not talk about a column of text (in newspapers, the text is divided into several columns) but about separate areas (containers) of a page, where you can put elements. If a column contains a content area, the content can itself be divided into many columns, but this is still one column according to our definition.
We can distinguish three typical layouts.
A one-column layout is usually used for blogs, private websites, and simple company websites. A one-column layout contains only a horizontal menu.
The two-column layout is the most popular one. The first column usually contains a vertical menu, while the second one is used for displaying the content area. A two-column layout can contain a vertical menu, a horizontal menu, or both. If a two-column layout contains only a horizontal menu, the side column is used for additional blocks, for example, the login box. The following figure shows a two-column layout with a vertical menu on the left:
The following figure shows a two-column layout with a vertical menu on the right:
The three-column layout is used usually for the more advanced websites. It consists of two side columns (usually left and right) and one large column in the middle. The side columns contain various special blocks and the middle column displays the content. The diagram for three-column layout is as follows:
