The first webpage
that visitors see when they go to your site is the most crucial.
If it doesn't grab their interest quickly, they will never bother
to try the rest of your site. Make the "Home Page" look
inviting, interactive, easy-to-understand, well-organized and not
cluttered. Give just enough information to let them know what this
site is going to offer them, and answer their question: "What
use is this going to be for me?"
Cover the basics
get some ideas for the Home Page, look at several "slick"
magazine covers (any high quality magazine). Notice how easy it
is to spot the name of the magazine immediately. What else is
included on the cover? Where are they placed? How are they spaced?
A webpage is different than a magazine cover because viewers can't
see the whole page in one eyeful (scrolling is necessary) and
because a webpage can be animated and offer interactivity. However,
magazine covers and Home Pages are alike in that they serve as
an introduction to the rest of the magazine or website and must
entice viewers to look inside.
design of this magazine cover appeals to youth. The text
and graphics conjure up enthusiasm and a sense of fun.
The list of contents are kept together in the bottom half,
and varying colors and fonts are used to increase the
energy level. My college-age daughter tells me that a
good webpage geared for youth should look like "organized
design appeals to shoppers. The bonus that will excite
shoppers most (free shipping) is easy to spot and is not
crowded next to other words or pictures. Notice the symmetrical
organization of items that invite people to open the magazine.
to computer techies who think logically, this cover is
neatly divided into two columns, but note that this division
is broken at the top and middle to avoid boredom. And
see how the name stands out.
Start with the name
The name of
the organization, church or business should pop out at the visitor
immediately. Its colors, font style, and graphical image should
reflect the purpose and style of the organization that it represents.
Does it need a classy look? A fun feeling? Should it be calm or
colorful? Business-like or entertaining? Never should it be a
plain, dull HTML text-only font! It's too important.
Plan the links
All the main
sections of the website and the most important pages should be
advertised on the Home Page. Do you want them listed simply as
underlined text or viewed
as icons? If the page will have a lot of graphics, text would
balance it out. If you don't have many graphics illustrating the
page, make links out of little images. These icons can be "buttons"
all the same shape and size for a clean, organized look, or they
can be little pictures that represent the pages that they introduce.
Set up the layout
Home Page (and for that matter, all pages) should be easy to use,
simple for the eye to find what it wants, and divided into logical
sections. This rule does have exceptions, but generally the page
should be divided into Introduction (name and brief identification
of what the site is about), Contents (links to the main pages
inside the website), and Masthead (names, addresses, phone numbers,
copyright notice, etc. With all of this, include empty space to
avoid the cluttered look. The visitor's eye should travel like
a guided tourist from one important part of the screen to another,
smoothly, without strain or bouncing.
Fit it all in for easy viewing
expect to scroll down to see everything, but don't give
them the extra work of having to scroll left and right and left
and right to read a whole screen that does not fit onto their
monitor. Don't make your layout wider than 800 pixels (background
graphics can be wider because they don't force the page to go
their width). The only time when it's okay for a page to be wider
than the visitor's screen is when the far-right side of the page
(the part that's gone from view prior to scrolling) is a separate
column that can be read later.
this tutorial as a printable Word Document.
get more ideas for the Home Page, look also at advertisements
in good magazines. How much information is given? How are graphics
used to draw attention to the important information? How much
eye-pleasing empty space is there? How are colors used? How does
the ad invite people to respond? What sizes of fonts are used
for which parts?
your fonts carefully. People are used to seeing important text
in Times New Roman (newspapers and books use it primarily if not
totally), but on a computer screen, Arial (or Veranda) is easiest
distracting for information to appear in fancier font styles.
Use alternate fonts to attract attention to headlines. However,
keep in mind that not all Web browsers can recognize all the fonts
you might use. If you use a font that a computer doesn't have,
it will change it to its default font. WebTV changes everything
to Arial Bold.
the size of the page and the number of images as minimal as possible,
for the sake of faster downloading. The first page should not
frustrate the visitor by taking a long time to start working.
on the first page.
browser is your website designed to work best on? Just because
it works and looks good on IE does mean it'll work on Netscape
or WebTV. You could design for IE, which is currently the most
popular browser by far, and nevermind the others; just make sure
nothing essential fails to work on all browsers.
possible, avoid using the scripts that don't always work.
could post a notice about which browser is best for your site,
but no one wants to find out that they have to download a new
browser. Be accessible to everyone.