MM3333 Web Design for Graphic Designers

Course Description: An exploration of the process of web design from proposal to production. Students design and produce web sites with web editing software.
Course Length: Winter 2008, 11 weeks. Wednesday, January 9, 2008to Wednesday, March 19, from 1 p.m. – 5 p.m., Room 010.
Course Prerequisites: MM1123 Fundamentals of Web-based Programming
Course Competencies:
Upon successful completion of this course, the student should be able to:

• Apply time and resource management principles to the website production.
• Prepare and use images as effective elements of web design and content.
• Design layouts for a web page.
• Develop logically-structured web pages in Dreamweaver or similar program.
• Identify the essential elements of successful page navigation.
• Create workable links between portions of a page.
• Animate graphical content.
• Construct a form document.
• Produce an online portfolio suitable for your target audience.

Required Textbook:
"Dreamweaver CS3 Bible" by Joseph W. Lowery. (Wiley Publishing, Inc.) ©2007. ISBN: 9780470122.

Download Microsoft Word version of syllabus

Student Evaluation Methods of Assessment:

• Tardies, as well as attendance, will affect your grade.
• Class time will be spent in a productive manner.
• Grading will be done on a point system.
• Points for individual activities will be announced.
• All work must be received by the set deadlines.
• Late work, if accepted, receives partial credit. Please discuss any inability to meet the posted deadlines with your instructor.
• On-time projects may be redone with instructor approval.
• ABSOLUTELY NO WORK WILL BE ACCEPTED AFTER THE FINAL CLASS MEETS WEEK 11.

Instructor Name: Sharon Kaitner, M. Ed.

Instructor Contact Information: skaitner@aii.edu or Sharon@casabasa.com

Instructor Availability Outside of Class: Wednesdays, noon to 1 p.m., room 015, or immediately following class.

Grading:

Grading Scale
25%	Professional Conduct: Class Attendance, Discussion, Participation and Teamwork
40%	Lab Assignments and Homework
15%	Midterm Exam
10%	Final Exam
10%	Final Project
A	100-93		C	76-73
A-	92-90		C-	72-70
B+	89-87		D+	69-67
B	86-83		D	66-65
B-	82-80		F	64 or below
C+	79-77		Late work, if accepted, 50% or less

MM3333 Web Design for Graphic Designers

Weekly Schedule: 1 2 3 4 5 6 7 8 9 10 11

Week 1:

Complete the student survey. Dreamweaver Review: touring the interface

A garden is finished when there is nothing left to remove
- Zen aphorism

Lecture:

• Review of the school’s emergency evacuation procedures
• Dreamweaver Review: touring the interface
• Setting Preferences
• The use of images as effective elements of web design and content.
  • Best practices for images on the Web.

Lab:

• Using Photoshop: a look at Photoshop CS3.

Homework:

• Read Chapter 3 & 4 of Dreamweaver Bible, Touring Dreamweaver and Setting Your Preferences
• In Photoshop, lay out a web page design you are thinking of creating as a final project, 750 pxl wide by 500 pxl high. Use layers for each "part" of your website - the content area, the header & footer areas, each navigation button. Bring the .psd to class next week. Do not flatten the image.
• Refer to this tutorial for more information: Creating Your First Site in Dreamweaver

Interesting Links:

• http://www.stopdesign.com/ - informational, personal blog
• http://www.youtube.com/ - personal entertainment
• http://www.ddj.com/ - informational portal
• http://www.albertlan.com/ - interactive portfolio (high bandwidth)
• http://www.matinee.co.uk/ - interactive graphics business (high bandwidth)
• http://www.drawn.ca/ - a collaborative weblog
• http://photomuse.org/ - photography database (relatively low bandwidth)
• AIGA - professional organization for designers - http://www.aiga.org/

Return to top

Week 2:

Building a Style Sheet Web Page

I have an existential map. It has "you are here" written all over it.
- Steven Wright

Lecture:

• Back-to-basics: HTML, XHTML, DHTML, CSS. Web 2.0
  • What makes a structurally sound website?
  • Navigation can make or break you.
• Dreamweaver continued: using the tools found in the software including the CSS palette

Lab:

• Demonstration on laying out a web page visually for CSS, loosely following the steps outlined by NZ web developer, Steve Dennis, on his website, Subcide.com

Homework:

• Read Chapter 7 Building Style Sheet Web Pages
• Create an external style sheet for your site and upload.

Interesting Links:

• http://www.artinhk.com/
• http://www.madeofjapan.com/
• http://www.toxiclab.org/ various software tutorial

Extra Credit:
I will be offering 2 points extra credit this quarter to any student who votes. If you are eligible to vote, and did not, there will be no other way to get the points. If you are not eligible and still wish the extra credit points, you must create a tutorial demonstrating some software or computer trick or good habit to show to students week 9, to receive the 2 points.

Week 3:

Inserting Images and Image Objects

