|
This is the first page visitors see when they arrive at your site.
Opening screens are often graphically heavy, visually appealing
pages intended to entice the visitor. They might display a logo,
a slogan, a single image, a collage of images, or even a bit
of animation. Opening screens can be very effective in setting
the tone for the entire site, however they can also be slow to
load, depending on the visitors Internet connection.
Splash Page
Some opening screens, called splash pages, include only a single
link, which allows the viewer to "enter" the site.
This link takes the viewer to a "home" or main page,
where the full navigation is presented, and the visitor is
required to click again to begin using your site. For this
reason, the message the imagery conveys on the plash page needs
to be compelling. Following are some examples of sites that
use splash pages:
California Certified
Organic Farmers
Clos
du Bois Winery
SRJC
Summer Repertory Theater
Harmony
Habitat Project
Save
the Turtles of Parismina
Southern
Cross III
Opening Screen with Imagery And Navigation
Some opening screens include partial or full site navigation
in addition to being graphically appealing. They might include
a single large image, or a collage of images to draw the visitor
in. Unlike the splash pages shown above, the sites below all
have navigation on the opening screen that allows the visitor
to link immediately to other pages within the site.
Point
Reyes Farmstead Cheese Company
Minnesota
FoodShare
Alvarado
Street Bakery
Slide
Ranch
College
of Agricultural & Environmental Sciences
Minerva
Studios
Healdsburg
Community Website
Opening Screen with Similar Second- Level Pages
Some sites have opening screens that are identical to, or closely
mirror the look of the second-level pages. This doesn't necessarily
detract from the visual appeal, and because this can allow
room for plenty of textual content on the opening screen, or "home" page,
it can result in higher rankings from search engines that "search" text.
It also helps visitors know exactly where they are at all times.
Worm's Way
Planet
Organics
PCC
Natural Markets
Strauss
Family Creamery
Community
Alliance with Family Farmers
Arkansas
Arts Center
Royal
Riviera
Navigation is one of the most important aspects of your site. It
should be intuitive, easy to use and consistent across the site.
As with the opening screen, navigation comes in several different
styles. There is no right or wrong, but the navigational style
you choose should lend itself to the volume and type of content
you plan for your site.
Simple Rollovers
One of the more common navigational options is a rollover effect.
When the mouse is held over a link (hovers), it changes to
display a second image in its place. The image rollover is
a simple way to add a dynamic look to a site's navigation,
and examples are plentiful. Roll your mouse over the links
at these sites to see a variety of rollover effects.
AG Innovations
Network
Kahn
Design Associates
The Farmer-Chef Fisherman-Chef Connection
Wild-Eyed
Alaska
Orion Online
Villagio
Inn & Spa
Primitive
Knitting
American
Photography
Remote Rollovers
Remote rollovers cause the link your mouse is hovering over to
change, and to display or change another image somewhere else
on the page.
Food Routes – sub-menu
appears below main navigation
Creative
Arts Therapies – artwork at the right changes
Women's
Voices – description of page appears in circle
Hospital
Chaplaincy – photo changes
Spring
Hill Cheese Company – descriptive text
appears
Leonardo
da Vinci – watch the eyes!
Pop-Out or Fly-A-Way Menus
This is a type of navigational system allows sub-menus to display
below the main categories. You can click on one of these additional
buttons, and be taken directly to that page. This type of navigation
works well for large sites where you want to give quick and
easy access to each page from every other page.
College
of Agricultural & Environmental Sciences – opening
screen
PCC
Natural Markets – below navigation
bar
Connecticut
Coaches Alliance – to the right of
the menu item
Branch
Brook Park – below each menu item
Photographs, illustration, and web graphics. These are the elements
that bring your web pages to life. Effective graphical elements
run the gamut from very simple and clean, to elaborate and complex.
What's important is that the graphics support the site's message
and don't overwhelm or detract from it.
Different Graphics on Each Page
Some sites display unique graphical images within a consistent
design layout on each page. The color may change on each page
or the image itself may change. Either way, this technique
can add variety to a site while maintaining a consistent look.
Planet
Organics – different image on each page
Lodi
Arts Commission – different image
and color on each page
Cymbic – color-coordinated
links and images on each page
Healdsburg
Community Website – color and image changes
Calloway
Coastal – photograph changes on each
page
Same Graphics on Each Page
Other sites display identical graphics from page to page. This
can have the advantage of keeping the visitor focused on your
message, and confident of their location. Notice how each page
looks the same in these sites except for the content.
Local
Harvest
Grown
in Marin
Organic
Farming Research Foundation
National Sustainable
Agriculture Information Service
Worms's Way
As you surf the web, you'll find photographs displayed in a variety
of treatments. What's important is that photographic images are
treated consistently throughout the site. Notice the different
ways that photos are displayed in these examples.
Planet
Organics
Chemeketa
Community College
Connecticut
Coaches Alliance
Buena
Vista Winery
Effective websites convey a tone, a feeling that the visitor can
relate to (or not!). The graphics, the colors, the fonts, and
layout, are all elements that contribute to the tone of a site.
These sites all have a unique tone. How would you describe them?
San
Francisco Symphony Kids Site
Milberg
Factors, Inc
Chana's
Prayer
Jazz
Continuation
New Jersey
Hospital and Health Care
Jordan
Winery
Tiffany & Company
|