Interactive One

January 23 - May 8, 2025
Monday / Thursday
4:00 PM - 7:00 PM
San Francisco - GC5

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 given. For every reading, each student must submit 3 questions or 3 sentences to that week's reading thread before start of class the day of the assigned reading 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

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
15% ... Exercises and Participation
15% ... Readings

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

• Every week a project is late it goes down one letter grade.
• Late reading questions or observations will not be accepted.

Attendance

Students are expected to complete readings, Code Academy exercises, and lectures by the class period they are posted as being due. Work missed due to any type of absence is the student's responsibility to catch up on. 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 plagiarism policy. Further, here's some additional guidance in the context of Interactive I.

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: http://coolthings.biz/cool_thing
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.

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.

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.