Syllabus

New York City College of Technology
The City University of New York
Communication Design
COMD 2451 – Web Design I
Instructor: Jay Van Buren, Section D218
Email: JVanBuren@citytech.cuny.edu
Class Meetings: Wednesdays 12:00pm | Zoom  passcode: 130698

Office Hours: Fridays 4:00pm-5:00pm | zoom

Course Description 

(Thanks to Prof Noreen Whysel )

Required for all associate level students, this capstone course is designed to showcase work done in previous courses. Focused on website design and development, topics include creative user interface design and best workflow practice. Students design a portfolio website using an HTML template, and learn web design, typography and web programming skills. HTML and CSS are taught. 

1 class hour, 3 lab hours, 3 credits

Prerequisites 

COMD 2300 

Course Objectives

INSTRUCTIONAL OBJECTIVES  ASSESSMENT 
For the successful completion of this course, students should be able to:  Evaluation methods and criteria 
Design the branding and style of a web site, with a consistent look-and-feel throughout.  Students will demonstrate competency by using graphics software to design multiple design options. 
Introduction to semantic HTML to create static web sites. Learn how CSS is used to properly format text on a page.  Students will demonstrate competency by cleaning up code by hand, and layout of type using CSS. 
Use graphics in appropriate file formats, to create a unique and compelling website.  Students will demonstrate competency by slicing up a design file into appropriate optimized file formats and combine with CSS for a seamless design.
INSTRUCTIONAL OBJECTIVES ASSESSMENT
Learn about how websites influence, and are influenced by the Internet, through the use of hypertext, and writing for organic traffic.  Students will display competency through implementation of a live web site they design, implement and manage.
Appropriate use of document elements, and introduction of forms for user feedback.  Students will display competency through implementation of a table and form assignment.
General Education Outcome covered:  How the outcome is assessed:
Writing: The student will demonstrate the ability to write clearly articulated thoughts in a professional, informed manner.  Evaluate how well students absorbed and consequently applied the learning though graded written portions of projects.
Information Literacy: The student will demonstrate the ability to find proper resources.  Assess through class discussion and written tests if students have developed the ability to find information through proper resources.
Oral Communication Speaking: The student will demonstrate the ability to articulate himself using relevant industry-specific language  Evaluate through class discussion and /or written tests if students use appropriate nomenclature to defend creative, critical and technical decisions in project concepts and development.

Teaching/Learning Method 

  • Lectures and readings¬†
  • Demonstration¬†
  • Project based labs¬†
  • Research assignments¬†
  • Readings
  • Blackboard¬†

Suggested Text: 

HTML and CSS: Design and Build Websites 

Jon Duckett John Wiley & Sons, Inc. (2011) ISBN-13: 978-1118008188/ISBN-10: 1118008189 

http://www.htmlandcssbook.com/

Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics 4th Ed. Jennifer Niederst Robbins O‚ÄôReilly Media Inc. (2012) ISBN-13: 978-1449319274/ ISBN-10: 1449319270¬†

https://www.learningwebdesign.com/

Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability (Voices That Matter) 3rd Edition¬†

Steve Krug New Riders (2014) ISBN-13: 978-0321965516/ ISBN-10: 0321965515 

Other readings will be assigned throughout the semester. 

Suggested Resource: https://www.w3schools.com/

Required Hosting: In lieu of a required textbook, all students will be required to obtain hosting and a domain name for their work.

Suggested hosting and domain:

http://www.dreamhost.com ‚ÄĒWeb hosting. Expect to spend $2.59-$4.95 per month.

http://www.godaddy.com ‚ÄĒ Domain name provider. Expect to spend $0.99 to 10.99 per year. Please select a professional name.

You may purchase both your domain name and hosting from Dreamhost if you want to manage them both at the same account. You MUST remove the WordPress Installation for this course. 

Attendance (College) and Lateness (Department) Policies:

Attendance is taken and is important to success in this class. Both absences and arrival more than 15 minutes after the start of class will be marked. If excessive, the instructor will alert the student that he or she may be in danger of not meeting the course objectives and participation expectations, which could lead to a lower grade. 

Academic Integrity Standards:

Students and all others who work with information, ideas, texts, images, music, inventions, and other intellectual property owe their audience and sources accuracy and honesty in using, crediting, and citing sources. As a community of intellectual and professional workers, the College recognizes its responsibility for providing instruction in information literacy and academic integrity, offering models of good practice, and responding vigilantly and appropriately to infractions of academic integrity. Accordingly, academic dishonesty is prohibited in The City University of New York and at New York City College of Technology and is punishable by penalties, including failing grades, suspension, and expulsion. 

Grading 

