Layout and Structure

     With a plan in mind, you are ready to address the issues of page layout and structure. As was mentioned earlier, this is where you will decide on many of the conventions you will employ in support of your site metaphor (theme). Good layout not only establishes the consistency of your site, it provides an element of familiarity that will aid your visitors in understanding your message and finding their way around. Lets take a look at some important layout and structural concepts.

FRAMES ANYONE?

     Perhaps one of the most controversial of issues, the use of frames in site design will find ardent supporters and detractors. Like any other element of the design process, you must first determine if using frames adds value to your site or takes away from it in some way. If properly designed, frames add an additional level of organization and structure to your web pages. You can, for instance, have a menu system available at all times by placing your page links in a side frame and targeting the main screen space as a "loading zone" for your content. If you use a large or graphically enhanced menu, frames will decrease the need to repeatedly load the menu with each page selection. To a degree, frames also allow you to guide your visitors along in certain directions when browsing your site. You can think of it like having a choice between buying a stereo with 12 programmed station buttons, or just a tuning knob. It's a whole lot easier when the stations are just a button push away.

     And now... the down side of frames. Most arguments against the use of frames center around the confusion they can create. Taken to the extreme, a poorly designed "framed" site can have browser windows popping up all over the place (a navigational nightmare). To be effective, hyper links must be targeted with consistency. The loading of new windows must be kept to an absolute minimum. Another problem with framed sites is that they can have an adverse effect on your visitors ability to print or bookmark a page. Like most "problems" there is a solution to this but will all of your visitors be savvy (or patient) enough to work around the issue? The bottom line is... do the frames add to the appearance or utility of your site? If in doubt, don't use them or at least offer your visitors an optional frameless version of your site (another design issue in itself).

LEARN TO DRAW

     One tried and true method of developing an effective page layout is to grab some paper and a pencil and simply draw it all out. You don't have to be an artist to place all of the pieces in some coherent order. Take some graph paper and map out (in terms of pixel height and width) what screen dimensions your site will cater to. Next, decide what screen space you will allot to page titles, headers, text, graphics, menus, and other elements. By doing this, you can get a better sense of the balance (or lack thereof) your page will have when all of the parts are put together.

     Now take this all a step further and draw out the structure (hierarchy) of your web site. Much like an organizational chart, you can draw boxes to represent each page. Connect the boxes only where a menu or navigational icon will connect them on the actual site. Once everything is drawn out, examine your structure for dead ends or excessive embedding of pages (a page that is several "back clicks" deep into a primary page or section). These "drawings" will come in handy as you decide on a navigational method for your site. They will also help you develop a site map for overall planning and as a navigational aid for your visitors.

TEXT AND GRAPHIC ALIGNMENT

     There are a number of ways to align text and graphics. The important thing is that they must be aligned. Haphazardly placing page elements without regard for flow and consistency will ensure viewer confusion and a hasty retreat. Align page elements to help focus your visitors attention to areas of importance. Used sparingly, lines, boxes and other graphic "helpers" can steer your viewers in the right direction. The problem is, they too must be aligned. It is a good idea to follow alignment conventions in use by printed media. This typically means left justified text... the use of columns or paragraphs for large text areas... and the strategic" placement of graphics to enhance the written word. Aside from the usual justification and alignment tags, you can also use tables as an organizational tool for added control over your text and graphic content (discussed next). The example below illustrates the drastic difference alignment makes in presenting your message. The same sample text and graphics are placed indiscriminately on the left and aligned on the right.

[Page 2] [Next Article]