Comm Lab - Schedule

NAVIGATION

Assignment Due

Week 1 - 01/19 - Introduction, 30MFF, Wireframing
Week 2 - 01/26 - Web Fundamentals, Web Design
Week 3 - 02/02 - Web Layout, Web Interactivity
Week 4 - 02/09 - Storytelling, Assignment #1 Due (02/09)
Week 5 - 2/16 - Visual Design, CSS and JavaScript
Week 6 - 2/23 - JavaScript Libraries, Work Session
Week 7 - 3/2 - Intro to Sound, Digital Sound, Assignment #2 Due (3/2)

SPRING BREAK

Week 8 - 3/16 - Sound Storytelling, JavaScript Libraries for Audio
Week 9 - 3/23 - Work Session, Assignment #3 Due (3/25)
Week 10 - 3/30 - Video Storytelling, Video Production, Video Editing
Week 11 - 4/6 - Video Interactivity, Video Effects
Week 12 - 4/13 - Portfolio Websites, p5.js, Working Session
Week 13 - 4/19 - Bootstrap, Assignment #4 Due (4/20)
Week 14 - 4/26 - Final Assignment Check-In, Course Evaluation, Assignment #5 Due (4/29)

WEEK 1

01/19 - Introduction top

Class Introduction

Lecture - Introduction
Student Introductions
Overview + Syllabus
Work Examples

Comics

Sound & Music Video

Video Editing & Visual Effects

Resources

30 Minute Film Festival

Getting videos out of your phone:

USB cable (Android File Transfer for Android, iPhotos for iOS)
Upload them to Google Drive/iCloud
Share them on Whatsapp/Telegram

Editing videos with:

Upload your vidoes to this Google Drive folder.

Homework - Due 01/21

JOIN Interactive Media Discord server #commlab and post an introduction to #introductions. Discord invite is on NYU Classes and in your email.
PICK one of the work examples above and write a couple of thoughts about it on Project Responses document. (Login with NYU account to access.)
READ Neil Postman - Amusing Ourselves To Death and write down some thoughts on the reading on the Reading Responses document. (Login with NYU account to access.)

To what extent did the author's vision turn out to be correct? How did it turn out to be wrong?
If one city (U.S. or not) was to be the icon of our technological age, what would it be?
What are some things that are harder to communicate online? What are some things that are easier?

READ Web Tuts "Introducing Wireframes to Your Design Process"
DOWNLOAD

Adobe XD

01/21 - Wireframing top

Discuss Homework

Amusing Ourselves to Death
Example work

Wireframes

Lecture

Discuss Assignment #1

Adobe XD Intro

Recorded demo: link
Transferring your sketches onto XD
In the future, feel free to use XD to sketch out your wireframes

Homework - Due 01/26

FINISH a "Basic Wireframe" for your 30MFF World Premiere Site using Adobe XD. Be prepared to share your work next class. Add a link to your wireframe to Exercises document.
READ Scott Murray's Interactive Data Viz "Ch.3 Technology Fundamentals" up to but not including JavaScript.
DOWNLOAD

Sublime Text 3 or Atom or Visual Studio Code or Brackets

WEEK 2

01/26 - Web Fundamentalstop

Review Wireframes Homework

Web Development Fundamentals

Lecture - Web Fundamentals
Tutorials / Resources

HTML

CSS

Videos

Don't Fear The Internet
Lynda.com - HTML Essential Training

Interactive Tutorials

Codecademy - HTML & CSS
Khan Academy - HTML/CSS Making WebPages

Workshop - Making A Web Page

Code examples
Recorded demo: link

Must include:

A title
A paragraph
A link
An image

Homework - Due 1/28

