Core Interaction

Index of /

Project Archive


Build a project archive and host it on your server space. This will serve as a home base for all the work you do in over the course of this semester. It should be well organized, clearly navigable, and it should look and feel specific to you.

Use this template to get started.


  1. Wireframe
  2. HTML
  3. CSS
  4. Build it out, live with it, revise


Your project archive should ...

  • Include an archive page for each of your assignments.
  • Feature a homepage with links to each of your assignments as archived per notes below.
  • Have a consistent, intuitive navigation system. As a visitor to your archive, I should be able to visit each project archive page individually from the home page. I should also be able to return to the home page from each project archive page (having to use the browser’s “back” button does not count).
  • Your project archive should be viewable at multiple widths and dimensions
  • Your project archive should feel like you.

Each individual project archive page should have ...

  • Description. 2–3 sentences about your work. What was the problem or assignment? How did you solve it? What insights did you have?
  • Documentation of your process as well as of the final result. This includes reference images and other resources — anything necessary to inform our understanding of your project. If your work is time-based or has multiple states, take screenshots or use Quicktime or Screenflick to create a screen recording. In short: as a viewer, I should be able to see and understand your work by viewing the project archive page.
  • Link to the actual project, viewable live and at 100% scale, hosted on your server space.
  • Versions. If you have done multiple versions for each assignment, include those as well.


  • Think modularly both in your design and structure. Come up with a system you can easily replicate with consistent results.
  • Name your files in a meaningful way. Devise a system for naming and stick to it.


Experimental Jetset

Very simple site & structure. Project documentation includes reference images, in-process iterations, descriptions of process and concept

Alex Klein & Mark Owens

The Excursus website is neither here nor there. But, it is nice to read about the thinking behind the Excursus identity.

Mike Gallagher

Oversized list as project index; color coding for different types of work.


Narrative-based project index; different colored blocks for different types of content within the paroject description.

Carvalho Bernau

Video documentation of interaction necessary to understand the concept

Tine Günther

Almost no project info. Very different aesthetic from the above references; Nice hover states + brief project excerpt on archive page