Advanced Design: Product Design

  • The Cooper Union

  • School of Art

  • 41 Cooper Square

  • FA-315B-1

  • Spring 2024

  • Tuesdays, 6-9:50 PM

Quick Links

Overview

Advanced Design: Product Design is a semester-long course at The Cooper Union. In this class, we will critically conceptualize, develop, and iterate on interactive web-based products.

This website serves as our class hub and will be continuously updated throughout the semester. Lectures, agendas, and projects will be posted here.

Sessions

Unit 1: The Web is Fluid

Week 1

Week 2

Week 3

Week 4

Week 5

Unit 2: The Web is Interactive

Week 6

Week 7

Week 8

Week 9

Week 10

Week 11

Unit 3: The Web is Data-Driven

Week 12

Week 13

Week 14

Week 15

Projects

Accessible Book

Generative Tool

Experimental Clock

Community

Class Policies

Community Agreements

Below are the community agreements we have agreed to as a class.

  1. We will make “I” statements.
  2. We have a commitment to learn from each other.
  3. We will not demean, devalue, or “put down” people.
  4. We will meet the effort where it’s at.
  5. Challenge the idea and not the person.
  6. Practicing active listening.
  7. Understand your own and others’ privilege.
  8. We have agency when we're critiqued.

On Open Source

You are encouraged to help each other out with programming, but unless otherwise specified you must turn in your OWN work.

Copying/pasting and reusing code is a key part of the programming process. You often learn best by modifying working examples rather than starting from scratch. We stand on the shoulders of giants; that’s the essence of open-source philosophy. However, there is a very important caveat: any open-source code you borrow and/or modify must be labeled as such.

On Crediting Code

  • Crediting ChatGPT for Assistance

    When ChatGPT helps you with JavaScript code or explanations, follow these steps to give proper credit:

    1. Acknowledgment: Begin your code or documentation by acknowledging that you received assistance from ChatGPT in crafting your solution or understanding the problem.
    2. Describe ChatGPT's Role: Explain how ChatGPT contributed to your solution. Did it provide code snippets, algorithm insights, or debugging tips?
    3. Original Code: If ChatGPT provided code, make sure to rephrase and adapt it to fit your assignment's requirements. Avoid directly copying and pasting code.
    // Acknowledgment: ChatGPT provided insights and helped debug this code.
// The following function calculates the factorial of a number.

function calculateFactorial(n) {
	// Your implementation here.
}

  • Using JavaScript Tutorials

    Incorporating JavaScript tutorials into your assignments? Follow these guidelines:

    1. Cite the Tutorial: Mention the tutorial's title, author, publication date, and provide a link if available.
    2. Specify Sections: If you used specific sections or code examples from the tutorial, clearly indicate which parts were referenced.
    3. Add Your Own Code: Always add your unique code, and ensure your assignment reflects your understanding of the material.
    // I followed the tutorial "Introduction to JavaScript Functions" by John Doe (Published on September 1, 2023, at www.example.com).

// In this assignment, I applied the concepts from the tutorial to create custom JavaScript functions:

// Your code here.

  • Utilizing Code Examples

    When integrating code examples from the web or documentation, adhere to these principles:

    1. Source Attribution: State the source of the code example by providing the URL, author, and publication date if available.
    2. Explanation: Include an explanation of how the code works in your assignment and why you chose to use it.
    3. Modifications: If you modify the code example, specify the changes made and the reasons behind them. 
    // I found the following code snippet on www.examplecode.com, posted by John Smith on July 15, 2023.

// I used this code as a foundation for my project with the following modifications:

// Your modified code here.

  • Collaborating with Others

    In collaborative JavaScript assignments, ensure proper credit to collaborators:

    1. Acknowledgment: Mention the names of your collaborators and their specific contributions to the project.
    2. Collaboration Details: Provide information about how you worked together, whether through pair programming, code reviews, or other methods. 
    // Collaboration Credit: I collaborated with Jane Doe on this JavaScript project.

// Jane contributed to the user interface design and helped troubleshoot issues.

// Your code and explanations here.

  • Referring to Open Source Projects

    When leveraging open-source JavaScript libraries or code, follow these steps:

    1. Project Reference: Clearly state the name of the open-source project or library you used.
    2. License Compliance: Ensure that you adhere to the project's license requirements, including proper attribution if necessary.
    // I integrated the "Chart.js" library (licensed under MIT) for data visualization in this project.

// The library can be found at www.chartjs.org.

// Your code utilizing the library here.

Colophon

We'd like to thank Xin Xin, Michael Fehrenbach, and Laurel Schwulst, whose pedagogy and class websites have inspired much of the structure and syllabus of this course. We'd also like to thank Mike Essl and The Cooper Union for having us.

This website was hand-coded using HTML, CSS, and vanilla JavaScript.

This website is set in Plus Jakarta Sans, an open source typeface by Tokotype.