EXPLORE the "Tutorials / Resources" listed above
READ The Importance of Color, Font, & Icons"
START building a web page with HTML and some CSS for your 30MFF World Premiere Site (Assignment #1). We'll cover layout more next week, but for now get the main content into the page or pages (if you have more than one). Create a folder for your web pages in the shared drive folder, and upload your HTML files. Think about what kind of interaction you want to happen. Be prepared to share your progress in class.

01/28 - Web Designtop

Web Design

Lecture - Web Design Fundamentals
Examples

Resources

Workshop - CSS Layout

CSS Resources

Learn CSS Display Property in 4 Minutes (inline vs block, div vs span)
Learn CSS Position in 9 Minutes

Homework

READ Janet Murray - "Inventing the Medium" and add your thoughts to the Reading Responses document.

How can technologies affect the formation of cultures?
What are some of the challenges when it comes to designing for digital media?

READ CSS Positioning 101.
WORK on your Assignment #1.
DOWNLOAD GitHub Desktop and create a Github account.

WEEK 3

2/2 - Web Layouttop

Review Homework

Inventing the Medium

Web Development 2.0

Lecture - CSS & GitHub Pages

Fonts

Colors

Layout

Tips

CSS Tricks - Full Page Background Image
CSS Tricks - Text on Image

Templates

Lecture references

Modernizing Arabic Type for a Digital Audience

Workshop

DOWNLOAD

GitHub Desktop

UPLOAD your website to GitHub pages

Create a GitHub account here
Video Demo
Create a GitHub Pages Website and upload your work to it.

Homework (Due 02/04)

READ MDN JavaScript Basics.
READ JavaScript section of Ch.3 - Interactive Data Viz for the Web by Scott Murray up to but not including the section on SVGs.
UPLOAD what you have so far for Assignment #1 to GitHub Pages, and post the link to your website in the Exercises doc.
WORK on your Assignment #1.

2/4 - Web Interactivity top

Intro to JavaScript

Lecture - Intro to JS
Data Types
The Document Object
Selectors & Click Events
Conditionals
JavaScript Resources

Pierre's video demo
JavaScript For Cats
Codeacademy "Build Interactive Websites"

JavaScript Examples

Homework

ADD some interactivity to your website.
WORK on your Assignment #1.
CREATE a Google Doc inside this shared drive folder for your Assignment #1 documentation
DOWNLOAD Adobe Photoshop
- Login with "nyu.edu" (NOT your full email) and then you will be redirected to login through the NYU 2-factor login system. Then download Photoshop through Creative Cloud
- Full login instructions

WEEK 4

2/9 - Assignment #1 Due / Photoshop top

Present Assignment #1

Slides

Photoshop - "Compositing Images"

Watch the Photoshop video demo
Composite two images with one another.

Homework - Due 02/11

CREATE a story in 3 Images (a.k.a. the power of sequencing) - collect 3 images (your own photos, screen grabs, doodles, cut from magazines, etc) that "tell a story" in TWO different ways. Each version MUST have a beginning, a middle, and an end. They can exist on paper, on a web page, wherever - just need to be able to present and share it with the class. Add your files / scans / links in this shared Google drive.

2/11 - Storytelling top

Review Homework

Discuss Readings
Share 3 Image Stories

What Is A Story?

Lecture - Storytelling Fundamentals & Sequential Art
The Significance of Plot Without Conflict
Ira Glass - Storytelling Part 1 of 4

Discuss Assignment #2

Homework

READ Chris Crawford Ch.1 Storytelling and add your thoughts on the Reading Responses document.

What is the point of storytelling?
What do you think of the author's distinction of pattern thinking and linear thinking?
What are some important components of stories?

READ Ch.1 through 4 of Scott McCloud’s “Understanding Comics”
SEE into Assignment #2 groups here.
START writing scripts and drawing storyboards / wireframes for Comic project. Be ready to share them in class next week.
DOWNLOAD Adobe Illustrator

WEEK 5

2/16 - Visual Design top

Review Homework

Discuss Readings
Share project ideas and wireframes/scripts

Introduction to 2D Design & Software

Lecture - Intro to Digital Imaging

Introduction to Illustrator

Video demo here: link
Create an image on Illustrator
Export that image as an SVG and make it interactable on the web

Adobe Creative Suite Resources

Adobe Photoshop

Create An Animated Gif In Photoshop
Open Source Alternative - GIMP

Adobe Illustrator

Open Source Alternative - Inkscape
SVG JS Libraries

What Is InDesign?

Homework

READ Ch.5 through 9 of Scott McCloud’s “Understanding Comics”
WORK ON Images & Wireframes for Assignment #2. Start coding layout of website. You should have a basic coded version of your website ready for next class.
EXPLORE Adobe Suite Tutorial Video(s)

Adobe Illustrator

Adobe Photoshop

Lynda.com Tutorials - Adobe Illustrator & Adobe Photoshop Essential Training

2/18 - CSS and JavaScripttop

Review Homework

Discuss Readings and progress on wireframes/scripts

CSS & JS Code Examples

Slides
CSS Flexbox

Homework

READ Rafael Rozendaal - Exhibition catalogue
COMMENT on one of Rafael Rozendaal's websites. Write down some thoughts on the Project Responses document.

How does the title of the website relate to the visuals?
What kind(s) of emotion(s) and idea(s) are being expressed?
How is color, motion, sound and interactivity used to convey these emotions/ideas?

WEEK 6

2/23 - JavaScript Librariestop

Review Homework

Share progress on the comics
Discuss Projects

Code Demos

slides

Workshop with parallax

Video demo here
Make a webpage with a scroll animation, which tells a story.

Working with JS and libraries

Resources

jQuery Scroll Path by Joel Besada
Vertical Parallax Scrolling Firewatch (JS only)
Rellax - Lightweight Vanilla JS Parallax Scrolling
Animate On Scroll (GitHub)
33 Enticing Scrolling Effects (includes Animate Scroll, Scroll Path, and Skrollr)
JInvert Scroll
Skrollr
18 Stunning Parallax Scrolling Sites (per Yousra!)
Parallax Scrolling (parallax.js)
Parallax Scrolling from Scratch
Flexbox Guide
Lorem Ipsum Generator (please use for prototyping only)
Virtual Computer Lab (vcl.nyu.edu) for access to Adobe Creative Suite

Public Domain Images

Smithsonian Open Access
MOMA Public Domain Images UK
Raw Pixel Public Domain Images
The Met Open Access
Getty Images
Digital Archive of Soveit Children's Book Illustrations

Homework

WORK on your Assignment #2.

2/25 - Work Sessiontop

Work Session & Project Check-in

Homework

WORK on your Assignment #2.

WEEK 7

3/2 - Assignment #2 Due / Intro to Soundtop

Present Assignment #2

Introduction to Sound

Lecture / Discussion - Intro to Sound
Examples/Inspiration - Click to View Links

Narrative

Site Specific

Maps

Remix

Sonification

Performance

Programmatic

Various Others

Discuss Assignment #3

Homework

DOWNLOAD Audacity
MAKE A GROUP for Assignment #3 and add your names to the spreadsheet. The group CANNOT be the same as your group for assignment #2.
READ & WATCH Vimeo Video School - How to Get Great Audio Without a Recorder

Try a few test recordings of the list below. Create a folder in this shared folder and add your recordings there.

ambient sounds
someone speaking or narrating
two or more people speaking at once
sound effects

REVIEW Interactive Audio Examples:

Pick a sound example above (click on Examples/Inspiration) and write down some thoughts on the Project Responses document

What role does audio play in the purpose of these sites? What is it communicating?
If the piece you listened to wasn't interactive, what would an interactive version look like?
What modes of interaction result in hearing the audio, and how does that relate to the tone or feel of the site? In other words, what does that relationship do for the user experience?
(EXTRA) Have you found an example of an interactive audio site that is particularly inventive or engaging? What makes it so?

3/4 - Digital Soundtop

Review Homework

Recorded sounds
Discuss Interactive Audio Examples

Workshop: Intro to Audacity

Slides
Recorded demo: link

Make a soundscape from your hometown
Find related files in Github repo for Comm Lab.

Software Resources

Audacity
Audacity Tutorials
Resources

Homework

WORK with your partner(s) to brainstorm ideas for your sound piece.

WRITE a rough script for your sound piece.
BEGIN making a list of what audio clips to record and collect.

PREPARE to share your sound project ideas next class.

SPRING BREAK SPRING BREAK SPRING BREAK

3/16 - Sound Storytellingtop

Review Homework

Share Sound Projects Ideas

Lecture by Kristin Mueller: Sound Theory and Design

Sound Interactivity on the Web

Lecture / Discussion - Basics of Sound on the Web
Video demo: Basics of Audio Element, Using Tone.js

Homework

WATCH Kirby Ferguson’s Embrace the Remix

Think about these questions and write down some thoughts on the Reading Responses document.

Do you agree with Kirby Ferguson that everything is a remix? Why or why not?
In what ways might your own creative practice involve remix?
How does the fact that many works come in a digital form impact their role in remixing?

3/18 - JavaScript Libraries for Audiotop

Review Homework

Embrace the Remix

Workshop: JS Library for Audio

Slides
Create a demo web page with interactive sound
Share with the class

Resources

JS Libraries

Homework

WORK on Assignment #3.

WEEK 9

3/23 - Work Sessiontop

Work Session and Project Check-in

Homework

WORK on Assignment #3.

3/25 - Assignment #3 Duetop

Present Assignment #3

WEEK 10

3/30 - Video Storytelling / Video Productiontop

Discuss Assignment #4 (Due 4/19)

Introduction to the Moving Image

Lecture / Discussion - Video Fundamentals - Storytelling with Video
Examples/Inspiration - Click to View Links

The Late Shift Movie & Bandersnatch

7 Deadly Sins
The Faith Project
The Source - Conversations with Doug Aitken
Do Not Track
In Limbo
The Wilderness Downtown
Performing Arts With Google + AFrame JS Library
Within Films 360 Films & Clouds Over Sidra
Bear71 An Interactive Documentary + Bear71 Web VR
A Way To Go VR Experience
Peanut Gallery Films
Animation & Effects Examples

Western Spaghetti
White Stripes - Button to Button
How To Make A Stop Motion Video
Animation with Overhead Transparency
Green Screen & Compositing - Inside Game of Thrones

Homework

JOIN into groups for assignment #4 -- add your names to the Teams spreadsheet.
BEGIN a rough script for your video piece.
SKETCH some storyboards and wireframes.
WATCH Every Frame Is A Painting "Akira Kurosawa - Composing Movement"
WATCH Lewis Criswell "Colour In Storytelling"
DOWNLOAD Adobe film editing software

Premiere Pro

04/01 - Video Editingtop

Editing with Premiere

Slides
Recorded demo here

Resources

Download Adobe Premiere
The Art of Editing in The Good, the Bad, and the Ugly
Lynda.com - Foundations of Video - The Art of Editing - sign in with organization account
Adobe Premiere CC Keyboard Shortcuts
Robert Castillo's "S.P.I.C. The Storyboard of My Life" - The Bottle Incident & The Bread Mess
Vimeo Video School "An Introduction to 3 Point Lighting"

Homework

WORK on Assignment #4

FINALIZE script and storyboards.
CREATE shot list.
START SHOOTING video and audio.

READ In The Blink Of An Eye (pp.1-37, until "Afterword: Digital Film Editing") and add some thoughts to the Reading Responses document.

What does one have to keep in mind when editing a movie?
What goes into choosing, and making a good cut?
Take a scene from a favorite movie (or commercial) and give examples of where it is using one of the Six Rules for a cut.
What might a "blink" be in a web-based interactive piece?

WATCH The Cutting Edge - The Magic of Movie Editing (2:21 - 6:12)
DOWNLOAD Adobe film editing software

After Effects

WEEK 11

04/06 - Video Interactivitytop

Slides

Review Homework

Share project ideas
In the Blink of An Eye

Resources - Video on the Web

MDN: video file formats
W3Schools Fullscreen Video
Vimeo Help Desk
Vimeo Player Parameters
Vimeo SDK Reference
YouTube Embed Parameters
Controlling YouTube Videos with JS (from 2015)
Plyr Media Player
Plyr Github Link
YouTube Fullscreen Background Demo

Homework

FINISH SHOOTING video and audio.
BEGIN editing video and audio.
CREATE rough layout of website and interactions.

4/8 - Video Effectstop

Discuss Project Progress

Animating with After Effects

Slides
Recorded lecture here

Resources - Animation and Visual Effects

General

Character Animation

Motion Tracking
Rotoscoping to create clone of character
Green Screen with Garbage Matte

Basic Typography & Motion Graphics
Vimeo Scary Special Effects Part Boo
Tutorial: Getting Started with Content-Aware Fill (object removal)

Homework

CREATE layout of website and interactions.
FINISH your video production.
FIX all of the smallest issues.
ENSURE your layout is responsive in all orientations and screen sizes.

WEEK 12

4/13 - Portfolio Websites / p5.js top

Lecture

Slides

Discuss Final Assignment

Responsive Web Design

Responsive design tutorial - Learn responsive web design in 5 minutes
HTML Responsive Web Design
Responsive Web Design - Introduction

Personal Website Examples:

Petra Cortwright
Constant Dullaart
Martine Syms
aaron montoya-moraga
Talia Cotton
Jenna Sutela
Julius Volz
Chris Bolin
Kohei Nawa
Bruno Simon
Laurel Halo
Mina Kim
Pat Shiu
Bret Victor
Agnes Cameron
Laurel Schwulst

Overview of p5.js

Homework

READ My Website is a shifting house next to a river of knowledge. What could yours be? Add your thoughts to the Reading Responses document.
Add your thoughts to the CL Readings Google Doc

What are some of the metaphors the author uses for a website? What are some other metaphors we could use?
Are interesting websites only for/by artists? Why? Why not?
Take a look at the author’s Arena channel and pick a quote. Why did you pick this one?

PICK a personal website from the list above and write down some thoughts on the CL Readings Google Doc:

What kind of feeling do you get from the overall direction of the website? What kind of personality does it convey?
To what extent do you get a good grasp of which kind of person is the website's creator?
Are there any unusual aspects that you've found unique or interesting?

READ Against A User-Hostile Web

4/15 - Work Sessiontop

Work Session and Project Check-in

WEEK 13

4/20 - Assignment #4 Due / Bootstrap top

Present Assignment #4

Bootstrap Demo

Slides

4/22 - Work Sessiontop

WEEK 14

4/27 - Final Assignment Check-intop

Present portfolio work in progress for feedback

Homework

FIX all of the smallest issues.
ENSURE your layout is responsive in all orientations and screen sizes.
DUE Final Portfolio Assignment is due on 4/29. No documentation due.

4/29 Final Assignment Due / Course Evaluationtop

Voluntary Final Assignment Presentations

Course Evaluation

Goodbyes!