Rapid Prototyping in HTML5 and JavaScript


Dates: Saturday & Sunday, December 1 & 2
Times: 10am – 4pm
Course Length: 12 hours
Cost: $20/instruction hour, $240 total, $216 for GAFFTA Members
Location: GAFFTA, 923 Market Street, Ste. 200 San Francisco, CA 94103

Select ticket option


The process of iteration underlies every design discipline. As designers, we produce representations of our final concept: sketches, mockups, storyboards, physical models, etc. These externalized representations help us get out of our head. They allow us to experience our concept and therefore refine it. They also help us communicate our concept to collaborators.

In the design of interactions, whether for products or art pieces, static representations like sketches and storyboards can be insufficient for expressing how an interaction will feel. Better is to create dynamic representations which can be play-tested.

Javascript with HTML5 can be a very powerful medium for quickly producing these dynamic representations. Further, this medium is extremely accessible. We can produce prototypes for computers, tablets, or mobile devices, and we can easily share these interactive prototypes with collaborators over the web.

The goal of this class is to become comfortable using Javascript and HTML5 to rapidly prototype ideas in interaction design. We will see how to take an idea for an interaction, scope it appropriately, and quickly (on the order of an hour) produce a prototype that we can play with. We will also explore strategies for iterating this process, creating a series of prototypes finally resulting in a finished piece.

Participants are asked to come to the class with a few ideas for interactions that they would like to try. As needed we will then delve into topics such as:

+ Effectively structuring Javascript code and using Javascript libraries
+ Interfacing with the mouse, touch, keyboard, accelerometer, etc.
+ Prototyping for tablets and mobile devices
+ High performance graphics using Canvas, SVG, CSS3 Transforms, and WebGL
+ Video and audio, input and output
+ Realtime multi-person interaction (using node.js)
+ Interfacing with arbitrary hardware (using node.js and Arduino)

// Prerequisites:

Basic experience with HTML, CSS, and JavaScript

Toby Schachman


Toby Schachman is a programmer and artist. His focus is finding new perspectives in each of these fields and exploring the possibilities that these perspectives reveal. His current project is Totem, a new programming language for the real-time manipulation of shared dreams.

Toby graduated from MIT with a degree in Mathematics with Computer Science and is a Master’s candidate at NYU’s Interactive Telecommunications Program. He lives and works in New York City.