If you've been following the workshop through each section, you have already picked up a few design tips for your web pages. We have covered the basic design enhancements available through standard HTML tags. You know from the Images section that images can have a tremendous impact, but should be used efficiently and wisely for the most desirable effects. What about the page as a whole? How long should the page be? How much information should it carry, and how do you chop and cut your materials to decide what information should be on which pages? This section is devoted to a few tips for building a visually pleasing and well-organized web site. The tips that follow are, for the most part, suggestions. Page design is largely a function of both personal taste and the purpose of the web site. If you are building a site just for fun, it's up to your imagination to determine the look and layout, but if you are compiling an informative site of any variety-- academic, professional, or corporate--certain standards of style will provide invaluabe guidelines and ensure an effective and appealing layout.

First Impressions: The Home Page

As with any introduction, the home page is the crucial component of your web site. It is your virtual handshake, and a limp greeting can be an instant turn-off. This page is a difficult one to conceive, since it's hard to know how much to say while introducing your web site. Remember that "less is more" in this arena. A home page that contains paragraph after paragraph of salutations, explanations, and ruminations is a lot like listening to an endless narrative of vacation slides, and most of the information you present will be lost on your audience as they either scroll to the pertinent links or just abandon your web site altogether.

Your Home Page is not Your Personal Home Page

If you are managing a site designed to present information and geared in any way toward public use, you'll have to understand that your home page is not the place for pictures of you, your friends, or your dog. Nor is it the place for your favorite jokes, movies, and off-color web sites. We all want to infuse our web sites with our own personality, but this process does not include posting a bio on our home page. There's no law that says you can't have as many home pages as you want, as we'll see in a moment, so make a personal home page for all the fun stuff you may want people to see, if they decide they want to know all about you. By all means, make yourself a personal page and have fun with it, but move it one level beyond your introductory home page.

Maximum Impact

Effective home pages are small, concise, and visually arresting. Think of them as the cover art for a novel: it catches the eye and hints at what unfolds in the pages behind it, but its impact strikes you with one glance and then leads you into the book itself. This is your chance to demonstrate your knowledge of good image use and advertise your eye for color and design. Remember that style points do apply, even here. An opening image that takes ten minutes to load is not worth the wait. Keep the images small and clean, and be certain that they are appropriate to your web site. They do not necessarily have to work as links, but they should possess a clear relevance to the purpose of your site. Corporate logos, an Adobe photoshop creation, or an eye-catching photograph all fall into the "good use" category. Netscape background and text colors also enhance the look of your home page.

Textual information on the home page should ideally be kept to an absolute minimum. The words that appear should avoid stating the obvious, such as "This is my home page," or "Welcome to my space on the web." Let the look of the page indicate that the page is yours and it is indeed the "mission control" of your web site. The best way to achieve this look is to understand that you don't have to present any information at all on your home page. The most your page needs to convey is:

Your name or Company/Institution/Organization name and brief mission statement or introductory "hook," if applicable
Links to other pages on your site, and a brief description of the page, if desired
A "mail-to" address for comments and questions
A "Last updated" line to indicate the currency of your information

A home page design like this allows your audience a quick introduction to your site and a simple yet highly navigable home base from which to browse your site. The home page points the way, and the onus of conveying information falls on each subsequent page.

Some examples:
Monticello
University of Virginia
Adobe Software
The New York Times
Comedy Central

Cut and Paste: How to Divide Your Information

Dividing and distributing your information depends upon the information you need to convey. Beyond the home page, all web sites will differ--sometimes dramatically. The first organizational tip for the layout of your web site is to think of it as a hierarchy. As unpopular as that concept may be in many areas, it works well with your web pages. If you need a visual aid, take a look at the pyramidal structure below:

This is merely one way of viewing the contents, but keep it in mind as a general concept for your overall design. The home page stands alone at the first level, but the pages multiply as you move through each successive level. Some levels are short and contain only a few pages, while others feature many pages, but the concept is that the user can click through the brief upper layers to get the information desired.

Site Organization: Divide and Conquer!

If you have many different pages on your site, this is the most effective (and most considerate!) way to present your information. For instance, let's say you have an archive of journal articles, a course syllabus, an internet resource page, and a personal page. You'll have four pages catering to four different purposes and audiences. In order to give your audience the ability to get to the information they're looking for as quickly and as efficiently as possible, you'll need to divide each into its own sub-page. You would then have a home page with links to another home page for your journal archive, one for your course syllabus, one for your web resources, and yet another for your personal information. This way, you will be able to create four more eye-catching home pages with only the information pertinent to their individual subjects and you'll avoid bombarding users with an overwhelming amount of information on the home page. Additionally, you will gain the advantage of capturing interest by pointing users to all the available locations of your page without giving away too much information about what they will find once they get there. This kind of layout works well on many levels and you can use it to build and advertise an efficient, exciting, and very useful web site.

