By
Chris Harvey, online bureau director,
University of
Maryland Philip Merrill College of Journalism
(charvey@jmail.umd.edu)
B efore
you build a Web site,
think about what you want it to accomplish: To deliver the news? To inform?
To entertain?
You also need to think about who your audience will be. It will affect
the mood and tone of the site and even the types of art and graphics you'll use.
Next think about what main categories of information/news you'll want to
highlight, to begin planning how you will lay out and navigate your site. Major
sections of your site should only be a click away from the home page.
Good site design often starts with a flow
chart,
Roman numeral outline or storyboard. The
sketched pages show what sections and subsections will flow from the home page,
what individual pages will flow from each section, and how they will relate to each
other.
Typically, navigation for major sections will show up consistently
throughout the site—often on the left side of a page and/or the
top and bottom.
Often, designers will sketch out or storyboard their home page and
section fronts in minute detail before building the site. The sketches show where the navigation bars
will go, where pictures and text and external links will
go, and what color schemes
and font styles will be used.
Designers then develop page templates (or model
pages) for the home page/ section fronts/ and story pages to ensure
consistency of colors, navigation and fonts. These templates are used as the
skeletons, or
shells, for every page on a site.
Text for stories and headlines is dropped in around the html code.
Often, designers also put together
templates to package large amounts of information on a single topic. These are often labeled special reports.
To see how some large U.S. sites handled special reports, check out
msnbc.com's and nola.com's coverage of Hurricane Katrina; washingtonpost.com's special report on former President Clinton's
impeachment proceedings, and
CNN's package on the Reagan years.
When designing templates, look at them through a
number of browsers, including a Macintosh (if possible) and different versions of
Netscape, Internet Explorer, Mozilla Firefox and Opera, if possible. Different
browsers set to different users' specifications may display the same exact code differently, which can make Web
design challenging.
When laying out your home page, be sure to put your
strongest pictures, graphics and text on the opening screen.
Make sure your combination of colors and text are easy to read.
Visualizing a large Web site's structure, exercise 1:
When planning a site structure, remember that main sections are often
physically separated from one another by folders you'll create on your computer. Stories within a section
go in that folder. These
folder names show up in the Web addresses when you click on the stories.
(For
instance, national stories might go in the national folder, and thus have the world
"national" in their Web addresses.) Photos may be put in
a folder called photos; graphics in another called images or graphics; audio in
a folder called audio. The home page is typically not in a folder; it stands alone in a
story template, for ease of navigation and Web address
naming.
The home page is often named "default.htm," "index.htm" or
"front.htm," for clarity.
To see how a folder affects the Web address, or URL, of a section or a page within that section,
let's look at a big and well-respected
U.S.
site, CNN.com:
- Click
onto the home page for CNN. Write
down
its URL.
Write
the URLs for CNN’s World
and
Health and Travel section fronts.
What pattern do you see? Why?
Now
write the URL for the top story in the World section, and the top story in
the Health section. What similarities do you notice between the
two, in the way the addresses are structured?
What do those addresses tell you about where the Health and World stories
physically sit on the site?
Planning your
Web site structure,
exercise 2:
Draw a skeletal sketch or storyboard of the proposed home page for your personal Web site or
news Web site, along with sketches of other key pages. Show
where the main
navigation links will go
on each page and what
they will say; where headlines and photos will
go on the pages and
where
text will go. Then, in a Word document,
type a few paragraphs summarizing what content and art you will include on
each of those key pages, and what color schemes and font styles you will use
for fonts and links.
If you are building a news site, you'll want
to make sketches of the home page, each of the section fronts and the
story template.
Beyond the Plan: Launching on
the Net:
Some Internet Service Providers provide free or inexpensive server space for
personal home pages. See AOL.com's Hometown area and Yahoo! GeoCities
for two popular examples. For a more ambitious news site, you'll
most likely need to
register a Web address name (URL)
and buy server space
from a host company.
To register a new Web address name, first check out InterNIC's list
of companies that sell names (registrars). Among them are Domain.com, VeriSign
and RegisterSite.com. These companies will let you purchase a URL ending in .com, .net, .org, .info,
.biz, .us
or .name. Costs
for site registration vary.
For information on Internet Service Providers that sell server space
to host your site, see
iBoost Journal.
If you're launching a high school news site, you've
got another option. The American Society of Newspaper Editors has launched
my.highschooljournalism.org, which, for a
small application fee, will host your news site indefinitely.
Once you register and build your site, you'll want to make sure it turns up in search engines. Yahoo!'s search registration page is at
http://docs.yahoo.com/info/suggest/.
To find out how many sites are linking to
yours, try one of the free measuring sites, such as Marketleap.
Top of Page
Created February 2001. Last updated:
07/18/07 12:07 PM
Copyright © 2001, 2002, 2003, 2004, 2005, 2006
and 2007
Chris Harvey. Reproduction in whole or in part without permission is prohibited.
Feel free to link to this
resource page, but do not cut and paste it onto your own site.
|