Design Fundamentals

     Much like printed media, web sites have certain structural elements that should be built into every page. These elements allow for good organization and consistency from page to page. It has been proven that most people learn best by "doing". If you develop your pages intuitively, chances are that your visitors will view them the same way. What this means is they will know what to expect from each page based on design standards you apply throughout your site. For instance, certain navigational icons will always be in the same relative page location and the same colors will always represent certain page elements like titles, links, and notes. Each page should contain at least three sections, the header, body, and footer as shown in the example to the right. Notice how all essential elements are clearly visible in the "unscrolled" web page. As your title page, it is important to have all the elements in clear view. The menu bar in the footer can be repeated on each page as a form of site navigation. More on each page element follows...

THE HEADER

     The Header is the first thing a visitor will see as your page loads. As such, it should immediately inform the viewer about the nature of the site. Typically, a site title or logo is placed in the header. This title or logo should "grab" the attention of the viewer yet not add unnecessary delay in loading the page. A fancy title graphic is of little use if the viewer doesn't stay long enough to see it. Another item typically placed in the header is a navigational menu. This may be implemented as part of the graphic in the form of an image map or as a separate text or graphic menu. The advantage for the viewer is that the site contents (menu) are the first thing displayed and they can make a decision as to whether or not they want to stay without waiting for the whole page to load.

THE BODY

     The body of your page is where the main content will reside. This is the most important section of any page. Content is what lures your visitors to the site. It is also what keeps them coming back. The body of your pages is where you will apply the design features of your site. It will reflect the formatting, color, type settings, and balance choices you make and will be the first indication of whether you have designed with consistency or if you have simply slapped the parts together and hoped for the best. More on this later...

THE FOOTER

     A footer is essential in maintaining continuity between pages. As the name would suggest, it is located at the bottom of every page. The footer typically contains items such as copyright notices, the webmaster's e-mail address (or link), disclaimers, a last revision date, a "what's new" link, counter, or even a site menu. The footers should remain consistent from page to page. While you would obviously not need to place a counter on every page, it is good design practice to standardize this section with at least a simple navigational icon (home button or link) and the site name or authors e-mail address. Because of the dynamic nature of the web, it is entirely possible that a visitor will arrive at your site at a page other than your main menu or index. The easier you make it for the viewer to "get their bearings" the more likely they are to stick around (and come back).

ADDITIONAL ELEMENTS

     Within the three structural elements, you will employ a number of additional design elements. These include lists, indexes, tables or charts, images, callouts (small text "sidebars" that call a readers attention to a particular section or feature). You will also make use of various formatting features like background and foreground colors, tiles, bullets, bars, and other graphics designed to help organize your web pages. In organizing your page content, you will find tables to be particularly helpful (discussed in depth in the Layout and Structure article). These items will be discussed more in the following sections.

UNSEEN ELEMENTS

     There are also some very important design elements that may not be readily apparent to the novice web designer. In the example above, you will notice that the background illustration shows the HTML source code for the example page. This is where you will include important elements like document titles and META tags. Every web page should have a meaningful title. If you look at the top of your browser while "surfing" you will usually see the site name or description. This text is actually contained in the source code of your HTML document between the <TITLE> and </TITLE> tags. Search engines use the text in this tag as one means of indexing your page. When someone bookmarks your page, this is the bookmark title that is recorded. The more precise or descriptive your title, the better your site will fare in the search databases.

You also have the option of placing what are called META TAGS within the head of your HTML source (not the header of your visible document). These tags allow you to identify the author of the page, provide a site or page description, and offer "key words" for use in indexing the page by search engines. Curious?, take a look at the source code for any of these pages and it should become a little clearer. Like the footer of your pages, you should use these tags and titles on every page you generate. A sample of some appropriate source code for our example above follows. Note the placement of the META tags.

<HTML> <HEAD> <TITLE>The Beautiful Inn</TITLE> <META NAME="description" Content="Beautiful country inn nestled in the rolling hills"> <META NAME="keywords" Content="Inn,country,hills,rooms,vacation,hospility"> <META NAME="Author" Content="CIMSERV, INC."> </HEAD>

[next article]