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 require further exploration of HTML/CSS for production and presentation. At the same time, ideas of information architecture and interface design will be considered for more complex layers of information.


This project will have incremental deliverables as follows:
Content list, site map, wireframe, mood board - due March 15
Visual design comps- due Mar 22
Final Integration for in class presentation - due March 29

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 any opportunities for furthering the concepts covered. If you would like to re-visit and expand upon the ideas (eg. interactivity in Processing), 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 site map to plan the content and how they are hyperlinked based on their hierarchy.
  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 - these can be exported and used in the final piece.


  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
  5. Think of ways to integrate Processing within your design. You may need to change the colours used to match your site's look and feel.
    (How to embed your sketch in HTML page without Open Processing)

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