The New School University
Parsons The New School for Design (PS)
School of Art, Media and Technology (PSAM)
Design and Technology (BFA)
Course
Communication Design Foundations: Interaction
Course Syllabus
Download the syllabus.
Section B
PSAM 1028; CRN 1329
Wednesday@ 4:00pm
Parsons 2 W13 | Room 1111
Date Range
Aug 27, 2025 – Dec 10, 2025
Zoom
URL
http://b.parsons.edu/~dejongo/
Instructor
Onno de Jong, onno@newchool.edu Office Hours: email & Zoom
Course Description
In this course students will be introduced to programming as a creative medium— as a way of making and exploring. The coursework focuses on developing a vocabulary of interaction design principles which can then be applied across a range of platforms. Students are encouraged to experiment with various media, tools, and techniques, ultimately producing a portfolio of interactive and visual projects designed for the screen. An emphasis is placed on typography as it applies to a screen context, research-based problem solving and a learning-through-making approach to technical skill building. Historical and current interaction design precedents will be discussed. This course is intended for non-communication design majors, as an introduction to the discipline. Note: this course was previously offered under the title Web Design Basics.
Open to
All university undergraduate degree students, except Communication Design and Design & Technology majors.
Official Department Policies
Communication Design Class
Common Program & University Policies
Course Outline
Last updated 8/16/2025
Week 1
8/27
Introductions. Overview of course, course objectives, outcomes and expectations. Go over syllabus. Introduce hypertext markup language. Activity: Analyze Website. Activity: Create HTML file, start first assignment in class.
Homework
Write out expectations for the course. Use OpenAI to interrogate your future plans. Read Why Do All Websites Look the Same? Watch introductory videos. Analyze the elements of a website. Create a content sheet for the main page of a site that epitomizes the design field you are in. Write down the goals of the site. Use images. Mark up the assignment.. Due: Next Week. Email me if you have questions.
Week 2
9/3
User experience (UX) Design, Semantic HTML5, Developing Content for midterm website, preparing images, and understanding color on the web.. Learn to upload files using FTP client and organize server space. Activity: Create HTML page for website you analyzed with eye on making your own portfolio. Activity: Activate the account school provides and upload first assignment.
Homework
1) Create landing page with links to assignment and worksheet. 2) Watch XU videos. 3) Create Workpage for portfolio site (8 steps). 4) Create content and markup your portfolio site. Read chapters 4-6. Due: The following week.
Week 3
9/10
Introduction to CSS (Cascading Style Sheets). Cover the Mechanics of CSS: how CSS integrates with HTML. Demonstrate most-used properties. Activity: Highlight content using CSS selectors. Activity: Create selectors targeting markup. Make page look like Photoshop comp.
Responsive Design. The web is on display on iPhone and iPad screens to desktop computers. CSS media queries allow you to target each of these devices in one style sheet. Activity: Using media queries to target different devices.
Homework
1) Finish Content. 2) Turn Photoshop sketches into HTML / CSS wireframe. 3) Test CSS selectors by targeting each element and change its background color. Read chapters 7-10. Due: The following week.
Week 4
9/17
CSS layout strategies. Block, inline, relative and absolute positioning, floats and floating layouts and CSS3 Flex property and grids. Activity: Begin translating Photoshop Comps into HTML/CSS using multiple layout strategies.
Homework
Using different layout strategies build your portfolio following your Photoshop comp. Read chapter 11. Due: The following week. First Quarter Assessment: Have your landing page, first two assignments and portfolio up.
Week 5
9/24
Complete the Web Site. Styling navigation, site architecture, optimize site for search engines and implement Google Analytics to track users. Activity: Build website using HTML5 Boilerplate. Activity: Style navigation links. Activity: First Quarter Assessment: Validate Code and Site Structure.
Homework
Develop your portfolio website. Read chapter 13. The Midterm Assignment is Due: Next week for review and midterm evaluation. Have it ready for in-class presentation two weeks from now.
Week 6
10/1
Type has exploded on the web. Principles of typography, formatting text and using type for effective communication when designing for the web. Activity: Practice using Typefaces from different sources. Activity: Work on Website in class/Peer Review light discussion.
Homework
Send peer review comments to peer and to me. Due: ASAP so the peer review can be incorporated into the midterm. Watch the videos on and by Carson. Create typography assignment. Read chapter 13. Due: In two weeks.
Week 7
10/8
In Class Help Session to go over your work in preparation for presentation next week.
Homework
1) Design midterm to be responsive and use media queries to target different devices. 2) Publish midterm for midterm grade. Read chapter 12. Due: The following week.
Week 8
10/15
Midterm Portfolio Presentation. Development of the Final Assignment / website.
Homework
Final assignment: create a site that sells something. Develop a proposal for your final project. Final Assignment is Due: at the end of the course. Topic for final is Due: next week. Second Quarter Assessment: Midterm: Validate Code and Site Structure.
Week 9
10/22
CSS3 part 1. An examination of CSS3 properties: color, opacity, box shadow, border radius, multiple backgrounds, picture borders and gradients. Activity: Use these properties in class.
Homework
1) For class: Use CSS3 properties for a collateral piece promoting your project. It can be a sales poster, an online brochure, or an email advertisement. 2) For final: Research, brand and position for the final project, its target audience, write the copy and develop a look that incorporates the CSS3 properties covered this week. Due: The following week.
Week 10
10/29
CSS3 part 2. More CSS3 properties: 2-D transforms, transitions, animations, multicolumn layout and Compositing and Blending properties.
Activity: Use these properties in class.
Activity: In-class Workshop.
Homework
1) For class: Use the new CSS3 properties to create a simple animatic for your final project. Animate elements created in the previous homework. 2) For final: Finish wireframe and Photoshop Comp for Final. Read chapter 14. Due: The following week.
Week 11
11/5
Programming on the web. Scrips on the server and the client create the modern web experience. 1) Introduction to PHP. Activity: Use PHP includes to make final website modular. 2) JQuery as a way to create dynamic web pages. Activity: Create a dynamic web page using jQuery.
Homework
1) For class: Implement a PHP include for your navigation and a jQuery script into your final website. 2) For final: Finish home page for the final. Read chapters 19 and 20. Due: The following week.
Week 12
11/12
Multimedia features of HTML5. HTML5 introduces a host of new features, the most visible are sound, video and the canvas element. Activity: Incorporate multimedia.
Activity: In-class final Workshop #2.
Homework
1) For class: Use audio, video or canvas to sell your final Project. 2) For final: Finish the remaining pages of your website for peer review. Read chapter 17. Due: The following week. Third Quarter Assessment: Have your Final Worksheet including all 7 steps, photoshop comp and opening page ready and uploaded.
Week 14
11/19
Forms and Peer Review. HTML forms are a standard way to collect information from the user. It requires setting up a php script. Activity: Create a simple form and include it in your final. Activity: Peer Review: Students split up into pairs and review each other’s web site(s).
Homework
1) For class: sv Create a form to collect user information for your site. 2) Write up the web site you reviewed and hand that to the person whose site you reviewed and to me. Read: chapter 16. 3) For final: Use the feedback from the peer review to finish your website. Due: The following week.
Week 14
12/3
Forms and Peer Review. HTML forms are a standard way to collect information from the user. Activity: Create a simple form. Your final project should be a functional web site by this time. Activity: Peer Review: Students split up into pairs and review each other’s web sites.
Homework
You will be working on your final and other assignments. If you have extra time on your hands, you can build a WordPress template.
Week 15
12/10
Final exhibition of your work. Class discussion, critique and celebration of your new found powers to build anything you can dream of, on the web. Show your final, walk us through your code. What was the most difficult/frustrating part of the project? What was the most rewarding?
Homework
Final Assessment:
Final Grade Calculation
The final grade adds up to a possible 110%, allowing some leeway in the satisfactory completion of all assignments, as long as the student attends and participates in class. 3 Absences are sufficient grounds for Failure.
Grade calculation, Date given is week that assignment is due:
| Date Due | Percent | |
|---|---|---|
| Week 2 | Website Analysis | 5% |
| Week 3 | Midterm Worksheet (7 Steps) | 5% |
| Week 3 | Responsive Mockup | 5% |
| Week 4 | CSS selection Exercise | 5% |
| Week 5 | Grid Exercise | 5% |
| First Quarter Assessment | 25% | |
| Week 6 | Code Responsive Wireframe | 5% |
| Week 6 | Quiz | |
| Week 6 | Code Portfolio Front Page | 5% |
| Week 7 | Typography Poster | 5% |
| Week 8 | Current Topic Website | 5% |
| Week 8 | Portfolio Presentation | 5% |
| Second Quarter Assessment | 25% | |
| Week 9 | Final: Worksheet | 5% |
| Week 10 | Final: CSS3 Collateral | 5% |
| Week 11 | Final: CSS3 Animatic | 5% |
| Week 12 | Final: HTML/CSS | 5% |
| Week 12 | Final: Modular Navigation | 5% |
| Third Quarter Assessment | 25% | |
| Week 13 | Final: Multimedia | 5% |
| Week 13 | Alternatives | 5% |
| Week 14 | Final: Peer Review | 5% |
| Week 14 | Final: Forms | 5% |
| Week 14 | Final: Alternative | 5% |
| Week 15 | Final: Presentation | 10% |
| Final Quarter Assessment | 25% | |
| Two assignments dropped: | -10% | |
| Total: | 100% |
Learning Outcomes
By the successful completion of this course, students will be able to:
- Create compelling interactive experiences.
- Use iterative making process in interaction design including user research, prototyping, XU development, and evaluation to build your web experiences.
- Conceptualize a product, object, or experience for the web and realize it through coding.
- Use responsive interfaces for different kinds of devices.
- Evaluate how typography and its variables are applied to interactive systems to facilitate orientation, support, usability and create consistency.
- Research historic and current design precedents to contextualize your own work.
- Combine your artistic creativity with technology related to the internet.
- The expectation is that the technical aspects of how the work is coded for the web be transparent and not stand in the way of the communicative efficacy.
Specifically
- Design, build and maintain standards compliant web sites.
- Hand code semantic HTML.
- Use CSS to implement design, separating form from content.
- Incorporate various layout strategies to effectively realize designs.
- Create responsive web sites designed for multiple devices using media queries.
- Incorporate the latest in CSS and HTML.
- Use PHP and Javascript/jQuery.
- Create Forms and be familiar with how a CMS works (WordPress).
Assessable Tasks
Assessable tasks are those core tasks required to create modern web design.
Hand coding the HTML and CSS should come together with the midterm assignment. Basic understanding needs to be refined by the final assignment. Assessable tasks:
| TASKS / ACTIVITIES | DATE | REQUIREMENTS / INDICATORS |
| Marking‑up Content | week 1‑2 | Is the markup valid and semantically correct HTML5? Are images the correct formatand size? |
| User Experience | week 2 | Are UX concerns driving the design process? |
| Design Process | week 2 | Are all 8 steps articulated? Are they reflected in the portfolio and final? |
| Styling the Content | week 3 | Is the CSS valid, clean, external, and using structural selectors wherever possible? |
| Layout out the Content | week 4 | Are multiple layout strategies used to construct the website? Document Flow? Positioning? Floats? Flex Box? Grid? |
| Constructing the Portfolio Site | week 5 | Is the site logically organized? Is it SEO friendly? Is it tracked using Google Analytics? (only for non‑Parsons hosted websites) |
| Is the web site Future Proof? | week 3‑6 | Is the website responsive to a change in viewport size, from smart phones to 4K Screens? |
| Does the typography communicate? | week 6 | Does the typography promote legibility? Accessibility? Does it communicate the messaging, tone, sentiment, and aesthetics? |
| Exploring CSS3 and beyond | week 9‑11 | Are advanced CSS modules used to create the look, feel, and functionality of the website? Does it stand out? |
| Modularity and Interactivity | week 12 | Are PHP and Javascript used in the final website? |
| CMS: WordPress | week 9‑13 | Are You capable of creating a site using WordPress? |
| Forms | week 14 | Are forms used in the final website? |
Shared Capacities
Shared capacities exercised in this course:
critical analysis, communication, research literacy, authorship, creative making, cross-disciplinary thinking, flexibility and resiliency, working in complex systems, and ethical reasoning.
Meaningful Participation and Attendance
The Final Grade is cumulatively determined by the grades received for the individual assignments and by the student’s participation in class.
Assignments will be assessed if they exceed, meet or fail to meet expectations, and whether or not they were handed in on time.
I will be answering any and all of your questions throughout the semester but I will assess your Work and let you know where you stand four times during the semester, as indicated. Completed assignments can be improved by updating them for the final assessment at the end of the course.
The workload gets easier as the second half of the course builds on everything learned in the first half. There is a lot of information to cover but know that once you understand, which should happen by the midterm, the work is not nearly as hard as it first appears. Avoid procrastinating, as cramming everything in at the last moment is not how you learn to code. You have to do a little at a time and learn from your mistakes.
Missing a class does not alter the due date of the assignments, and is to be avoided, particularly in the first five sessions, as each class builds on the information and skills covered in the previous class. Students are responsible for making up the information missed when unable to attend class.
You can track your own progress and more or less know where you stand. Adjustments will, of course, be made to accommodate everyone, and class participation and attendance will be considered in addition to the graded assignment.
The two main projects are a portfolio site and a final site. These projects are broken into individual assignments, of which two can be dropped making for a total of 100%.
Required Reading
Class portal, lecture notes and any links and videos in the homework pages.
Recommended Reading & Additional Resources:
Students in need of sharpening graphic and design abilities: visual literacy page. Read the The VIGNELLI Canon, an introduction to the language of vision and classic graphic design.
Lynda.com video instruction.
Departmental Suggested Reading
- Casey Reas, Chandler McWilliams, and LUST, Form+Code in Design, Art, and Architecture
- Kimberly Elam, Geometry of Design
- Armin Hofmann, Graphic Design Manual
- Robert Bringhurst, The Elements of Typographic Style
- Frank Chimero, The Shape of Design
- Leah Buley, The User Experience Team of One
- Compiled by Laurel Schwulst, Very Interactive Library
- Paul Ford, What is Code?
- Emil Ruder, Typographie
Material and Supplies
Access to the internet. AI tools required in completing final project.
University, College, School, and Program Policies
Academic Integrity
Compromising your academic integrity may lead to serious consequences, including (but not limited to) one or more of the following: failure of the assignment, failure of the course, academic warning, disciplinary probation, suspension from the university, or dismissal from the university.
Students are responsible for understanding the University’s policy on academic honesty and integrity and must make use of proper citations of sources for writing papers, creating, presenting, and performing their work, taking examinations, doing research, and using Artificial Intelligence. It is the responsibility of students to learn the procedures specific to their discipline for correctly and appropriately differentiating their own work from that of others. Full text of the policy, including adjudication procedures.
Resources regarding what plagiarism is and how to avoid it can be found at the University Learning Center.
The New School views “academic honesty and integrity” as the duty of every member of an academic community to claim authorship for his or her own work and only for that work, and to recognize the contributions of others accurately and completely. This obligation is fundamental to the integrity of intellectual debate, and creative and academic pursuits. Academic honesty and integrity includes accurate use of quotations, as well as appropriate and explicit citation of sources in instances of paraphrasing and describing ideas, or reporting on research findings or any aspect of the work of others (including that of faculty members and other students). Academic dishonesty results from infractions of this “accurate use”. The standards of academic honesty and integrity, and citation of sources, apply to all forms of academic work, including submissions of drafts of final papers or projects. All members of the University community are expected to conduct themselves in accord with the standards of academic honesty and integrity.
Additional University-wide Policies
The university provides many resources to help students achieve academic and artistic excellence. These resources include:
•Intellectual Property Rights
• TNS Grading Policies
• Title IX Policy
A comprehensive overview of University policies may be found under Policies: A to Z . Students are also encouraged to consult the Academic Catalog.
Course-specific Policies
The aim of the course is to become fluent in creating web sites by writing code. Whatever that takes.
Responsibility
Students are responsible for all assignments, even if they are absent. Late papers, failure to complete the readings assigned for class discussion, and lack of preparedness for in-class discussions and presentations will significantly impact your successful completion of this course.
Electronic Devices
The use of electronic devices (phones, tablets, laptops, cameras, etc.) is permitted when the device is being used in relation to the course’s work. All other uses are prohibited in the classroom and devices should be turned off before class starts.
Resources
The university provides many resources to help students achieve academic and artistic excellence. These resources include:
• The University Libraries
•Archives & Special Collections and Digital Collections
The New School Archives and Special Collections holds a wide array of collections in many different formats that may be useful in your academic, artistic, and personal projects, including paper and digital records, audiovisual material, artist’s books, zines, and records related to the histories of all divisions of the University. Archivists are available to help with your research and to offer guidance for locating resources specific to your topic. Contact archivist@newschool.edu to get started.
•WCONLINE and in person sessions or last minute virtual walk-ins can be requested by emailing learningcenter@newschool.edu. In person sessions are held at 66 W. 12th St. on the 6th floor. The ULC also offers weekly and biweekly sessions. For a complete list of services and general information, please visit the ULC webpage
•Making Center
The Making Center is a constellation of shops, labs, and open workspaces that are situated across the New School to help students express their ideas in a variety of materials and methods. We have resources to help support woodworking, metalworking, ceramics and pottery work, photography and film, textiles, printmaking, 3D printing, manual and CNC machining, and more. A staff of technicians and student workers provide expertise and maintain the different shops and labs. Safety is a primary concern, so each area has policies for access, training, and etiquette with which students and faculty should be familiar. Many areas require specific orientations or trainings before access is granted.
•The New School Food Assistance includes food assistance and additional resources for New School students.
•Health and Wellness includes additional services and support available to New School students.