Rapid Prototyping in HTML5 and JavaScript
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 researcher and designer who builds programming environments that support spatial reasoning. His works include Apparatus a dynamic canvas for drawing interactive diagrams, Shadershop an interface for programming GPU shaders and Cuttle a design tool for digital cutting machines.