Intro to Interaction Design
Instructor:
Sam Lavigne
Mondays & Wednesdays 5:30 to 8:30
Syllabus
The official syllabus can be found here.
Schedule
Wed Jan 19: Introductions / Technical setup / The file system
Mon Jan 24: Reading 1 discussion / Basic HTML tags / URLS & links
Wed Jan 26: Intro to CSS
Mon Jan 31: Project 1 due
Wed Feb 2: Reading 2 discussion / CSS color / Typography / Images
Mon Feb 7: The box model / Positioning
Wed Feb 9: Wireframing / CSS layouts / Responsive design
Mon Feb 14: Work day
Wed Feb 16: Project 2 due
Mon Feb 21: Intro to p5.js
Wed Feb 23: Translation, rotation, scale / Work day
Mon Feb 28: Project 3 due
Wed Mar 2: Reading 2 discussion / Intro to animation / variables
Mon Mar 7: If/else, timing
Wed Mar 9: Mapping, noise, randomness
Mon Mar 21: Work Day
Wed Mar 23: Project 4 Due
Mon Mar 28: Reading 3 discussion / Intro to generative design / functions
Wed Mar 30: Objects part 1
Mon Apr 4: Objects part 2
Wed Apr 6: Loops, arrays
Mon Apr 11: Arrays of Objects
Wed Apr 13: Work Day
Mon Apr 18: Project 5 Due
Wed Apr 20: TBD
Mon Apr 25: TBD
Wed Apr 27: TBD
Mon May 2: Work day
Wed May 4: Final project presentations
Readings
- The Library of Babel by Jorge Luis Borges
- Fuck Off Google by the Invisible Committee
- Glitch Studies Manifesto by Rosa Menkman
- Black Gooey Universe by American Artist
Assignments
0: Upload
Create a Hello World HTML page and upload it to the server.
1: HTML Publication
Create a structured HTML document displaying the text from our first reading. Consider the tone and pace of the text as you express it through HTML. Feel free to utilize any HTML element as well as hyperlinks to communicate your idea. Please put your assignment in a folder named "borges" and upload it to your server.
2: HTML/CSS Publication: Manifesto
Create a website (with one or more pages) for a manifesto. You can either use the Glitch Studies Manifesto, or another one if you prefer (for example, Surrealist, Communist, Critical Engineering, Xeno femininist, Dadaist, Situationist). Consider the content, making decisions about layout, structure, pacing, images, color, and typography. Utilize tools within HTML and CSS, such as grid and positioning to develop dynamic layouts. Take advantage of what the web offers that the printed word does not: video, audio, animation, links that take you to completely different spaces, scrolling, etc. Please put your assignment in a folder named "manifesto" and upload it to your server.
3: Algorithmic Drawing
Use the shape and color functions in p5.js to draw a portrait of someone (not me please), or to draw a still life.
4: Animation
Animate your previous assignment, or create a new composition to animate. Your animation should respond to user input, like mouse movement, clicking, key presses and so on.
5: Generative Design
Create a generative work. Each time the sketch is loaded, or when the user clicks the mouse, a new scene should be drawn. Your scene could be a landscape, a character, and abstract pattern, or something else entirely.
6: Final
Iterate on a previous project you've made in the class.