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.
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.
University of Virginia
The New York Times
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:
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.
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