CLASS DESCRIPTIONS WEEK BY WEEK:

LINKS OF FINAL PROJECTS SPRING 2008

Evan Esposito

Gayle Malheiro

Chris Hibbert

Lauren Horgan

Piero Manrique

Chutipan Singtokaew

Michael Swaby

William Thompson

Lawrence Vaughan

WESTCHESTER COMMUNITY COLLEGE
The City University of New York

WEB DESIGN
SPRING 2008

Title of Course: 5008 ART 169A WEB DESIGN I LOCATION: TEC 0142A
Professor: Viviana Espinosa email
Lecture/Lab Hours / week: 3    Credits: 3
Time: (Monday 6:00 p.m. - 8:50 p.m.)

A. Description:

Introduction to design concepts and production techniques for the Web. Topics include understanding web environments and technologies, site structures, navigation methods, layout conventions, and the creation of fully functional web pages using HTML. Animation and multimedia considerations are discussed.

B. Prerequisites/Co-requisites:

At least one college-level computer art class, or by permission of the instructor. Valhalla and Westchester Art Workshop, Peekskill Extension Center.

WCC Academic Calendar - Fall 2007

C. Student Learning Outcomes:

Upon completion of this course, the students will be able to:

D. Suggested Texts and/or Supplemental Material:

The Elements of User Experience
by Jesse James Garrett
ISBN 0-7357-1202-6

Designing interfaces: By O'reilly


OTHER REFERENCE MATERIAL: this list will keep growing as the class progresses.... keep checking it out!
Free Adobe 30 day tryouts - I recommend downloading tryouts 30 days before your finals
It is also good to have a good HTML editor when learning web design:
Free TEXT editor for PC   Free text editor for APPLE

you can download picture/flash/video files from here to use for your projects

E. Evaluation and Requirements of Students:

Grades are determined on a 100-point scale

Project 1 :::::: 5 points
Projects 2-8 :::::10 points each
Quizzes (aggregate) :::::: 5 points
Final Site :::::: 15 points
Final Exam :::::: 5 points
Extra credit may be earned for attending selected lectures or art-related events; these events will be announced in class and/or posted on class website 

Web Design Projects will be generally evaluated on:

CREATIVE CONCEPT - idea, intention and meaning. Does the site clearly communicate something to other viewers? 33%
COMPOSITION - arrangement and organization of elements. Is the site easy for a general audience to navigate and understand? Has the artist carefully considered design principles such as balance, proportion, texture, color, shape, and positive/negative space? 33%
CRAFTSMANSHIP - attention to detail. Are the pages functional and fast-loading? Did the artist skillfully manipulate the images? Are all details carefully finished and/or intentional-looking? 34%
Specific parameters and criteria are included on individual project sheets

Use of Technology:

Software used:
Adobe Dreamweaver or GoLive, Adobe Photoshop, Illustrator
Portable media for storing projects, such as a flash drive, iPODS -for storing your documents (no music can be played during class) or CD ROMs will be necessary.

Homework/Lab work

You will require at least four hours of computer work per week in addition to limited class lab time to complete the assignments. PCs and some Macs with appropriate software are available on campus for your use in AAB 403, TEC 142 & 142A, TEC 25B. Lab hours are posted soon after the start of each semester; check schedules and plan accordingly.

H. Outline of Topics:

  1. WEBSITE EXAMPLES
  2. SITE MAP
  3. PAGE LAYOUTS & SITE NAVIGATION:
    Project development for Multimedia: storyboards, flowcharts, wire frames
  4. OPTIMIZED IMAGES: 2D Graphics for Multimedia: RGB color, PhotoshopCS2.
  5. TEXT FORMATTING
  6. Multimedia and the Internet: client/server protocols, http, ftp
  7. LINKED PAGES
  8. FULL PAGES: Creating html documents
    Graphical editors for the web: DreamWeaver
    Issues (intellectual property rights, copyright laws)
    Project Management
  9. ********* Final Project ********* Final Project *********

Critiques

Brief group or individual critiques will occur weekly.

Group critiques will be conducted  as open, informal forums where you will discuss and comment upon other students' work in a constructive, critical, and intelligent manner. There will be final critiques of finished work for all projects, as well as group critiques of preliminary work for certain projects throughout the semester.

I expect you to openly question your fellow students on their decisions in regard to concept, design and presentation. Be prepared to answer for your work - no decision is made arbitrarily, and I want to know why you did what you did, and to explain why you believe your design is effective and appropriate to your concept

Attendance during critiques is crucial. I expect everyone to have their work finished and ready for show promptly at the beginning of class on critique days. Work that is turned in late will be dropped one full letter grade (A work becomes a B; B work becomes a C, etc).

Assigned Readings
The course textbook includes introductions to numerous design concepts and production techniques. You are expected to complete assigned readings in time for class, and you should be prepared to discuss the material covered in the text as well as to apply these principles in your design projects.

Quizzes & Final Exam 
There will be occasional quizzes on assigned readings. These quizzes will test your knowledge of specific facts about web design as described in your textbook and in class presentations. These will be given unannounced throughout the semester.

Final exam: TBA.

ATTENDANCE AND MAKE-UP POLICY
Assignments are due as stated above.
A final assignment consists of all assigned portions: sketches, rough drafts, and finished compositions.
Assignments turned in on time are graded for full credit. Late assignments will be accepted for up to one week following the due dates; each day an assignment is late will result in a drop of a letter grade.
Assignments will not be accepted beyond a week after the due dates listed above – do not wait until the last week/day of class to turn in a semester’s worth of work.
Assignment extensions may be granted on an individual basis depending on extenuating circumstances; it is your responsibility to let me know about such issues before or when they occur, not several weeks after the fact.