Find out what they like, and how they like it, And let 'em have it just that way.
- Fats Waller

Lecture:

• Organizing information - "chunking", hierarchy of information, relations and functions. Site design themes. Page layout tools.
• User-centered Design
• Adding simple web animations, rollover images and navbars

Lab:

• Fireworks and Dreamweaver: Creating a sliced-based navigation bar.
• http://www.dwfaq.com/Tutorials/Integration/multi_nav1.asp

Homework:

• Using a graphics software and Dreamweaver, create a slice-based navigation bar (navbar)
• Read Chapters 9 & 10 Inserting Images and Establishing Web Links

Back to the top

Week 4:

Adding Advanced Design Features

Clutter and confusion are failures of design, not attributes of information.
- Edward Tufte, 1997 interview

Lecture:

• Working with AP Divs
• Using Behaviors

Lab:

• Practice working with layers and behaviors
• Individual meetings with instructor

Homework:

• Begin layout of final project.

All past due homework due by start of next class for partial credit.

Return to top

Week 5:

Guest Speaker Bonnie O'Neill from DVP program

Lecture:

• Basic 15 mise-en-scene elements
• The four I's of creativity

Lab:

• Lab time to work on site

Homework:

• Read Chapter 14 Interactive Forms for next week
• Review the basics of web and graphic production for the web. Midterm will cover basic elements discussed in class, such as graphic types for the web, what you first do in Dreamweaver, the basic tags, etc.

Week 6:

Interactive Forms

Lecture:

• [Quiz] based on assigned readings and lectures
• How Forms work

Lab:

• Form exercise in Dreamweaver
• Creating a Favicon
• Spry menu Bar

Homework:

• Read Chapter 24 Inserting Flash and Shockwave Elements
• Add a form to your site. Can be a survey, feedback, or for a membership-based section.

Back to the top

Week 7:

Including Multimedia Elements

Lecture:

• Review of Flash and Director and/or a review of other interactive elements

Lab:

• Adding Flash:
  • Flash to Fireworks roundtrip
  • Tutorial: simple Flash website

Homework:

• Upload lab work to your site
• Begin portfolio section of final website.
• Read Chapter 26 Adding Audio on your Web Page

Useful Links:

• Adding music to your web site: http://www.activejump.com/l-1.shtml
• Sound Guide: http://simplythebest.net/sounds/sound_guide.html

Return to top

Week 8:

Maximizing Browser Targeting

Lecture:

• Search engines and SEO.  Meta tags, keywords, and pages titles.
  • For time is the medium of narration, as it is the medium of life.
    - Thomas Mann, The Magic Mountain

Lab:

• Critique and review of sites to date
• Create the Meta tags and keywords relevant to your Web site

Homework:

• Continue work on personal portfolio.
• Read Chapter 29 Maximizing Browser Targeting

Week 9:

Designing the User Experience

Lecture:

• Discussion:  UX - User experience.  Designing with bandwidth and traffic in mind.  Working with Dreamweaver’s asset management.

Lab:

• Setting up a domain, registration, hosting, ISPs.
• Critique and review of sites to date continued

Homework:

• Beta version of site due next week. Portfolio section due next week.

Back to the top

Week 10:

The Future of the Web

Lecture:

• Discussion: The future of Web technologies and forward compatibility. Web 2.0 philosophy.

Lab:

• Mandatory attendance: critiques of beta versions.
• Lab time to work on final project.

Homework:

• Revise portfolio based on critique. Email all (students and instructor) on what you did, why, and what you chose to not change and why.

Week 11:

Presentations and in-class critiques

Lecture:

• Presentations and in-class critiques. You will present your final project to the class. Speak about technical, design and creative challenges. Use your design documents to illustrate how you targeted your selected audience, and where you were successful.

Lab: Final Exam

Homework: None

Student Progress & Site Information

Click on this individual score link to access scoring information on your completed projects.  Enter your name and id (password) exactly as you provided in the student survey.

If you have any problems, email me.

Class Standings:

Return to top of page

~peace, polka and piwo

Past Student Work:

Summer 2007

La Meisha Karriem

http://lsk371.aisites.com/

Elizabeth Praisewater

http://elizabethpraisewater.com/

Filip Krzanowski

http://fpk371.aisites.com/

Jadelyn Goh

http://www.jadelyngoh.com/

JASON DANIELS

http://jmd373.aisites.com/

ruby galang

http://rag372.aisites.com/

Ignacio Sanchez

http://www.i-sanchez.com/gd/

chandra williams

http://crw372.aisites.com/

Christopher Fuzi

http://cjf371.aisites.com/

Jasmine Harris

http://jih371.aisites.com/

Tina Lauchengco

3starsdesign.com

josiah gonzales

http://jmg376.aisites.com/

Sylvia Aranda

http://sja371.aisites.com/

Adelina Mendoza

http://adm371.aisites.com/

charmaine lagasca

http://cml371.aisites.com/