GD 67


Graphic Design 67 – Web Design 3

Section number: 4252
Units: 3
Prerequisites: Graphic Design 66 (Web Design 2), Intermediate Knowledge of Adobe Photoshop and Dreamweaver
Location: AIR 133
Thursday 6:30pm-9:35pm

Important Dates

March 1, 2015 — Last Day to Withdraw to Receive a Refund
March 1, 2015 — Last Day to Withdraw to Avoid a “W”
May 17, 2015 — Last Day to Withdraw to Guarantee a “W”

Instructor Information

Instructor name: Jamie Cavanaugh
Email address:
Office location: AIR 102

Office hours (please email me to schedule an appointment):
Tuesdays: 5:00pm – 6:00pm
Thursdays: 5:00pm – 6:00pm

Course Description

This computer-based advanced web course builds on the conceptual and technical knowledge acquired in Graphic Design 66, and focuses on developing and creating complete, commercial quality web sites. Working in teams, students will participate in a directed design and implementation of a medium-sized commercial website. Technical topics include: Cascading Style Sheets (CSS), advanced page slicing, CSS-based menus, optimization schemes, and site maintenance. Students will also learn how to embed audio, video and vector-based animation on their websites. Other topics include: client management, production methodology, content accessibility, teamwork, and site production budgets. Students will conceptualize, design, and produce a complete and dynamic commercial-quality website with multimedia components.

This course uses Adobe Dreamweaver CS6 and Adobe Photoshop CS6. (If you have Adobe Creative Cloud, that’s fine.)

Class Structure

Gr Des 67 focuses on the skills needed to make complete, commercial quality websites. Equally as important as the technical skills required to build a website are the necessary phases involved in what is often referred to as the design process. In this class, we will cover the steps involved in designing a website starting with the basics of “gathering information” to the final step of “going live.”

Every week we will discuss an aspect of the design process based on assigned readings. In addition, we will work in teams for the final project. The goal of this class is to give you as close of an actual client experience as possible through required “client meetings” and role-playing.

We will also cover a technical topic followed by a lab exercise. The technical topics have been chosen to give you the tools to create more advanced and sophisticated designs for your final project.

Student Responsibilities

Each student will be responsible for the following:

  • Must read the assigned readings and actively participate in all class discussions. (So please be prepared when you come to class.)
  • Must actively participate during the in-class team meetings. This is an important part of the class and you are required to participate. You will need your team members to sign-off on each phase of your project.
  • Must keep the documentation you generate during the design process organized and complete and posted to your WordPress blog.
  • Must attend lecture (so you do not miss any of the technical demonstrations) and must complete all class exercises and assignments.
  • Must meet your deadlines, present your design direction to the class (Midterm Project), and the final site on the last day of class (Final Project).
  • During class is not the time to text, to read your Facebook updates, to update your Twitter feed, or to post images to Instagram. Please be respectful when other students are presenting and when I am lecturing.

Scope and Limitations

Gr Des 67 is not a programming course. This advanced “backend” work is beyond the scope of this course. However, Santa Monica College offers courses in programming and scripting for students interested in learning programming and implementing server side applications. After finishing Gr Des 66, you may want to advance your skill and knowledge in web development by enrolling in some of these courses:

Please check the SMC catalog for complete course descriptions and prerequisites.

Computer Applications:
CIS 50 Internet, HTML and Web Design
CIS 51 HTML5, CSS3 and Accessibility  (Prerequisite: CIS 50)
CIS 54 Web Page Development and Scripting 1 (Prerequisite: CIS 50 and 51)
CIS 59A Dreamweaver I (Prerequisite: CIS 50)

Computer Science:
CS 3 Introduction to Computer Systems (Prerequisite: None)
CS 80 Internet Programming (Prerequisite: CS 3)
CS 81 Javascript and Dynamic HTML (Prerequisite: CS 80)
CS 85 PHP (Hypertext Preprocessing) Programming (Prerequisite: CS 81)

To learn to create vector-based animation using Flash:
ET 34 Web Animation 1 (Advisory: ET11)

Recommended Textbook


Kelly Goto and Emily Cotler – Web ReDesign 2.0: Workflow that Works, Peachpit Press, 2004, 2nd Edition, 978-0735714335

This textbook is not required for this class, but is recommended. In this class we’ll use online resources, but if you’re looking for a good resource, this is a great one.

Course Objectives

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

  • Produce a professional design for a website with an advanced navigation system
  • Use effective design and  process for creating web content
  • Work successfully in a web production team
  • Interact effectively with clients in the design process
  • Analyze requirements for producing websites compatible for different operating systems, browsers, color capabilities, and screen sizes
  • Manage the assets, physical and digital, used in the production and delivery of web project
  • Implement audio/video and vector-based animation on a website
  • Apply contemporary web design concepts while addressing accessibility issues
  • Utilize the full range of advanced features of a web authoring software

Arranged Hours Objectives

Upon successful completion of the arranged hours, students will be able to:

  1. Students will demonstrate an understanding of File Transfer Protocol (FTP) and be able to upload files to a server.
  2. Students will demonstrate an understanding of advanced Dreamweaver skills and how to use it to build a commercial quality web project using the software.