Each sub-home page can point to further pages not immediately accessible from any other page. Let's return to our journal archive again. Not only would this page feature links to groups of articles organized by volume or topic (or whichever organizing principle would be most appropriate), but it could also feature a link to the home page of the journal itself or related locations on the web that are separate from links in your internet resources lists. You can use these sub pages to build mini web sites relevant to the particular interest, issue, or idea you choose to display. There's no end to the amount of web work you can incorporate into your site, but remember to work efficiently in each instance. You can have a home page for your journal archive which points the way to groupings of articles and other internet sites of related interest, but don't build a home page for each article. Likewise, if you have only one or two articles to display, perhaps you might find another location for them, such as your personal page, your resume or portfolio, or your course syllabus, in our example. Sub pages should be organized around specific topics, interests, and information, and each should be substantial enough to stand on its own as a valuable and useful page. A web resources page with three links is useless, as is a personal page with one picture or a special interest page with one paragraph. If that's all you have to your web site, you'd be better off with only one page until you gather a more substantial amount of material.

As a final tip for all of your sub-home pages, remember to provide links to the other pages available on your web site. To do this, you might use a Netscape table, explained in the Advanced HTML section, with the names of your other pages, but you might also use small graphical icons at the end of your page or just write out the names of the pages across the bottom. This keeps your other pages present and accessible to every user. It's good design style, and it's a good way to encourage traffic on pages you'd like to promote.

A Few Decorating Tips

While we're on the subject of page design, we may as well address one aspect of design that is so prevalent and noticeable on the web: all those cool backgrounds! It's easy to get carried away with the variety of colors and patterns you can find out there--not to mention the backgrounds you can scan for yourself. Remember though, if your site needs to serve a function beyond just announcing your name, your hobbies, and your favorite web sites, your background is as important to the overall look of your page as anything else. Backgrounds which consist of intricately detailed photos or graphics may seem like a good choice, but once you begin dropping text on top of them, they may not be the best choice. Be kind to your audience. If your web site is a jumble of different backgrounds which interfere and compete with your text, you'll be turning people away from your pages. Similarly, if you are building a site for marketing or advertising purposes, having page after page of novelty backgrounds will seriously detract from the impact of your information and images. If you're playing with your personal home page, try an exotic background and see how you like it, but for anything else, avoid them at all costs. The simpler and more consistent your background colors and textures are, the more professional and more effective your web site will be.

That said, how do you find them? It's much like searching for images. On the internet resources page of this workshop, there is a listing of background archives. Once you find one you like, just follow the instructions for saving an image to your disk, and you'll have it. You can also scan in an image or a shape or object for your background, or you can create a background in Adobe. Once it's in your public_html account, you can insert it into your HTML document using the following tag:

<body background="filename">

This command is inserted after the </head> and </title> command pair and before the <body> tag. Keep in mind as you search for images that you don't have to determine the size of your background image. All you need is a segment of a pattern, color, or texture, and Netscape will repeat the image until it has covered the browser window with your background. If you plan to use a large image or a picture, be warned that the body background command will repeat the image as often as necessary to cover the screen.

As you plan your background, remember also that you are dealing with image files, and you need to be certain that they are in either .gif or .jpg format and are small file sizes. They will load like any other image, and large, complex images will seriously hamper load time.

MISSION 3

Build yourself a new page--you could build a portfolio page for your on-line work, or you could build a personal page to showcase yourself a bit. If your home page already is somewhat of a personal page, make a new page called home.html, rename the old one something else, and then go to work making a high-imapact home page for your web site. Try to have at least three sub pages you can link to from the home page, and make sure that at least one of those pages has a few subordinate pages of its own. Surf the web for inspiration and other design influences.

Course Assignment Suggestion

On the next page, you'll find a listing of all the places you can go to search for images, backgrounds, colors, and further HTML and web page design information. If you're ready for advanced HTML material, go ahead to Advanced HTML to learn about frames, tables, forms, and client-side image maps--all Netscape extensions which will really add some interest to your web site.



Sponsored by the American Studies Group at UVA ©1996
Maintained by Joshua Johns