Term 4 Final Project: Phases 2 & 3 Site Map, Color & Fonts

Term 4 Final Project: Business Web Site

Phases 2 & 3: Site Map, Color & Fonts

Overview >    Phase 1 >   Phase 4 >   Phase 5 >   Phase 6 > 

Recommended Reading: Web Menus With Beauty and Brains
by Wendy Peck

Wendy Peck also writes a great weekly column for
WebReference.com: Search> Wendy Peck

Web Menus book image
 

Small story board image

Click for 760x460 image

Dreamweaver Site Map View: Final Project

A site map or storyboard is much easier to create if all the menu areas for a site are determined first.

It is important to work closely with the client and have them
sign off on the completed map.

Changes made after navigation images and interior comp pages are created are very time consuming to correct.

Many designers charge extra for changes to the site map after a
certain point in the design process. Usually after the final comp has been approved.

Click here to see larger image

Four possible color "moods" for the Tropic Resorts site.

Color swatches combined into a "palette" in Photoshop.

Color swatch image: relaxed

Swatch "relaxed" used in comp 1 & 2



Color swatch image: cool

Swatch "cool" used in comp 3

A good site design will set a consistent mood throughout the entire site.

Mood can be set with color scheme, font styles, and graphic material.

The mood for this site will emphasize a light, warm tropical feel.

Features important to advance the mood required are: good jpgs; nice color combo; fun, casual fonts and graphics.

Learn more about using color on the Web.

Comp layouts

 
  Tropic Resorts, inc font sample

It was decided to set a fun, casual mood for the graphic fonts. "Ravie" was chosen for all graphic menu fonts.

Regular text font Verdana was chosen for its good readability at small sizes. Renders well on the Web and keeps download size small as screen graphic fonts are not needed.
Logo image

The client had a logo already in use. It was incorporated in the site design.

The colors were changed to coordinate with the site scheme.

Original logo color scheme


Menu Planning:Menu navigation image

Menus should look balanced with the rest of the page
and be consistent throughout the site for ease of use.

Always include a text navigation area for users with accessibility issues on each page of the site.

Menu Types:

  • Category or main menu
  • Subcategory menu-used on larger sites
  • Maintenance menus-one example are "breadcrumb" links; not usually on home page
  • Text menus-should repeat any graphic menus on the page
  • Teaser menus-a print industry term; can
    appear anywhere on the page/site
Menu areas for
Tropic Resorts, inc.:
  1. Category menu: Accommodations, Rates, Reservations, Things To Do

  2. Maintenance menu: Home, Brochure, Contact, Map

  3. Teaser menu: Travel Tips, Specials, Coming Events, Weather, Photos, Site Survey

  4. Text menu: Home, Accommodations, Rates, Reservations, Things To Do,
    Brochure, Contact, Map

 

Home   |   Designs   |   Current Projects  |  Resume  |   Related Links

©2002 GDLdesigns@www.gwensdiner.com