Student Learning Outcomes

  1. Demonstrate advanced technical and conceptual knowledge of the web design process by producing a dynamic commercial-quality website. As assessed by: Final Website Project
  2. Students will work effectively in a team in the design and implementation of a commercial-quality website. As assessed by: Group consultations, observations, and Final Website Project

Materials and Supplies

Flash drive or external hard drive. Dreamweaver CS6 or CC, Photoshop CS6 or CC

Recommended Computer Skills

To succeed in this course, students should have the ability to:·

  • Navigate the internet using a web browser
  • Manage files using either the Mac or Windows operating systems
  • Send and receive email messages and attachments
  • Use a word processing program like Microsoft Word or its equivalent
  • Must possess basic Photoshop skills.

Students that do not meet these required skills are advised to enroll in a computer skills course such as CIS 1, ET 11, GR DES 18, GR DES 64

Methods of Presentation

Lecture hours 1.5 hours per week, Lab hours 1.5 hours per week, and 2 arranged hours per week

Methods of Evaluation

Grading is determined by participation and the timely completion of all assignments and projects. Assignments and projects will be judged on technical execution, mastery of the underlying concepts, and quality of design. Full participation is especially necessary since the projects must reflect successful solutions to the design issues raised in class presentations.

Projects are graded on:

  1. Execution of technical requirements
  2. Effectiveness of concept and design
  3. Timeliness of submission
  4. Team participation

Assignments must be turned in on time, or the grade will be lowered. To receive full credit, all assignments are due on time. Students are responsible for submitting all work on time regardless of absence. Emailing late assignments is NOT allowed.

A late assignment may be submitted in class one week after the due date with one grade drop. No assignments will be accepted after one week.

Students must complete 75% of the coursework, including the final project, to pass the course. Final projects that are submitted late will NOT be accepted and you must attend the last class and present your final project to receive your grade.

Your final grade will be calculated using the following percentages:

Percentage of Grade

Evaluation Method
5% Participation
20% Assignments & “Deliverables”
25% Midterm Project
50% Final Team Project

Grading Scale

Superior performance. Excellent achievement and craftsmanship in all work. Performs beyond course requirements.

Above average performance. Consistent progress and craftsmanship. Meets all course requirements.

Average performance. Minimum time and effort spent on coursework. Fulfills basic course requirements.

Uneven performance. Minimal output and improvement in work. Requirements are only partially fulfilled.

F=60% and below
Fails to meet a minimum of performance levels. Does not exhibit achievement or progress.

Course Content

*The content of this course may change depending on time constraints. The order of the topics listed may vary

Discovery (Weeks 1-3)
Class 01

Topics: What is Interaction Design?, Review: Domain Name Registration, Web hosting, CMS: WordPress, Responsive Web Design (RWD).

Class 02

Topics: HTML 5, Responsive Web Design (RWD), RWD Frameworks, Design Process, Discover + Research, Group Presentation Assignments, Discussion.

Class 3

Topics: Discussion, RWD Frameworks.

Group Presentations:
Client Survey
Competitive Analysis

Clarification & Planning (Week 4)
Class 04

Topics: Working with the client, Discussion, RWD Frameworks.

Group Presentations:
Project/Communication Brief
Project Schedules
Budget/Project Estimate

SMC Flex Day (Week 5)

No Classes

Content Plan (Week 6)
Class 05

Topics: Site structure, Content, Content Plan, RWD Frameworks: Using Bootstrap, Discussion.

Group Presentation:

Structure Pages + Site (Week 7)
Class 06

Topics: Prototyping, RWD Frameworks: Using Bootstrap, Discussion.

Group Presentation:

Class 07 (Week 8)

Topics: Prototyping, RWD Frameworks: Using Bootstrap, Discussion.

Group Presentation:

Spring Break (April 13-19)

No Classes

Class 08 (Week 9)

Topics: Midterm Presentations review

Create (Week 10)
Class 09

Topics: Midterm Project Presentations, Final Project Assignment

Class 10 (Week 11)

Topics: Visual Design, Final Project, Using WordPress, WordPress Installation, Responsive WordPress themes.

Class 11 (Week 12)

Topics: How WordPress Works, The Dashboard, Creating and Modifying Themes, Plugins, Embedded Media.

Build (Weeks 13)
Class 12

Topics: Using WordPress: Plug-ins and Short codes. Deliverables due: final versions of: Client Survey, Personas, Competitive Analysis, Communication Brief, Schedule, Final Estimate, Site map, Wireframe.

Class 13 (Week 14)

Topics: Working in Teams. Home page and landing page due.

Class 14 (Week 15)

Topics: Final Presentation Guidelines, Screencasting, Class time: Team meetings

Class 15 (Week 16)

June 11: Final Project Presentations.

Policy for Adding Class

A student must attend the first day in order to be placed on the waiting list. A student will only be placed on the waiting list if s/he has met all the prerequisites for the class. The instructor will contact students on the waiting list should any spaces become available. Students who are not formally enrolled in the class cannot sit in on the class until they are officially registered for the class.

