Interactive One

January 22 - May 11, 2025
Monday / Thursday
3:30 PM - 6:00 PM
San Francisco - N17

Course Overview

Interactive 1 focuses both on learning the technical foundations of designing for the web, as well as on the conceptual and historical context of the web as a platform. We will focus on the browser as a environment for design and consider how to apply our design skills in that context, focusing on how the browser can be used as a tool for creative expression. We will particularly focus on mastering typography on the web.

Through projects, readings, workshops, and presentations we will explore the relevance of network technologies in the context of contemporary art and graphic design practices.

Students will learn basic HTML, CSS, and JS programming along with methods for conceptualizing, designing, and developing websites. Outcomes won't necessary be practical, nor pragmatically functional. Instead we will strive for a poetic understanding of design and the Internet as mediums for critical research and discourse.

To reiterate, this course has a formal emphasis, using what knowledge students have about composition, typography, and hierarchy as a basis for graphic design work in the browser.

Catalog Description

This class introduces students to HTML and CSS, the building blocks of websites. Through hands-on demos and incremental assignments, students gain the technical knowledge needed to interpret and structure web pages. Assignments explore the creative potential of basic code, from visual composition to typography to interactivity.

Material Requirements

• a computer you can do your work on
• a text editor (Sublime Text, etc)
• CCA Fluxus hosting and a FTP client (Cyberduck, etc)
• software for image/media generating, editing, and prototyping, Figma, Adobe XD, Sketch, Photoshop, your choice.

We will be using Sublime Text and CCA Fluxus hosting for writing and hosting our code this semester, we will get this set up in class together.

Crit Format

Crits will be conducted in class. I will assign a random order for crits, and each student will be asked to begin the discussion of another students project.

Readings

Throughout the duration of the course, groups of readings (and sometimes videos) will be completed in class, followed by discussion.

Class Activities

Class sessions will generally consist of the following activities.

• Lecture
• Studio work time with check in's with the instructor
• Small group meetings
• Project critique/discussion
• Group discussions
• Reading

Evaluation

In this class, students will strive to make memorable and functional online experiences. Projects should both take a stance (be poetic, critical, and clear) and also be functional (achieve their goals and not break). The invention of useful products is not the focus of this class, but the invention of useful, surprising techniques and approaches might be. Excellent craft in both code and design is important and expected. Taking risks is encouraged.

70% ... Projects
30% ... Exercises and Participation

A = excellent;
B = good;
C = satisfactory;
D = unsatisfactory;
F = failure.

A grade of C- or less is considered a failing grade for required courses within the major, and you will need to retake this course if you achieve a grade lower than a C.

Late Work

Students are expected to complete homework, including specific deliverables toward developing their projects, Code Academy exercises, final project outcomes, or any other assigned work by the class period they are posted as being due.

• Every week a project is late it goes down one letter grade, starting with the next class after it is due.
• Late exercises will be accepted, but marked down by half for being late.
• Work that is late due to any type of absence is the student's responsibility to catch up on but will be counted on time at the instructors discretion.

Attendance

If you absolutely must miss class, email me in advance so we can discuss it.

For more detail about attendance policies, you can refer to the College Handbook.

Plagiarism

Students are expected to follow CCA's Academic Integrity Code, including a prohibition on plagiarism, though its worth expounding on what that means for Interactive 1.

Code

Remixing existing code is often an important part of learning, but any code you take from an online resource needs to be commented with the source location where it appears in your project. For example:

For HTML

<!-- source: http://coolthings.biz/cool_thing -->
<div id="coolThing">
    does a cool thing.
    <div id="helpsDoACoolThing">
    </div>
</div>

or for CSS

/* source: http://coolthings.biz/cool_thing */
#doesACoolThing {
    cool: thing;
}

or for Javascript

// source: ChatGPT
function doACoolThing(){
    does a cool thing.
}

Further, when using found code make sure that your use of it is appropriate to your project, and outside code should not dictate the design of your projects as experienced by the user. If the function or style of your site is identical to your source, that is likely a problem. Any snippets of code from me you are free to use. If you are unsure if your reuse of code is appropriate, ask!

ChatGPT and other large language models can produce largely functional code, and as a general rule are governed under the above policy. You are expected to understand how your project's code works to be able to iterate and respond to feedback.

Design

You may not use graphics, images, video, audio, or any other design elements that you did not create yourself, or that are obvious recreations of others work, with the possible exemption of:

• Graphics such as a Facebook or Google icon in reference to those sites, etc, and that only in accordance with those organizations guidelines for such an elements use. In such cases those graphics should be a minor element in your design.
• If an assignment requires you to display found imagery and it is properly attributed.
• Use of imagery in the Creative Commons that is cited and used based on its license.

Using generated images as elements of larger designs is generally fine if sufficiently integrated into your own design and properly cited. However, do not use generated images in final project outcomes without approval.

If you are unsure if the use of a design element is appropriate, ask!

Written Content

Unless stipulated by an assignment, or approved by the instructor, all written content should be written by you. If it is approved by the instructor, make sure to cite the text appropriately.

ChatGPT and other large language models should be avoided while researching your projects due to the difficulty in verifying the accuracy of their output, but large language model output can be used where relevant in final project outcomes so long as it is cited as such.