40% Project
30% Homework
20% Quiz
10% Class preparation/participation/attendance
Letter Numerical Range Grade Point
A 93-100.0 4.0
A- 90-92.9 3.7
B+ 87-89.9 3.3
B 83-86.9 3.0
B- 80-82.9 2.7
C+ 77-79.9 2.3
C 70-76.9 2.0
D 60-69.9 1.0
F 59.9 or less 0.0

Topics

Note: This is a general outline of topics ‚ÄĒ the order may change as the semester progresses. Any changes will be communicated before the class.

All class resources are located at: http://bit.ly/COMD2451-Class-Folder

All Homework/Reading Assignment TBAs: http://bit.ly/COMD2451-Homework-Instructions

Most course assignments and resources will be shared using the following bit.ly format. Please check updates to be sure you are using the correct link:

http://bit.ly/COMD2451-HW-Wk#

http://bit.ly/COMD2451-Reading-Author-Name

http://bit.ly/COMD2451-Quiz#

CLASS DATE CLASS OUTLINE
1 FEB 2 Lecture Topic ‚Äď Intro to Web Design

‚óŹ Introductions

‚óŹ Overview of Web Design I Syllabus

‚óŹ What is Web Design?

‚óŹ Domain Registries and Web Hosting Services

‚óŹ Review of Web Design Tools

Laboratory Exercise

‚óŹ We will get to know our classmates using a simple interview and survey format

‚óŹ Purchase and configure a domain name

‚óŹ Purchase and configure web hosting services

Homework Assignment

Due: Wed. February 5

Please post your domain name and a link to the web space you set up at your hosting service. The page can be the standard placeholder or ‚Äúunder construction‚ÄĚ page, You do not need to have any content on your website yet. See assignment page in Blackboard for upload instructions.

2 February 7 Lecture Topic ‚Äď Design Discovery

‚óŹ Design Discovery Tools

‚óŹ Sketching and ideation

‚óŹ Project Proposal

Laboratory Exercise

‚óŹ 8up sketching exercise: 8 ideas in eight minutes.

‚óŹ Decide what your portfolio site will contain (skills, product, services, information, resume, etc.)

‚óŹ Begin design process: start sketching ideas for your website. Your sketches can contain a logo, look-and-feel, style.

Homework Assignment

Due: Wednesday, February 19

Write a one paragraph project proposal for your website.

Scan or photograph 3-5 ideation sketches. See assignment page in Blackboard for upload instructions.

3 February 16 INTRO TO HTML

  • More HTML

‚óčElements and Attributes

‚óčHEAD, META Tags, Title

‚óčCommon formatting elements

  • XHTML and good coding form
    Homework — improved resume
4 February 23 Lecture Topic – Web Design Workflow & INTRO CSS

‚óŹ Stages of web design workflow

‚óŹ Planning and Ideation

‚óŹ Site mapping and wireframing

‚óŹ Information architecture, navigation and user flow

‚óŹ Site Mockups/High and Low Resolution Prototypes

‚óŹ Development and Release

‚óŹ User testing

‚óŹ Introduction to CSS

‚óŹ Creating a Stylesheet

Homework Assignment

Due: Wednesday, February 26

Wire Frames for your portfolio site

Version of your resume that uses a style sheet

5 March 2 Design mockups and CSS layout
6 March 9 Lecture Topic – CSS

‚óŹ Understanding the CSS Box Model

Laboratory Exercise

‚óŹ Visit w3schools.org and review CSS Tutorial

‚óŹ Create a style.css file with the styles used to create your page. Be sure to use a <meta style=‚ÄĚstyles.css‚ÄĚ> in your index.html page.

Homework Assignment

VERSION 1 of your designs

7 March 16 Lecture Topic ‚Äď Visual Design

‚óŹ Introduction to visual design

‚óŹ Using color, font and images effectively with CSS

‚óŹ Selecting, optimizing and using images

‚óŹ Copyright and intellectual property

Laboratory Exercise

‚óŹ Choose a color scheme and fonts for your website

‚óŹ Create a style guide showing each of your visual elements for headings (h1, h2, etc), links, paragraphs, buttons

‚óŹ Create an /images/ folder and upload 5-10 images

‚óŹ Prepare for Quiz

Homework Assignment

Due: Wednesday, March 18

Save your style guide as style.css and post it and a link to your file. See assignment page in Blackboard for upload instructions.

8 March 23 Lecture Topic – Informal Online Class

  • NAV DEMO
  • your home work for week 8 :
    Create design mockups (JPGS) for each of your page types in your site, show what images you’ll use what colors, what fonts, your logo if you have one or title treatment if you don’t.. everything how its really going to look
9 March 30 MIDTERM DESIGN PRESENTATIONS
10 April 6 USING GRID LAYOUTS