A student who does not attend the first day of class may not add the class without approval from the instructor. The instructor has the right to drop any student who does not attend the first day of class and adds the class without the instructor’s approval.

Withdrawal Policy

Students are responsible for withdrawing from a class and must not expect faculty to initiate withdrawal procedures for them. If you wish to drop this class, you may do so through the Admissions section of the SMC website,

Please note the drop dates for the current term listed at

After the eighth week of classes, students must have faculty approval and document supported extenuating circumstances to withdraw.  Extenuating circumstances are unavoidable circumstances that prevent students from participating in further class activities and fulfilling remaining course requirements. Poor student performance in the course will NOT be considered as an extenuating circumstance.

Class Policies

Academic Honesty

The SMC Honor Code and Code of Academic Integrity, printed in the General Catalog, remind students of their responsibility to behave honestly and ethically. It is your responsibility to familiarize yourself with these codes. Other guidance is also available online:

Student responsibilities:

Honor Council website:

Administrative Regulation 4412:

Please be extremely careful that you do not engage in any behavior that could even be construed as cheating. Outside of class, students are allowed to study together. However, copying another student’s work is not acceptable. If the instructor determines that students have violated the SMC Honor Code and/or the Code of Academic Integrity, the students may be assigned no credit. Future occurrences could result in academic disciplinary action. During an exam, talking to another student, looking at another student’s paper or computer screen, using cheat notes or mobile devices, etc. are not permitted.


Students are expected to attend all class sessions. Lectures and hands-on demonstrations will not be repeated for individual students. Please make a commitment to be in class on time even if you have not completed the current assignment. You are responsible for notifying your instructor in advance of any absence or scheduling conflict. If you need to miss a class due to a religious holiday, please notify your instructor ahead of time. You may be dropped from the class if you miss more than two consecutive classes without notifying your instructor.

In this course, “on time” attendance means arriving within the first 10 minutes of class, according to the clock in the room. “Present” means staying in class for the entire period; if you leave early, it will be counted as an “absence.”

Classroom Policy

Food or drink is prohibited in the classroom with the exception of water bottles which are permitted as long as they remain closed and kept away from all equipment. Use of the computers for purposes other than the assignments for this class is not permitted. No cell phone or smart phone use will be permitted in the classroom. Please turn off all electronic devices prior to entering the classroom. During class is not the time to email, to text, to read your Facebook updates, to update your Twitter feed, or to post images to Instagram. Please be respectful when other students are presenting and when the instructor is lecturing.

SMC Student Email Account

You can access your student email account using Corsair Connect. This is located in the upper left corner of Corsair Connect and is labeled, “SMC@Mail.” Your SMC email account is important because this is how the college will send you important SMC announcements such as enrollment information. Please use your SMC email account and check frequently, this is also how I will communicate with you about course announcements and updates.

When notifying a student by email, the instructor will use the student’s official SMC email address:

Students with Disabilities

Santa Monica College accommodates students with disabilities. If you qualify for any special accommodations due to a disability, you need to officially process your request through the Disabled Students Programs and Services (DSPS) office as close to the beginning of the semester as possible. If you believe you have a learning disability that has not yet been documented, please notify the instructor and make an appointment at the DSPS office for assistance. The DSPS office is located in the Admissions/Student Services Complex, Room 101, and the phone numbers are (310) 434-4265 and (310) 434-4273 (TDD). Scheduling of accommodated exams will be arranged on a case-by-case basis.

Emergency Preparedness

The safety of students at SMC is a priority. Please note that emergency procedures are posted in this classroom and every classroom. Also, procedures for various emergencies are delineated on the SMC website: Please take the time to familiarize yourself with these procedures today, when knowledge of what to do can be the most effective.”

College Use of Student Work Policy

By participating in this course, you agree to allow your work to be used by Santa Monica College for promotional purposes. These uses include, but are not limited to, display in the physical and web galleries, promotional video tapes, and printed promotional pieces. You retain complete rights to your work, and Santa Monica College may not use your work for non-promotional purposes without your prior agreement.

Recording of Class Lectures

In accordance with Section 78907 of the California Education Code, students shall not use any electronic listening or recording device in any classroom without the prior consent of the instructor, except as necessary to provide reasonable auxiliary aids and academic adjustments to disabled students.


Some elements of the syllabus may be changed at the instructor’s discretion.  If there is any aspect of this syllabus which you do not understand, or to which you take exception, please let the instructor know within the first week of class.

Graphic Design Club

There are various reasons to join the Graphic Design Club. The first is the sense of community that is built by the club members, a sense of belonging with others who have the same interest. This is especially important for a commuter college like SMC. It is also a chance for students to learn about Graphic Design topics, see exhibits, and hear lectures that are outside the tight frame of class curriculum. Please check the sign at the entrance of the building regarding Graphic Design Club meetings.

Spring 2015 Dates and Deadlines

This schedule is provided for your information. For the complete Spring 2015 schedule including 8 week sessions, please use the following link: