What to Include on the Home Page

Provided by the Good News Web Designers Association

Return to Directory of Tutorials or GNWDA home page

   
1. Grab their interest
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?"

2. Cover the basics
To 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.

EXAMPLE 1: The 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 chaos".
EXAMPLE 2: This 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.
EXAMPLE 3: Appealing 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.

3. 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.

4. 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.

5. Set up the layout
The 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.

6. Fit it all in for easy viewing
People 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.

 

Download this tutorial as a printable Word Document.

EXTRA TIPS

To 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?

Choose 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 to read.

It's 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.

Keep 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. This means you might want to avoid using music and JavaScripts on the first page.

What 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.

If possible, avoid using the scripts that don't always work.

You 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.

 

Return to Directory of Tutorials or GNWDA home page