Griffin | Web Design 2
 
Resume Table of Contents  

Web Design 1/2

Web Sites withOUT Sponsors
(Project-WOS)

 
State Standards
 
  • WD 2.1: Students plan a web site.
  • WD 2.2: Students design and develop a basic web site using HTML/XHTML.
  • WD 2.3: Students utilize graphics and multimedia in a HTML/XHTML document.
  • WD 2.4: Students create links within a HTML/XHTML document.
  • WD 2.5: Students create and format a table in a HTML/XHTML document.
  • WD 2.8: Students demonstrate knowledge of content management.
  • WD 3.1: Students demonstrate the principles of good design and graphics utilizing commercial based software. (H.9.1)
  • WD 4.1: Students demonstrate management and communication skills to maintain a web site.
  • WD 5.1: Students recognize and apply proper legal issues and follow proper ethics.
  • WD 6.1: Students use commercial Web design software (i.e., Macromedia Dreamweaver) to create attractive Web pages.
Chapter Objectives
 

Student will:

  1. Make it as quick and easy as possible for people to receive information.

  2. Apply:
    1. knowledge of HTML
    2. knowledge of Dreamweaver
    3. knowledge of Fireworks
    4. knowledge of design and
    5. knowledge of the Web Development Life Cycle to:

      1. Determine customer communication needs. (What do they want on the site?)
      2. Determine design needs. (What do they want it to look like?)
      3. Using design principles create a web site that fits those needs.
      4. Make adjustments according to the customer's needs.
1. Project-WOS 1A Assignment
Duration: moments
 
  1. Create a NEW folder called "PROJECT-WOS". Save all future PROJECT-WOS assignments in this folder. Remember, no spaces or extra periods in folders or filenames.
Background

Based on your previous web design experience you have been hired to develop a web site for __________________________ (hypothetical sponsor name). Your site must include at least 4 pages and allow for the communication and design needs of your customer.

Note 1: Second 9 Weeks Web 2 - Your project must include Flash and DHTML.

Note 2: As an employee you are getting paid $15.50/hour to create this web site. In order to get paid (or receive points) at the completion of this project you must submit 1) an invoice with 2) a spreadsheet recording: Name, Date, Description, Hours (broken into 15 minute intervals e.g. 45 min), Amount, Rate, Total Cost. Create a spreadsheet tracking activities and hours. Update each day.

Name      
Date Description Hours Amount
1/10 Project Proposal 8:30 - 9:30
$15.50
1/11 Design Document 8:30 - 10:00
$23.25
       
Total Project Cost 
 
2. Project Proposal
Duration: 1 Period
 

Create Proposal Memo

Write a professional Project Proposal using the content grading rubric. (2-3 pages max.) All components listed must be completed before the proposal will be graded. Review and check each proposal element to ensure completeness.

Print and fill out the attached grading rubric. thumb

CONTENT
RUBRIC -->

Example Proposal Memo 1: Your memo will be to me, from you, describing 4+ web pages.
Example Proposal Memo 2: Crull example.
Example Proposal Memo 3: FHS Choral Department Web Site

If you are creating an animation please use the Animation Project Proposal Rubric.

  1. Provide as much detail as possible. Anyone should be able to read this proposal and have a very good understanding of what it will and will not cover. I expect enough detail that a non-techie could read the proposal and be able to accurately restate the details. ("Your grandma should be able to explain it to me.")

  2. One task that will help in the development is to provide print screens from current professional sites that include components of what you would like to complete. Please keep the design SIMPLE (i.e. something you know how to do.)

  3. Have another student review the proposal and initial. (If you initial work that has mistakes, YOU may loose points.)

  4. Hand in the Rubric and Memo together.
3.

Design Doc, Flowchart, & Sample Screens (WOS)
Duration: 1 Period

 

Create the Design Document Memo using the design grading rubric. Include a flowchart, hand drawn sample screens, and a design analysis for the project. This is a separate memo and signature from the proposal described above. Staple this grade sheet to ALL sections! All components listed must be completed before the proposal will be graded. Review and check each proposal element to ensure completeness. Neatness counts!

Print and fill out the attached grading rubric. thumb

DESIGN
RUBRIC -->

Design Sample 1: Crull Design Memo Example
Design Sample 2: Other Crull Design Memo Example
Design Sample 3: FHS Interact Club Design Memo Example

