core INTERACTION studio 2020 [email protected]
STUDENTS (+)

Oscar Andrew Cody Hughes Audrey Razak Dolores Qi Kelly Liu Camila Giraldo Oriana Zwerdling Ashley Heo Shaanzya Dongre Malavika Srinivasan Eunice Chan Arlo Goldman River Marquardt Jen Fu Arman McLean

Core Interaction Studio 2020, Section F


Taught by John Provencher


Tuesday & Thursday, 12:10pm - 2:50pm


Parsons 2 W 13th ST, Room 1013


What can a website be? In this studio course, students will answer this question in multiple ways while analyzing / discussing the web’s relationship to graphic design in the past, present and projected future.

Students in this course will practice skills in research development, concepting, sketching/prototyping, content architecture, interactive experience, graphic design, typography, image-making, writing and front-end development (HTML, CSS, JS).

The course assigns 5 websites that are meant to explore distinct possibilities of publishing to the www.

↳ full syllabus

A WEBSITE that is mostly written


( HTML ) ( 1 week )


description—HTML is a programming language that is about the craft of writing, specification and arrangement. We’ll use the affordances and opportunities of HTML to write a web-page about a past piece of work.


description—write a preview for a past project you’ve done. This can be a project you’ve done at / or outside of the college.


requirement—Write a very general overview of the piece, what your were trying to do, what you did and didn't achieved at the end with some detail information of the piece: (date it was created, it’s material, dimensions and medium). Your preview should have a title, body type, information and at least 1 link of an inspiration for the project.


requirement—at least 1 image of the piece.


optional—include a short biography somewhere on the site.


linking pages
folder structure
html basics
html 5 tags

WEBSITE As generative tool


The web is capable of not only formatting a web-page, but also post-processing the inputs of the user. For example, we use post-processing tools on images and videos before posting to social media, uploading to the web, etc. In this project, we’ll explore the edges of what a tool can be and the options of the web development to create a user-generated tool...


requirement—create a tool where the user can give an input to recieve a unique output


presentation
css filter
css transform
css tool

WEBSITE as SCREENSAVER


( HTML, CSS ) ( 2 weeks )


Create a web-based screensaver that changes in various ways over time.


A screensaver should signify a change from on to off.

A black screen uses no light.


This screensaver could be inspired by, or related to, something in our natural world.


presentation
css animation documentation
css animation example

A CATALOGUE on "nothing"


( HTML, CSS, JS* ) ( 4 weeks )


Websites are often used to catalogue objects to be viewed, sold, downloaded, etc … Effective catalogues will incorporate meta-data on each object to help users navigate/sort through a collection. We’ll be creating a website to document a collection of “nothing” and catalogue them using meta-data.


For project details, see the presentation link below


presentation