DESIGNERS SAMPLER

When viewers come to a Web site, they usually have a goal in mind. Depending on the nature of that goal, they are likely to be in a particular frame of mind. Anticipating the viewer's initial mental state can help you decide what style to use to present your content.
For example, if I'm looking for medical information because I'm ill, I may be feeling anxious and tense. I'll be attracted to sites that use soothing colors and language that is easy to understand — sites that set an emotional tone of trust and respect for my human experience. If I'm looking for a joke of the day, on the other hand, I'll want a site that will lift my spirits, surprise me, be outrageous, and make me laugh.

This Web page focuses on 3 areas of web page design, the opening screen
or screens, site navigation, and tone or feel of the site.

Opening Screen
This is the first page visitors see when they arrive at most sites. The opening
screen is also called the "home" page or "main" page. Opening screens have
several looks

1. A splash page
This is a web page which contains a single image, collage, or flash animation
and only a single link which takes the viewer to a home or main page. A splash page is meant to entice the user to see what's behind it. Often the splash page Splash pages can set a tone for the entire site and contribute to your "cool" factor, however they can be slow to load and make folks click twice before they can begin using your site.

SRT - when this site was created the client wanted a "dramatic' opening screen and wanted all the pages to be black or red. (colors they felt were dramatic). The clients also wanted to emphasize their logo and the photo which is associated with SRT. The designer compromised by creating a solid black splash screen which set the tone for the entire site. Once you go beyond the splash screen you see a home page which looks very mush like all the other pages at the site. The pages are white with just a hit of black and red.

Earth Quest - 3 images,strong curves, a distinctive logo and an enticing slogan set the tone for this splash page. When you place your mouse
over the images they brighten. This is called a rollover.

The Turtles of Parismina site uses a collage as a splash screen. The client
wanted to include numerous photos of the area and the turtles. they felt a heavy graphical splash screen would help entice visitors to join her cause. After viewing the splash screen you see pages which are fairly simple graphicallyand have a large amount of content and complex navigation.

Harmony Habitat Project , - was intended to be used by and showcase the
work of young children. An animation of a sunflower was used on the splash
page. The intent was to entertain and excite children and adults with the
growing sunflower. Once you enter the site a large sunflower collage is
displayed along with the site navigation.

Tomorrow's Leaders Today - this site was intended for a teenage audience, and a flash animation and bright colors were used to set the tone of a high energy site. The home page has a single photo of the students, the site navigation and continues the bright orange and purple color scheme.

2. A graphically heavy page which includes a collage or several images.
The advantages of this type of site is that it allows you to draw the visitor in, make a positive first impression, and share visual images of your organization, The disadvantage is that it may take longer to load for folks with slow modems

SRJC Theatre Arts - several images combine with a few lines of text for a very graphical opening screen. Navigation displays at the left.

SRJC Tech Academy - Several distinct images are displayed to create a high tech look for the site. Unlike the splash pages shown above there is also navigation on this page so the visitor can connect immediately into the
remaining pages.

Sonoma County Office of Film - a collage of photos, the directors chair in the background at the left, and the image behind the navigation at the right make for a very graphical opening screen.

Puente - bold colors and images were used to draw latino teenagers into this site.

3. Some clients prefer a single image on the opening screen.
This is a simple clean look

Sonoma County Horse Council
Friends House
Santa Rosa Foundation

4. An opening screen which looks almost exactly like the other pages at the site.

Office of Commission on the Status of Women - each page has a collage
in the upper right corner, navigation at the left and text in the middle. the collages are quite difficult to do well. The designer did an excellent job.

Trillium - The image of the trillium flower and simple color scheme make for a fast loading and easy to navigate site.

Sonoma County Parks and Rec Department

Navigation Options
Navigation is an extremely important feature at your site. You will want to choose a navigational system that is easy to use and accurately directs the
visitor to the correct area of the site. Listed below are 3 navigational options.

1. simple rollovers
one of the more common JavaScript on the web today is the image roll over effects. When the mouse cursor hovers over a link it changes to display a second image in its place. Used sparingly, the image rollover can add a dynamic look to you site without much effort.

SAY - the text color changes and an asterisk appears as we roll over
the navigational items.

Web 101 - button color changes as we roll over the link.

SRJC Web Training Program - at this site the buttons color changes as you roll over the link. the button also increases in size. When you visit one of the second level pages the button for that page is larger and dark blue.

SRJC Theatre Arts - as we roll over the text a button appears behind each word to draw attention to the link.

2. remote rollovers
a remote rollover causes a graphic to appear in another location on the Web page when your mouse rolls over a graphic. Remote rollovers cause the image your mouse is over to change and cause an image somewhere else on the page to change as well. Because an image changes somewhere else on the page the term "remote" is used.

Lomi - the 3 main categories near the top of the page will produce sub menus as you roll over each item. this helps visitors understand what information will be included in each section.

Creative Arts Therapies - the button color lightens and the image at the right also changes.

Women's Voices - text color changes and the inner image within the circle
changes as we roll over the navigational items.

Hospital Chaplaincy - I lf you want to include several images and don't have
room to include them on the screen, use a remote rollovers to display a
different image whenever a button is accessed.

3. pop out menus
this 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.

Health Care for all Californians - the "about us" campaign" and "resources" section all contain sub menus.

Save the Turtles of Parismina - the pop out portion of this menu displays to the left of the button.

Sonoma County Office of Film - at this site the navigation is at the right and the pop out menus display to the left of each main menu item.

Photos -Photos add depth and interest to a page, many times providing the focal point. Different effects are applied to create interest and keep from having that "slapped on the page" look. Following are 3 different photo effects

Sonoma County Office of Film transparency used
Sea Charmers softened edges
Five Points 1 picture divided into 3
Chicago Chefs outlined with drop shadow

Slide Shows-Allow you to string multiple images together to create animations for your multimedia productions. The presentations can include sound, animation, film, and text.

Sample Slideshows - This page shows different examples of slide shows
created with different types of programming languages.

Logos
Logos can draw attention to your site and be subtle at the same time.
The following sites have some unique logos.

The New School for Massage
AtHomeNet

Header Graphics
Header graphics can be very appealing and carry a theme throughout your site.

SRJC Tech Academy
Tomorrow's Leaders Today
Health Care for all California
Routes For Youth
Awapuhi Health Sanctuary

Tone - Sets the look and feel of your site (such as young sites, sophisticated sites, business oriented sites, calm soothing sites).

1) Style
Notice the "feel" that these sites convey

Olive Garden casuel
Hospital Chaplaincy soft
Niebaum-Coppola sophisticated
Blackbird Restaurant clean
Abra Marketing high tech
Robert Koch Gallery sophisiticated

2) Color
An important visual impact on the emotions of the visitor can be achieved through combinations of color

Hague Quality Water bright with neutrals
Sea Charmers pastels
Olivisions muted
Medley monochromatic
Shyla Oru contrast
U.S. Marine Corps neutrals
Saint Helena Road Wineries warm
Aerodyne cool
Bright
IPL Kidplace
Crayola Crayon
4Kids
Harmony Habitat

Business Sites -When viewers come to a Web site, they usually have a goal in mind. Depending on the nature of that goal, they are likely to be in a particular frame of mind. Anticipating the viewer's initial mental state can help you decide what style to use to present your content.

Apple
Sony
Hewlitt Packard
Chandra Xray