I have provided a starting point for a sample page I want you to create for your client. this page will contain definitions and examples of features which can be used at your site. Please feel free to modify the definitions. All of the examples I have created are of projects done by students in this class. You may want to use projects you have worked on or Web sites you have found by surfing the net. Also, please remember - never show a client something unless you are willing to make it for them. If you absolutely hate splash pages then do not include them in your sample page

When you have completed your page please email the url to me. I will post all the addresses so the other designers can see them as well.

DESIGNERS SAMPLER

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.

Sonoma County Youth - words and images combine to invitie you into this site. This was created in Flash. Since the target market for this site, was teens the flash intor was a good choice.

Sonoma County Office of Film - an animation which cycles through photos, make for a very graphical opening screen.

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

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 Youth

Santa Rosa Foundation

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

Adult Literacy League- each page has a photo on the lower left, the navigation is in the same area although it changes from section to section. There is a quote in the ame place on every page

Navigation Options
Navigation is an extremely important feature at your site. You will want to chose 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 f 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.

NOTE TO DESIGNERS

I have run out of energy before I got everything done I would have liked to include. for example - header graphics. some sites like the SRJC Theatre dept and Puente have a unique header for each page while others have the same header from page to page like sonoma county weights and measures or the ACLU

. some sites like SRT are color coordinated with the color of the button matching the color of the header graphic. Some sites simply exchange a single picture as in the sonoma county horse site http://www.sonoma-horse-council.com/

I would also have liked to do examples of photo treatment and tones created by the site (such as young sites, sophisticated sites, business oriented sites, calm soothing sites, etc.

If any of the designers has time to contribute to these missing area we would all appreciate it.