If you are creating an animation please use the Animation Design Doc Rubric. Animation Design Doc Sample. More information on storyboards.

I - Memo: Create a memo requesting your sponsor to review and change the attached Flow Chart and Sample Screens.

II - Flowchart: Show how each screen should link using a flowchart. If your project is not a web site, outline tasks to complete project. See Page 127 of the Non-Designer's Web Book. This shows a great example of what it should look like.

chart

III - Print Screen - Paste sample of site you intend to use for inspiration. (Your hand drawn screen should match the print screen.)

IV - Sample Screens: Draw each screen by hand. (Do not use a computer for this task.) If the same design continues on subsequent pages, you may draw smaller thumbnails. There should be at least two screens on one page. Partial Credit will be given for sloppy work.

V - Application of Design Principles: Typed on a separate piece of paper in detail outline how you used each design principle.

Do not say the page shows good contrast or alignment. Do not tell me that colors and shapes are repeated. Tell me what colors and what shapes are repeated.

Contrast Include a few sentences on what draws your eye to the page. Make sure to talk about text size and color. What is different on the page? Why is it different?
   
Repetition Include a few sentences on how design is used to add visual interest. What colors and shapes are repeated on the page or in the site?
   
Alignment

Include a few sentences on the visual connections from one element to the next. Talk about horizontal and vertical alignments of elements as well as if text is left, right, centered, or full. What is the primary text alignment? Are there mixed alignments? Should there be mixed alignments? Is there a lot of centered alignment?

   
Proximity Include a few sentences on how design is used to organize the web page. How many visual elements are on the page?
   
Eye Flow Where does your eye initially focus? Where does it go from there? Is it drawn off the page at all?
4. Design, Code, and Dreamweaver
Duration: 4 Period
 
 

Code, code, and more code! Make sure you use the design principles and include an appropriate level of content within your pages. (That means a lot of content!)

  1. See notes on the 5-Pager page.
  2. Draw the table for page 1.
  3. Insert the proper number of columns and rows.
  4. Merge columns and rows to match design.
  5. Insert Image Placeholders so you know what sizes to make your images.
  6. Create properly sized images in Fireworks. Do not stretch image. Add text on image as needed.
  7. Create logo in Fireworks as needed
  8. Complete Page 1. Check grading scale below.

    Make sure your first page is spot on and then...

  9. Save. Then Save As...Page 2.
  10. Change pertinent information. Make sure Page 2 is spot on then Save then Save As...
  11. ...Page 3. Change pertinent information. Save then Save As...
  12. ...Page 4. Change pertinent information. Save then Save.
5.

Review and Rework
Duration: 1 Period

 
 

Print Screen your inspired site and your finished first page into the document. I'll review and grade your project and possibly request changes.

Use the linked WOS Grading Word Document. thumb

WOS Grading Document -->

Grading:
Match the web site inspiration closely. When in doubt ask the teacher.
1. San Serif / Fonts Match  
2. Table Size Matches/Border = 0      
3. Text size small (except in photo or headings)    
4. Column widths are close to the
sample (i.e. 300 x 3) 
 
5. Picture sizes match      
6. No centered text  
7. No PNG's  
8. No text on an edge  
9. HTML Titles (all pages) - No Untitled's  
10. horz & vert alignment  
11. All links work  
12. Page-2 linked / no movement       
13. Page-3, 4, 5 linked / no movement    
14. Portfolio Updated  
15. name, period, date, class (first page)  
Total  
 ___ 20 points
6. Invoice
Duration: 1 Period
 

As an employee you are getting paid $15.50/hour to create this web site. In order to get paid (or receive points) at the completion of this project you must submit an invoice.

Name      
Date Description Hours Amount
1/10 Project Proposal 8:30 - 9:30
$15.50
1/11 Design Document 8:30 - 10:00
$23.25
       
Total Project Cost 
 

Notes:

  • See Templates on Office Online for examples.
  • This is a word document. Not just a spreadsheet of hours.
  • Only products are taxed, not service. (i.e. Web design work is not taxed.)
  • Include:
    • Logo
    • Your business address
    • Date
    • For
    • Bill to address
    • Table
      • Dates
      • Description
      • Hours
      • Amount
      • Total
    • Checks payable to
    • Contact info
  • You do not bill for creating the invoice.
  Invoice
Sample
Invoice -->

Additional Resources

A. Online Textbook Resource

top