Web Page Anatomy
Even from a nondesigner’s standpoint, defining a 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 seen in Figure 1. anatomy of a web page.
Figure 1. Anatomy of a website
Let’s look at each of these components in turn:
Every web page has a container. This could be in the form of the page’s body tag, an all-containing div tag. Without some sort of container, we’d have 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 the browser window; or fixed, so that the content is the same width no matter what size the window is.
When designers refer to an identity, they’re referring to the logo and colors that exist across a company’s various forms of marketing, such as business cards, letterhead, brochures, and so on. 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 site.
It’s essential that the site’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. At the very least, all main navigation items should appear “above the fold.”
Above the Fold
The fold, as many designers call it, is where the content of a page ends before users scroll down. This metaphor is derived from the fold in a newspaper. If you look at the cover of a folded newspaper, most of the headlines and biggest news appear in the top half, so that the most important news items can be seen at a glance when the newspaper is folded. The location of the fold on a web page depends on the browser dimensions and the user’s screen resolution. At a resolution of 1024×768 pixels, accounting for browser chrome that is, space is taken up by the browser application itself in the form of tabs, buttons, the address bar, and a bottom status bar—the fold is usually just over 500 pixels from the top.
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.
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.
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.
At this point, we’ve had our initial meeting with our theoretical client, and it was helpful. He explained very thoroughly what his business does and what he wants the site to achieve. Even though we’ve yet to see actual content, we can use the standard blocks of web page anatomy to start developing a layout. Although other sites specific blocks are worked into the designs of many website layouts, the web page anatomy works to summarize the most common blocks.
This post contain the content of book The Principles of Beautiful Web Design by Jason Beaird