Web Page Anatomy

Even from a nondesigner’s standpoint, defining a custom web design that satisfies all the requirements I outlined above is a simple task. It’s similar to making a phrase on your refrigerator with magnetic poetry words. Although there are millions of ways to arrange the words, only a few arrangements make any sense. The magnetic words are like the components, or blocks, of the web page. Although the number of these necessary blocks depends on the size and subject of the site, most websites have the components shown below.

Image may be NSFW.
Clik here to view.

Containing Block
Every web page has a container. Without a container, there is no place to put the contents of our page. The elements would drift beyond the bounds of our browser window and off into empty space. The width of this container can be fluid, meaning that it expands to fill the width of browser window; or fixed, so that the content is the same width no matter what size the window is. A fluid width can fill the entire window or can be set to some percentage, like 80%. That way the contents are centered in the window with 10% background on each side. The contents will expand and contract as you expand or contract the window. If you have images in the content, you should probably use a fixed width, as the varying width of a fluid layout will destroy the design you are trying to achieve. Another issue with fluid width is that text becomes hard to read if the lines are very long. Many monitors have quite high resolutions and run with large browser windows. If you design is full widith or even 80% width of a 2000 pixel wide browser window, it will be very hard to read the text.

So if you want to make sure that your website design looks the same no matter what the size of the browser window is, you would want to use a fixed layout. A fixed layout for your web page ensures that the many items on your web page are aligned with each another. For example, you may have a picture in one column of the page that must be aligned with another picture or some words in another. Using a fixed layout gives you a greater measure of control, making sure that the things in your page will appear in the same position as you designed it, since your page width will not change even if your visitor resizes his/her browser window. Here is a link discussing the differences between liquid, elastaic, relative, fuild, flexible and fixed layouts. Another view of page design and fixed width versus flexible widths. The on-line Web Style Guide is a useful resource for helping you think through the design process for your website design.

Logo
The logo is your identity- your brand! Your logo and the colors you use should be consistant exist across your company’s various forms of marketing, such as business cards, letterhead, brochures, and so on.4 The identity block that appears on the website should contain the company’s logo or name, and sit at the top of each page of the website. The identity block increases brand recognition while informing users that the pages they’re viewing are part of a single website.

Navigation
It’s essential that the website’s navigation system is easy to find and use. Users expect to see navigation right at the top of the page. Whether you plan to use vertical menus down the side of the page, or a horizontal menu across the page, the navigation should be as close to the top of the layout as possible.

Content
Content is king. A typical website visitor will enter and leave a website in a matter of seconds. If visitors are unable to find what they’re looking for, they’ll undoubtedly close the browser or move on to another site. It’s important to keep the main content block as the focal point of a design, so that visitors can scan the page for the information they need. Content is also king when it comes to Search Engine Optimization. If you have good and valuable content, your visitors with link you your pages and the more incoming links you have, the more valuable you will appear to the search engines; you will end up with a higher SERP(Search engine Results Page) listing.

Footer
Located at the bottom of the page, the footer usually contains copyright, contact, and legal information, as well as a few links to the main sections of the site. By separating the end content from the bottom of the browser window, the footer should indicate to users that they’re at the bottom of the page.

Whitespace
The graphic design term whitespace (or negative space) literally refers to any area of a page without type or illustrations. While many novice web designers (and most clients) feel a need to fill every inch of a web page with photos, text, tables, and data, empty space on a page is every bit as important as having content. Without carefully planned whitespace, a design will feel closed in, like a crowded room. Whitespace helps a design to breathe by guiding the user’s eye around a page, but also helps to create balance and unity. Leave enough white space!