The City University of New York
Instructor: Jay Van Buren, Section D218
Email: JVanBuren@citytech.cuny.edu
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
○Elements and Attributes ○HEAD, META Tags, Title ○Common formatting elements
|
| 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
|
| 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”).