HOMEWORK- USE GRID LAOUTS IN YOUR SITE

11 April 13 Lecture Topic ‚Äď Responsive Web Design USING MEDIA QUERIES¬†

‚óŹ CSS containers and positioning

‚óŹ The Grid Model and other responsive frameworks

Laboratory Exercise

‚óŹ Begin sketching a responsive grid, noting which content should be in each section and how you want the content to flow

‚óŹ Create paper prototypes for various screen sizes and orientations

‚óŹ Start to code a page using the w3schools framework

Homework Assignment

Due: Tuesday, April 6

Save your responsive page as [yourname]-responsive.html and post? See assignment page in Blackboard for upload instructions.

no class April 20

>

SPRING BREAK
12 APRIL 27 how to use media files with HTML
Laboratory Exercise

‚óŹ CREATE VIDEO AND AUDIO IN A WEB PAGE – PAIRED UP

13 May 4 how to do a slider without any Javascript (only HTML and CSS!)
‚óŹ Final Project Requirements

‚óŹ Create a template and use it to design 3-5 pages for your site

‚óŹ Test your website with a partner (you can print it and test a paper prototype or have them use your website)

Homework Assignment

Due: Wednesday, April 22

Post your template page ([yourname]-template.html) and 3-5 web pages. See assignment page in Blackboard for upload instructions.

‚óŹ Using Rich Media

‚óŹ Embedding video, audio files

QUIZ

Laboratory Exercise

‚óŹ Create a web page with embedded media and save it as media.html. Continue building out site from template

Homework Assignment

Due: Wednesday, April 29

Post [yourname]-media.html page. See assignment page in Blackboard for upload instructions. Upload the website pages to your web server, including the home page (index.html) and other pages.

13 MAY 11 FINAL PRESENTATIONS

‚óŹ Forms: What they do, how they work

Laboratory Exercise

‚óŹ Form exercise

‚óŹ Create a contact.html page with a contact form

‚óŹ In pairs, have a classmate test your form

Homework Assignment

Due: Wednesday, May 6

Upload and test your form. Post [yourname]-media.html. See assignment page in Blackboard for upload instructions.

13 MAY 18 FINAL PRESENTATIONA
Lecture Topic – Javascript

‚óŹ Introduction to Javascript

‚óŹ What it does, how it works

Laboratory Exercise

‚óŹ Javascript element exercise, reveal/hide text, mouse interactions

‚óŹ Questions about quiz

Homework Assignment

Due: Wednesday, May 13

Post javascript file [yourname]-script.js. See assignment page in Blackboard for upload instructions.

14 May 13 Lecture Topic – Critique

‚óŹ Website debugging

‚óŹ Design Critique

QUIZ

Laboratory Exercise

‚óŹ Q&A

‚óŹCreate a presentation in Google Slides or Powerpoint with a page for each deliverable.

Homework Assignment

Due: Wednesday, May 20

Debug your website and post a link to the completed site and upload your presentation file. See assignment page in Blackboard for upload instructions.

15 May 20 FINAL PRESENTATIONS

Lecture Topic

‚óŹ Final presentations and critique

Expectations

Students must complete and turn in all homework assignments a week from the day they were assigned – the next class meeting. It is very important to keep up with the homework throughout the semester. These exercises form the backbone of your web knowledge.

Missing homework assignments or major projects will result in significant grade penalties.

Should you miss a class, you are expected to contact the professor to learn what you missed.

Homework turned in one week after it is due will be penalized by at least one letter grade.

Students must come to class prepared, ready to work and be engaged.

Final Project Requirements

Presentation Pages

  • Cover page including:
    • Your Name
    • Web Design I, Section D218
    • City Tech Communication Design Program
    • Professor: Noreen Whysel
  • Page 2: Project proposal paragraph from Week 2
  • Page 3: Image with your ‚Äúmood board‚ÄĚ or Pinterest screenshot
  • Page 4: CSS Style guide (can be a screenshot)
  • Page 5: CSS Stylesheet (can be a snippet or screenshot)
  • Pages 6+: Images of your sketches, wireframes, and completed site
  • Last Page: Thank You and a link to your website and email address

Website

  • Submit a link via Blackboard, to a domain name you own.¬†
  • One stylesheet for all pages.¬†
  • Responsive design for at least 2 display sizes (desktop + phone).¬†
  • Navigation that works on desktop or phone.¬†
  • Site that looks good and is usable at both widths.
  • Page with at least one paragraph of text.¬†
  • Gallery with at least 3 images (most likely jQuery lightbox).¬†
  • Form that can be submitted to trigger an email (such as ‚ÄúContact me‚ÄĚ).