Introduction to Web Design Syllabus

Instructor

Ben Glassman

Office/Hours

By appointment only

Contact Information

Course Description

This course explores the fundamental design aspects of, and basic construction techniques for, creating web pages. Using Photoshop, you will consider how design parameters—form, color, composition—impact the functionality of a web page. Through a formal introduction to both an authoring software application and basic Hypertext Markup Language (HTML), you will create well designed and properly functional web page projects. The technical issues of file size, correct resolution of images and fast loading content will also be covered.

Pre-Requisite(s)

MMG-101 OR MMG-102

Course Objectives

This course is geared towards teaching the graphic design concepts and skills essential to designing professional websites. Students will explore how graphic design theory applies to the web medium, learn how to best utilize the tools of the trade (Photoshop and Dreamweaver) to create production-ready website designs and receive an overview of how to plan and execute successful web design projects as a freelancer or member of a team.

Student Outcomes

Upon completion of this course, the student will have:

Assessment

This is a project-based course where the assignments are designed in such a way that you must demonstrate your skill and expertise with Photoshop and Dreamweaver as well as your mastery of the design concepts covered. As such, your final project, toward which many of the assignments during course will contribute, will count for a large portion of your grade.

Evaluation

Each of the three projects (Band website, MySpace redesign/Portfolio Site Design and the Final Project) will include a project overview document outlining how student work will be evaluated. A detailed breakdown of how final grades are determined and the grading scale used can be found in the Guidelines for Evaluation of Student Work section of the syllabus.

Course Policies

Assignment Submission

All assignments for this course other than wireframe sketches must be submitted in electronic format via e-mail to bglassmanccREMOVETHISBEFORESENDING@gmail.com. Assignment submission emails must have a subject line in the following format:

MMG 120: Project Name (example: "MMG 120: Final Project")

Assignments submitted without this email subject format will receive a 10% reduction in grade. Specifics on acceptable file formats will be addressed on an assignment basis.

Attendance/Absence/Tardiness

The material for this course is delivered primarily through in-class lectures and labs, and therefore attendance is very important. Any more than 3 total absences or more than 2 consecutive absences will result in a failing grade or withdrawal from the course. Absence is excused only for valid medical or personal reasons that have been properly documented and communicated to the instructor, either prior to, or a soon after the event(s) as is reasonably possible. Regardless of the reason, it is the student’s responsibility to obtain missed materials and information, to complete all assignments and/or exam(s), or obtain a valid extension. Late arrival to a class session is disruptive, both to the teacher and to the other students, and reflects an unprofessional attitude. Please do not bring food into the classroom or computer labs; beverages are allowed but must be in a closable container. Attend to your restroom needs prior to the class session.

Conduct

Students are required to conduct themselves in the classroom, studios, and labs in a respectful and constructive manner, and consistent with the guidelines provided in The Rudder. Addition ally, cell phones and pagers must be turned off, instant-messaging, personal entertainment headsets, and non-course-related web surfing is strictly prohibited during class sessions. Performance regarding any of these items may inform the grading process at the instructor’s discretion. Students found engaging in these activites during class time will be asked to leave the classroom and will be given an unexcused absennce for the class.

Deadlines/Extensions

All assignments must be submitted at the start of the class session on the day due. Work sub mitted between 1 and 7 days after the date due will result in a automatic deduction of 10%; between 8 and 14 days, 50%. After 14 or more days, work cannot be accepted for grading. Nonsubmitted work will receive a grade of 0%.

Non-Completion

An extension for assignment work will be granted only for extenuating circumstances such as illness or serious personal problems. An extension can be obtained by submitting to the insturc tor properly authorized written documentation (e.g. note signed by doctor, or parent/guardian, etc.) A grade of “Incomplete” can be obtained ONLY upon the request by the student and with the instructor’s consent, and will be issued only for substantial and clearly documented causes. Please refer to The Rudder for guidelines concerning withdrawal from a course.

Academic Honesty

Please refer to the Academic Honesty policy as outlined in The Rudder.

Special Needs

If a student believes that s/he has a disability requiring accommodation(s) in a class, the pro cedure is to contact the Coordinator Support Services for Students with Disabilities prior to, or within one week of, the first class session, or as quickly as possible after a problem has arisen. After receiving an accommodation form, the student should contact the instructor so that ad justments can be implemented in a timely fashion. The Coordinator has specific guidelines on providing appropriate support services to students with various types of disabilities. For further information, contact Janine Allo, Hauke 007, 651-5961, jalloREMOVETHISBEFORESENDING@champlain.edu.

Academic Resources

The Champlain College Library is housed in the Miller Information Commons, and contains books, journals and on-line resources to support the content of this course. The library web site is a useful tool for locating and accessing those resources: http://campus.champlain.edu/mic. Please Note: It is the policy of the College that required textbooks are not maintained in the stacks for circulation; textbooks may be placed on reserve at the instructor’s discretion.

