The City University of New York
Instructor: Noreen Whysel, Section D218
Email: nwhysel@citytech.cuny.edu
Office Hours: Mondays 3:00pm-4:00pm | Blackboard Collaborate
Course Description
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. Instructions available at http://bit.ly/COMD2451-Whysel-Remove-WP-from-DH
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 | January 29 | 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 5 | 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. |
| NO CLASS | February 12 | Lincoln’s Birthday – CityTech is Closed |
| 3 | February 19 | Lecture Topic – Web Design Workflow
● 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 Laboratory Exercise ● Class exercise: Run through an entire web design project end-to-end. ● Start a mood board. Explore websites and take note of the colors, fonts and how users navigate the site. ● Save images to Pinterest or take screenshots (use shift-command-3 for full screen or shift-command-4 to select a portion of a site) and save them to a slide deck or document file or Pinterest. ● Prepare for Quiz. Homework Assignment Due: Wednesday, February 26 Upload the URL for your web page and “mood board”. See assignment page in Blackboard for upload instructions. Study for QUIZ. Reading: http://bit.ly/COMD2451-Wk3-Robbins |
| 4 | February 26 | Lecture Topic – HTML
QUIZ ● Overview of web page structure and style ● Introduction to HTML ● Elements and Attributes ● HEAD, META Tags, Title, Heading sizes, Paragraphs, Lists, Comments, Classes, IDs ● XHTML and good coding form Laboratory Exercise ● Visit w3schools.com and review HTML Tutorial ● Design a basic web page; save as index.html and upload the page to your server ● Run your page through a HTML checker Homework Assignment Due: Wednesday, March 4 Post a link to your updated page. Make sure to run it through a checker first! See assignment page in Blackboard for upload instructions. |
| 5 | March 4 | Lecture Topic – CSS
● Introduction to CSS ● Creating a Stylesheet ● 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 Due: Wednesday, March 11 Post a link to your CSS stylesheet and your index.html page. Be sure to run it through a checker! I will test it! Submit to Blackboard Assignment for Week 6 |
| 6 | March 11 | 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. |
| NO CLASS | March 18
Due to the coronavirus outbreak all original lecture content between March 18 and April 7 will move ahead one week due to the recalibration of the Spring 2020 schedule |
Lecture Topic – Informal Online Class
|
| 7 | March 25
All original lecture content between March 18 and April 7 will move ahead one week due to the recalibration of the Spring 2020 schedule |
Lecture Topic – Information Architecture (recorded)
Midterm Review QUIZ: Bug Hunt (Look for document in email) ● Information architecture and navigation (recording) https://www.loom.com/share/81586bd4e1124ea98f92af744173aeca ● Site maps and user flowcharts (recording) https://www.loom.com/share/3c805665cf1f422db27adf2f54e6d8df Laboratory Exercise ● User Flow exercise ● Layout a flowchart/sitemap for your website Homework Assignment Due: Wednesday, April 1 Tuesday April 6 Post scans or photos of your flowchart and site map. See assignment page in Blackboard for upload instructions. Full instructions can be found at http://bit.ly/COMD2451-HW-Wk7-Instructions |
| NO School | Wednesday, April 1 | Due to Governor Cuomo’s PAUSE decree, there is no class between Thursday April 26 and Wednesday, April 1. Some course content in the next few weeks will be combined. |
| 8 | Tuesday, April 7
All original lecture content between March 18 and April 7 will move ahead one week due to the recalibration of the Spring 2020 schedule |
Lecture Topic – Responsive Web Design
● 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. |
| 9 | April 15
> All original lecture content between March 18 and April 7 will move ahead one week due to the recalibration of the Spring 2020 schedule |
Lecture Topic – Links and Image Maps
● Final Project Requirements ● Site design: Putting it all together ● Using text and image links ● How to design an Image map ● Introduction to page templates Prepare for QUIZ Laboratory Exercise ● 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. |
| Week 10 | Previously presented
Material for this class is Combined with prior Responsive design class |
Lecture Topic – Grid Layouts
● Grid layouts and the CSS box model Laboratory Exercise ● Build out site from template Homework Assignment Due: Wednesday, April 22 Continue building out site from [yourname]-template.html. See assignment page in Blackboard for upload instructions. |
| 11 | April 22
Now back to your regularly scheduled program |
Lecture Topic – Embedded Media
● 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. |
| 12 | April 29 | Lecture Topic – Forms
● 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 6 | 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”).
