The New School University
Parsons The New School for Design (PS)
School of Art, Media and Technology (PSAM)
Design and Technology (BFA)
Course
CD FOUNDATIONS: INTERACTION
Course Syllabus
Download the syllabus.
Section C
PSAM 1028; CRN 2102
Wednesday: 12:10pm – 2:50pm
63 Fifth Ave | Room L106
Section B
PSAM 1028; CRN 3129
Wednesday: 4pm – 6:50pm
63 Fifth Ave | Room L106
Date Range
08/26/2024 – 12/15/2024
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/2024
Week 1
8/28
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/4
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/11
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/18
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/25
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: Open a Google Analytics account and apply the code to your web pages.
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/2
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/9
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/16
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. Have your midterm up by Wednesday Night so I can grade your work.
Week 9
10/23
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/30
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/6
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/13
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 13
11/20
From Content Management Systems like WordPress, to CSS systems like Twitter’s Bootstrap, to web page applications, like Adobe to Artificial Intelligence, there are a lot of ways to build a website, The basis of most professional websites is a CMS. We will take a look at how a WordPress template pulls together different PHP modules into a single HTML page, and how the CSS controls the look of the site. Activity: Modify a WordPress template, using it as the basis for our own design. Activity: 15 minutes will be taken to complete on-line student evaluations. Activity: In-class final Workshop #3.
Homework
1) For class: 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
11/27
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/4
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.
- Handcode 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. Bold terms signify assessable tasks:
Assessable Tasks
Assessable tasks are those core tasks required to create modern web design.
| 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? |
Final Grade Determination
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 Sugested 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.
Resources
The web. Links to additional resources are supplied on the portal for each lecture.
University Resources
The university provides many resources to help students achieve academic and artistic excellence. These resources include:
The University (and associated) Libraries
The University Learning Center
For assistance with coursework assigned during the semester, you are encouraged to schedule tutoring sessions at the University Learning Center (ULC). Individual appointments are offered in Writing (all levels), Math, Adobe, Computer Programming, Oral Presentations and Time Management. Sessions are interactive, with both tutor and student participating. Appointments can be scheduled on WCONLINE or you can stop by for a walk-in session. The ULC is located on the 6th floor of 66 West 12th Street. Academic and skill-building workshops are also offered. For a complete list of services, workshops, and general information, visit www.newschool.edu/learning-center.
We have a new Intro to the ULC video, which we encourage you to share with your students in your syllabi and/or Canvas pages, along with this new How to Book an Appointment Guide. In addition, we’ve updated our Learning Strategies Guide, filled with useful tips to help students get organized, set and follow a regular learning schedule, avoid procrastination and multitasking, actively engage during class, and more.
University Disabilities Service
In keeping with the university’s policy of providing equal access for students with disabilities, any student with a disability who needs academic accommodations is welcome to meet with me privately. All conversations will be kept confidential. Students requesting any accommodations will also need to contact Student Disability Service (SDS). SDS will conduct an intake and, if appropriate, the Director will provide an academic accommodation notification letter for you to bring to me. At that point, I will review the letter with you and discuss these accommodations in relation to this course.
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 that students and faculty should be familiar with. Many areas require specific orientations or trainings before access is granted. Detailed information about the resources available, as well as schedules, trainings, and policies can be found at resources.parsons.edu
Health and Wellness
Health and Wellness provides additional services and support available to New School students.
Grading Standards
I value most when students express their strength in the creation of their assignments. This varies greatly from student to student, depending on the major and general level of expertise. I grade the work according to how well it is executed, with the expectation that the technical aspects of how it is coded for the web be transparent and not stand in the way of the communicative efficacy.
The grading policy follows the standards set by Parsons The New School of Design, New School University:
F
Failing grades are given for required work that is not submitted and for incomplete final projects. Make-up work may be permitted only with the approval of the instructor and the program director. Student does not know how to code and code does not work.
D
When the work barely adheres to the assignments, or if most of the aforementioned assessable tasks are incomplete or unsatisfactory, and the work demonstrates poor control over the use of HTML or CSS.
C/C+
This is for average work. The work will demonstrate completion in engaging the assessable tasks but the quality is below what is expected or at the expectation level. If the quality of the work surpasses expectations, it was probably turned in late. The code may have problems, is too simple or the solutions are incomplete and do not reflect the breadth of the material covered in class. The document may or may not validate.
B/B+
Good work is when the majority of the assessable tasks are not just met but are completed above expectations. The web site shows the student’s strengths in a professional light, clearly demonstrating mastery of the many of the tasks involved in creating a web site as covered in the course. The code validates and is mostly error free.
A
Excellent work results in websites that are professional and excel in the presentation of the content. Assignments also exceed expectations. The code is clean, well organized, documented and error free, so that it validates.
Given these criteria, the majority of grades in the class can be expected to fall in the “C” to “B+” range. Although minus grades are not included here, you may, of course, assign them at your discretion. Generally, minus grades are used in those cases where a student has fallen just short of achieving all the elements characterizing a paper in a particular grade range.
Official Policy in %:
A [4.0; 96–100%]
Work of exceptional quality, which often goes beyond the stated goals of the course
A- [3.7; 91 –95%]
Work of very high quality
B+ [3.3; 86–90%]
Work of high quality that indicates substantially higher than average abilities
B [3.0; 81–85%]
Very good work that satisfies the goals of the course
B- [2.7; 76–80%]
Good work
C+ [2.3; 71–75%]
Above-average work
C [2.0; 66–70%]
Average work that indicates an understanding of the course material; passable
Satisfactory completion of a course is considered to be a grade of C or higher.
C- [1.7; 61–65%]
Passing work but below good academic standing
D [1.0; 46–60%]
Below-average work that indicates a student does not fully understand the assignments;
Probation level though passing for credit
F [0.0; 0–45%]
Failure, no credit
Grade of W
The grade of W may be issued by the Office of the Registrar to a student who officially withdraws from a course within the applicable deadline. There is no academic penalty but the grade will appear on the student transcript. A grade of W may also be issued by an instructor to a graduate student (except at Parsons and Mannes) who has not completed course requirements nor arranged for an Incomplete.
Grade of Z
The grade of Z is issued by an instructor to a student who has not attended or not completed all required work in a course but did not officially withdraw before the withdrawal deadline. It differs from an “F,” which would indicate that the student technically completed requirements but that the level of work did not qualify for a passing grade.
Grades of Incomplete
The grade of I, or temporary incomplete, may be granted to a student under unusual and extenuating circumstances, such as when the student’s academic life is interrupted by a medical or personal emergency. This mark is not given automatically but only upon the student’s request and at the discretion of the instructor. A Request for Incomplete form must be completed and signed by student and instructor. The time allowed for completion of the work and removal of the “I” mark will be set by the instructor with the following limitations:
Undergraduate students: Work must be completed no later than the seventh week of the following fall semester for spring or summer term incomplete and no later than the seventh week of the following spring semester for fall term incomplete. Grades of “I” not revised in the prescribed time will be recorded as a final grade of “F” by the Registrar’s Office.
College, School, Program and Class Policies
A comprehensive overview of policy may be found under Policies: A to Z. Students are also encouraged to consult the Academic Catalog for Parsons.
Canvas
Use of Canvas may be an important resource for this class. Students should check it for announcements before coming to class each week.
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 to silent before class starts.
Responsibility
Students are responsible for all assignments, even if they are absent. Late assignments, failure to complete the assignments for class discussion and/or critique, and lack of preparedness for in-class discussions, presentations and/or critiques will jeopardize your successful completion of this course.
Active Participation and Attendance
Class participation is an essential part of class and includes: keeping up with reading, assignments, projects, contributing meaningfully to class discussions, active participation in group work, and coming to class regularly and on time.
Parsons’ attendance guidelines were developed to encourage students’ success in all aspects of their academic programs. Full participation is essential to the successful completion of coursework and enhances the quality of the educational experience for all, particularly in courses where group work is integral; thus, Parsons promotes high levels of attendance. Students are expected to attend classes regularly and promptly and in compliance with the standards stated in this course syllabus.
While attendance is just one aspect of active participation, absence from a significant portion of class time may prevent the successful attainment of course objectives. A significant portion of class time is generally defined as the equivalent of three weeks, or 20%, of class time. Lateness or early departure from class may be recorded as one full absence. Students may be asked to withdraw from a course if habitual absenteeism or tardiness has a negative impact on the class environment.
Each student’s performance will be assessed against all of the assessment criteria to determine a final grade. The student is expected to meaningfully participate and make all zoom synchronous Zoom sessions. There will be no recordings of the previous session. Student can read lecture notes on web portal if they miss a class.
Recording Synchronous Sessions
Each class period is automatically recorded to the cloud. You will have 30 days to view the recording if you missed the class before it disappears.
Academic Honesty and 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, and doing research. 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. The full text of the policy, including adjudication procedures, is found on the university website under Policies: A to Z Resources regarding what plagiarism is and how to avoid it can be found on the href=”www.newschool.edu/university-learning-center/avoiding-plagiarism.pdf”>Learning Center’s website.
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. Please see the complete policy in the Parsons Catalog.
Intellectual Property Rights
The New School (the “university”) seeks to encourage creativity and invention among its faculty members and students. In doing so, the University affirms its traditional commitment to the personal ownership by its faculty members and students of Intellectual Property Rights in works they create. The complete policy governing Intellectual Property Rights may be seen on the university website, on the Provost’s page.
Student Course Ratings (Course Evaluations)
During the last two weeks of the semester, students are asked to provide feedback for each of their courses through an online survey. They cannot view grades until providing feedback or officially declining to do so. Course evaluations are a vital space where students can speak about the learning experience. It is an important process which provides valuable data about the successful delivery and support of a course or topic to both the faculty and administrators. Instructors rely on course rating surveys for feedback on the course and teaching methods, so they can understand what aspects of the class are most successful in teaching students, and what aspects might be improved or changed in future. Without this information, it can be difficult for an instructor to reflect upon and improve teaching methods and course design. In addition, program/department chairs and other administrators review course surveys. Instructions are available online