Project 3: Structure and Interface (25%)

In the final project of the term, students will have an opportunity to design a presentation of their interactivity exercises into a single environment. This project will require a thoughtful investigation into ways of displaying your work for an engaging interactive experience.

Attention will be given to the presentation of visual and textual information through a deeper investigation of layout and typographic design for the web. This project will be web-based and will require further exploration of HTML/CSS for production and presentation. At the same time, ideas of information architecture, visual design and integration will be will be considered for designing more complex layers of information.


Content Development

  1. Although much of the content for this project is already developed, students are encouraged to look over their work from Project 1 and 2 to decide if there are anyways of furthering the concepts covered. If you would like to re-visit and expand upon the ideas (eg. interactivity in Processing) than this can be an option. Don't replace any of your past exercises, but rather extend them as further process.
  2. Also, you will need to develop written descriptions and/or anecdotes to articulate your work at various stages. These can be short but should be informative.

Information Architecture

  1. Start by making a list of the works to be included and think of ways of organizing these. There maybe more than one way to organize, so think about the most obvious (project, time) to the less obvious (interest, theme). Its okay to have multiple organizational schemes. Think about hierarchy of material, going from broad and general to more specific and fine-grained.
  2. From these schemes, develop a navigational map to visualize the various sections and how they are hyperlinked based on their relationships.
  3. Then construct wireframes (no visual treatment) to map the layout of your interface. Be sure to include as many wireframe screens as needed to display content in various states. For example, a selection can be made from a screen of thumbnails to then display a single image in more detail. This will help you decide on the interface features (eg. scrollbars, buttons, hypertext, etc) needed for your screen design.
  4. We will then generate a list of all the general content formats - things like images (eg.thumbnails, medium, full size) text (titles, headings, sub-headings, copy, code). This will help you begin to organize your content and consider formatting for the web (eg. image editing and CSS)

Visual Design

  1. On paper, sketch out at least two interface layouts with focus on composition but also incorporate the needed elements described in your wireframes. We can always go back to the wireframe, so don't worry if things change slightly.
  2. Design a composite in Illustrator or Photoshop to address visual style


  1. Integrate the visual comp ideas and content into HTML
  2. From visual design, develop styles and layouts in CSS
  3. Image development and formatting to be done to fit design (Photoshop/Illustrator)
  4. Create navigation functionality using HTML/CSS

Although this process is very structured, it doesn't mean your designs have to be completely conventional . You are encouraged to experiment and explore as done in the past projects. This structure is meant to be a guide in developing interactive projects but does not guarantee a successful outcome. But if followed, it scaffolds the process and allows for expanding visual and interactive possibilities.


This project will have incremental deliverables as follows:
  1. Content list, organizational theme(s), navigational map & wireframes (paper-based) and formats list - due week 9
  2. Navigational map & wireframes (digital); visual design comps (digital) - due week 10
  3. Final Integration for in class crit- due week 11

Even though these are meant to be touchpoints for project development, it is okay to for these phases to overlap. For instance, you should be working on visual design from the beginning in tandem with the other deliverables. These dates maybe more or less fluid, as determined by your instructor.