There are no required textbooks for this class. There will be online readings assigned each week with URLs provided in the schedule portion of the syllabus. The following textbooks are recommended if students are looking for a reference book to further their knowledge in their software covered in this course (Photoshop and Dreamweaver).

Textbook Required/Optional
Adobe Photoshop CS3: Visual QuickStart Guide Optional
Adobe Dreamweaver CS3: Visual QuickStart Guide Optional

Course Calendar

Schedule

# Date Description Work Due
1 01/09/08

Course Introduction

Syllabus Review, Band Website Project Introduction, Photo Techniques/Tips/Trickers, Wireframing, Wireframing/Organizing your Photoshop Files lab

None
2 01/16/08

Content, structure and navigation

Information Architecture & lab, Navigation Design & lab

Assignments

  • List of elements in band website design
  • Initial wireframe sketches of band website
  • 1 Page Design Review of 1 Favorite Website

Reading

3 01/23/08

Grid Design

What’s Wrong with MySpace? lecture/critique. Project 2 (MySpace Redesign OR Portfolio Design) introduction

Assignments

  • Photoshop comp of band website
  • IA for band website

Reading

4 01/30/08

Color Theory & Inspiration

Photographic color palletes lab.

Assignments

  • Sketches for MySpace redesign OR sketches & IA for Portfolio design
  • 1 Page Design Review of 1 Frustrating Website

Reading

5 02/06/08

Typography for the Web

Overview of web based fonts, accessibility & SEO related typography issues. Final Project Introduction.

Assignments

  • Photoshop comp of MySpace redesign OR Photoshop comp of Portfolio site design

Reading

6 02/13/08

Design conventions & considerations

Design themes, styles & techniques

Assignments

  • Initial wireframe sketches with 2 different navigation schemes
  • A list of all elements that need to be accounted for in your design
  • 1 Page Review of a Popular Web Design “Style” with examples

Reading

7 02/20/08

Content Design

Forms, Tables and other common challenges in web design

Assignments

  • 2 Initial Photoshop design directions. 1 grid-based, 1 non-grid-based

Reading

8 03/05/08

Technology Overview & Introduction to HTML

Software, Image file formats, Introduction to Dreamweaver & HTML. HTML Style Guide Lab.

Assignments

  • 2 Revised Photoshop design directions, each with a distinct color scheme

Reading

9 03/12/08

HTML Continued

Forms and Tables. HTML Framework lab.

Assignments

  • 2 Style guides in Photoshop detailing typographical choices for headings, links, etc.

Reading

10 03/19/08

Introduction to CSS

CSS for typography on the web. CSS Style Guide Lab.

Assignments

  • 1st Round Revised Photoshop Design Direction based on one of your design directions w/ contact page comp

Reading

11 03/26/08

CSS Continued

Layout with CSS, Slice & dice css layout lab

Assignments

  • HTML + CSS Style Guide based on Photoshop style guide

Reading

12 04/02/08

Planning a Web Design Project

The Process and Roles involved in a Web Design & Development project. In-class review of 2nd round design comps.

Assignments

  • 2nd Round Revised Photoshop Design Comp
13 04/09/08

In class design lab

In class design lab and individual review of CSS/HTML questions on framework assignment.

Assignments

  • HTML + CSS Framework of Band Website Design from Project 1 or Portfolio design from Project 2.
14 04/16/08

Project Presentations

In class final project presentations.

Assignments

  • Final Project & Process Paper
  TBA

Final Exam Period

In class final project presentations (continued).

None

Guidelines for Evaluation of Student Work

Components of Final Grade

Evaluation Method Overall Weight
Final Project 40%
Projects 40%
Assignments, Papers & Quizzes 10%
Participation 10%

Grading Scale

Grade Percentile Range (%) Standard Grade Points
A 93-100 Outstanding Quality 4.0
A- 90-92 Excellent 3.7
B+ 87-89 High Level 3.3
B 83-86 Very Good 3.0
B- 80-82 Good 2.7
C+ 77-79   2.3
C 73-76 Acceptable 2.0
C- 70-72   1.7
D+ 67-69 Just Adequate 1.3
D 63-66 Passable, Below Expected 1.0
D- 60-62 Just Passable 0.7
F 0-59 Not Passable; Or Not Submitted 0.0

Design Review Papers

This course includes 3 Design Review Papers; evaluation of a favorite website, evalutation of a frustrating website and analysis of a design style/theme/trend. These papers are required to be at least one page (double-spaced) and submitted in Microsoft Word format. Papers will be graded based on the extent to which students succesfully apply course material in their evaluation of each paper's subject. For example, we will be discussing topics such as color choices, navigation, typography and overall layout as they apply to the discipline of web design. It is expected that these topics are addressed by the student in their design review papers.