Teams Assigned - "to do"- designer sampler

When asking clients to choose items for their web site it is useful to provide them with terms and examples.

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

This Web page focuses on 3 areas of web page design, the opening screen or screens, site navigation, and speical features such as a slideshow or random image.

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.

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

ArtQuest - Santa Rosa High School

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

Womens Recovery Services

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

Womens Recovery Services

Betty Biodiesel - color of button changes when you rollover

Willow Creek Treatment Center

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.

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

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.

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.

Hallberg Butterfly Gardens - drop down menus appear from the navigation along the top of the screen.

Special Features

Slideshow This is a great way to show a series of images in a small space

Heritage Homes of Petaluma - slideshow in the upper left corner.

Flash Slideshow

Sonoma County Office of Film

Random Images - each time the page loads a different image loads in a specific area of the screen, hit reload to see the effect.

SRJC Culinary Training Program

SRCJ CIS department

Gallery of images - small thumbnails that link to larger versions of the image

Sonoma County Office of Film