Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
78 lines (59 sloc) 6.13 KB

Project 4: Interactive Graphics on the Web


Your final project will consist of three full-browser illustrations (or visualizations, or even simple games), a navigation page that provides access to all of them, and a documentation page describing what you did and how you did it. You must incorporate some form of rendered graphics (SVG vector graphics, CSS shapes, and/or canvas-based graphics), and must use JavaScript in some way to manipulate DOM elements and/or provide interactivity.

Your focus should be on visuals and interaction, rather than text (although you can include some text if you feel it will enhance the appearance and/or interaction of the site). Your project does not need to be highly complex. It should, however, be polished.

I will allow you to work with a partner, but only if in your proposal you provide detailed breakdowns of each person's specific responsibilities.


I have put together a list of tutorials and examples that you can use for this project. If you find other sites that you think would be useful to add, let me know.

Project Proposal (submit to myCourses and post to GitHub by 8am on Monday, 24 April)

Before thinking about the technical aspects of your project, take some time to consider how you would like to approach it. What kind of experience do you intend to create? How will the three drawings relate to each other aesthetically and/or conceptually? What kind of interactivity will there be and how will you achieve it?

Required Proposal Elements

  • A brief (~200 word) description of what you plan to do
  • Sketches (hand-drawn, digitally designed, or coded) to illustrate your ideas for the navigation page and the illustrations
  • If you are proposing to work with a partner, a clear breakdown of each person's individual responsibilities
  • A description of what you will need to learn in order to implement your idea, and what resources you'll use to accomplish that.
  • A link to the GitHub repository for your project (see below)

GitHub Repository

Create a new GitHub repository for your final project. Initialize a README file that includes the text of your proposal. If you will be working with a partner, create a single repo and add the other person as a collaborator. (I would prefer that you make the repo public, but if you feel strongly about making it private, make sure that you add me as a collaborator, as well.)

Submitting Your Proposal

Submit your project proposal to the myCourses dropbox by 8am on Monday, April 24th. If you are proposing to work with a partner, the proposal should include both of your names, and you should each submit a copy to myCourses.

Final Project (Updated on GitHub and linked from your course page by 10:30am on Tuesday, 16 May)

Three Illustrations/Visualizations

Each of the pages should have content that is designed to fill the browser window, and includes at least one raster or vector graphic that is rendered in the browser (such as SVG, the HTML canvas, or even CSS-based shapes). You should also include some kind of motion graphics, using CSS, JavaScript, and/or canvas animation.

Navigation Page

Your navigation page should show as much attention to design as your illustration pages. The page should provide a basic introduction to what the project is and who created it, and links to navigate to each of the three illustration pages, and to your documentation page. You should also provide some form of JavaScript-based interactivity on this page. (The interactivity should add value to the page in some way, rather than being gratuitous.)

Documentation Page

Your documentation page should use a design that clearly links it to the rest of the site. It should describe what technologies and techniques you used to create the site, what you had to learn in order to complete it, and how you went "above and beyond" the basic functionality that we covered in our in-class exercises. If you worked with a partner, you should have separate sections for each person describing what you did and what you learned in order to do it.

Version Control

All of your project files should be maintained in the GitHub repository you created with your proposal. Your commits to the repository will serve as documentation of your development process; any significant changes to content or function should be committed to GitHub.

General Requirements

  • JavaScript and CSS should be linked to as external documents
  • HTML and CSS should validate properly (this applies only to CSS and HTML that you create, not to linked libraries)
  • All pages should be work properly in current versions of Chrome and Safari
  • To get the "above and beyond" points, you must do something more than replicate the functionality from in-class exercises

Submitting Your Project

You must have your completed project and your GitHub repository linked from your main class website by 10:30am on May 16 (our scheduled final exam time). If you worked with a partner, you both must have links to the project and repo in order to receive credit.


Component Points (40)
Description 3
Sketch(es)/Mockups 4
GitHub Set Up with README 2
Final Project
Navigation page including links to illustrations and documentation 3
Interactive component to navigation page 1
Three full-screen illustration/visualization pages 3
At least one rendered raster or vector image per page 3
Motion graphics using CSS and/or JS on each page 3
Documentation page discussing techniques used 1
All pages use consistent and thoughtful design 4
Project files maintained in GitHub repository 2
GitHub README file updated with final project info 1
HTML validates properly 1
CSS validates properly 1
CSS stored in external file 1
JavaScript stored in external file 1
Documentation of "above and beyond" work 5


This assignment is based in part on a project from Joshua Clayton's Drawing on the Web class at NYU.