Week 1: January 28th -Topic: Introducing Web Design TOP

Introductions
Class Structure and Overview

ASSIGNMENT:
Project 1: Website Examples – shape connection

  1. Make sure you sent me your email address -if you haven't done so- to studio@vivianaespinosa.com to receive notifications about class changes. If you wish you can also send your cell phone # with the name of your carrier, or your email from your cell.
  2. All assignments will be emailed a day before class. Begin the subject of every email with [wcc-sp08] and finish it with what the email is about.
  3. Pick 3 websites: write a paragraph about the reason you pick them.
    Sketch the home page and one secondary page using any medium (pencil, marker, collage, pen, color pencil, etc) the layout in a graphical way.

Week 2: February 4th - Topic: Designing for the Web TOP

Due: Website Examples

• Wireframes, sitemaps, link maps, flowcharts

ASSIGNMENT:
Project 2: Site Map

  1. Decide which of these web themes you will be using for your first project: Portfolio, Global Warming, STI's, Germ Propagation or Why Vote? (not to be confused with for whom to vote).
  2. Draw a site map for your website (practice doing it with Photoshop), but you can also draw it by hand and scan it before class.
  3. Research and bring in (in your flash drive) some of the images you will be using on your site in order to begin to plan how to use them on the site.

Week 3: February 11th - Topic: Information Design TOP

Due: Site Map
DEMO:
• Photoshop class - 1: Shapes, coloring, type, layers, composition, adding outside images, saving.
• Typography
• Identifying navigational structures: Choosing an appropriate navigation scheme
• Eye tracking for web

ASSIGNMENT:
Project 3: Page Layout & Site Navigation: Draft 1

  1. Begin sketching different layouts options for your website. Don't use computers, do them in a sketch book, neat and clearly to be shown in class (Scan them before class).
  2. Read NOTES on page layout

Week 4: February 18th (President's Day) - YES, there is class TOP

Due/Critique: Project 3
DEMO:
• Photoshop class -2: Selections, image coloring, Photoshop handouts: Status bar, shortcuts, Pallettes, Photoshop Basics
• Introduction to Illustrator
• Font use for web. How to choose, examples.(Typography)

ASSIGNMENT:
Project 4: Page Layout & Site Navigation: Draft 2

Week 5: February 25rd TOP

Due/Critique: Project 4
• Photoshop class -3: TOOLS, layers, paths.

ASSIGNMENT:
Project 5a: Produce a layout of your website in Photoshop (the home page and one secondary page)
Save the document in layers (.psd). Upload to server BEFORE class. Present.

Week 6: March 3rd TOP

DEMO: Image Slices, Photoshop Quiz #1

Due/Critique: Project 5a - step one

ASSIGNMENT:
Project 5b - finalized: Finish Photoshop layout of your site together with class comments.

Week 7: March 10th TOP

Due/Critique:
Project 5b - step two - website layout finalized
• Hand in sketchbook (to grade)

DEMO: Image Slices - saving directly from Photoshop to web
• Folder organization for the web and documents

Project 6a: Page Layout & Site Navigation: Final Midterm grade
Using slicing technique in Photoshop (5 page minimum)

Week 8: March 17th - SPRING BREAK - TOP

ENJOY and do your homework !

Week 9: March 24th TOP

Due/Critique:
* Web page navigation finalized (5pgs. minimum)
* Take a screen shot of your design, save as a .jpg and email (subject line: WCC)
* Begin to think about your second website (design, sketches, site map, etc. gather all images necessary to work during and out of class

DEMO: Animated GIF, Linking Pages

ASSIGNMENT: Project 7: Animated GIF

ANNOUNCEMENTS:
1. MARCH 28 - LAST DAY TO WITHDRAW FROM CLASS WITH A “W” GRADE
2. Westchester Community College Annual Job & internship Fair
Wednesday March 26, 2008        10am-2pm  Gym
For detailed information about the firms and the positions for which they are recruiting go to:
www.collegecentral.com/westchesterccjobfair click on employer profile

Week 10: March 31st TOP

Due: Project 7: Animated GIF

DEMO: Begin to work on second website. Your choice of subject is up to you.

ASSIGNMENT: Project 8: Bring sketches of your NEW site map, website storyboards and wire frames. Read CHAPTER 4 reading inside the DOCUMENTS folder (S)drive. To refresh your memory.
Bring in the design of your home page (index page) only to discuss with the class (upload to server).

Week 11: April 7th TOP

Due: Project 8: NEW website

DEMO:
GIF/JPG creation & optimization, Optimize Images.

ASSIGNMENT:
Project 9:
• Read about image optimization.
• Refine the second design of your website,
• If you feel comfortable, begin saving the images on your site individually, you can use the slicing technique, just don't save as htm, save as individual images.

Week 12: April 14thTOP

Demo: Dreamweaver & HTML basics
headings, paragraphs, lists, text properties
Project 9: Text Formatting

Week 13: April 21TOP

Due: Text Formatting
Demo continued: internal & external links, anchor links, mail links, image maps, table structures

Week 14: April 28TOP

Due: Linked Pages
Demo: adding images, specifying colors, the web palette
Project 8: Full Pages + GIF icons
Commenting out code
Linking within the same pages

Week 15: May 5TOP

STUDENT SHOW WEEK/STUDIO
LINK TO HOURS and MAP OF THE BUILDING

Today's class has been cancelled. Remember that the final project is due next Monday the 12th.
Email me if you have any questions about it.

Week 16: May 12TOP

FINAL PROJECT Presentation:
10 Minutes Presentation - critique of design and navigation of the two of your websites you worked throughout the semester.
Your presentation must show the project planning phase (site maps, story boards, etc. in detail)
and an active link to your site (viewable through professor's website)