Project 3: Structure and Interface (30%)

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.


This project will have incremental deliverables as follows:
  1. Content list, organizational theme(s), navigational map; wireframe; mood board; due week 10 - Mar 9
  2. Visual design comps- due week 11 - Mar 16
  3. Final Integration for in class crit- due week 12 - Mar 30

Even though these are meant to be touchpoints for project development, it is okay to for these phases to overlap. For instance, its okay to 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.


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 content list of the works to be included and possible organizing themes. 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.

Visual Design

  1. Develop a mood board
  2. 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.
  3. Design a visual 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.

Mood Boards

Mood boards are used sometimes in fashion, advertising and interior design to generate a "feeling" or mood through visual stimulus. Traditionally photos, colours, textures, patterns, shapes, text from magazine and newspapers, pieces of fabric and wallpaper cuttings are attached to a panel. The arrangement of these objects also can help stimulate visual thinking about the design.

external image moodboard-sam-large.jpg


It is analogous to visual brainstorming as the rule with mood boards is that "anything goes". It is not meant to formally represent the design but serve as inspiration that can promote the visual design. Colour palettes can be developed using mood boards.

Include a set of keywords and small written rationale for the mood boards posted in the team wiki

Examples of Mood Boards:
Qualiflyer VIP Lounge
Peachpit Books
All That Malarkey
Life Cleaver

Visual Composites

The visual composites are a set of static images or screen designs that transform the information architecture and site map into a series of fully designed interface screens.The branding,visual hierarchies, typographic style, colour and layout will be well defined at this stage. These are usually initiated through a series of visual mockups or thumbnail sketches.

external image fig05.jpg
If you want to put your visual comp on your page, a good way to do it is put it on flickr, it gives you a glimpse of what it will look like when it is put into an interactive storyboard.

Here is an example: