Project 3: Interactivity, Data and Design

In project 3 the subject matter issues that emerged in project 1 & 2 will be further researched to create an interactive visualization of data. The goal of the project is for students to learn the design processes, methods and techniques needed to design interactive information that goes far beyond the static web page paradigm. Interactive visualization of information incorporates multiple design modalities including data representation, interaction, interface and motion that are integrated in temporal and spatial forms.

The conceptual approach will be a representation of quantifiable data that adds a new layer of meaning to the nature of the medium already explored. For example, if your subject is television, you will research the published data concerning that medium and translate those numbers into an appropriate and compelling visual and experiential information graphic. Students will combine a variety of data types like statistical, geographic and chronological information to create a new coherent whole. Through this integrative process, the user will be presented with a unified visualization of these data sets to help them generate a deeper understanding of the medium.


  1. Research and record data from a number of information types (quantitative, spatial and chronological) and sources
  2. Compare and contrast the data to identify the significant relationships
  3. Conceive multiple views of the information; as one variable changes how does this effect the other data types?
  4. Conceptualize and sketch a visual representation for the information as a coherent and integrated whole
  5. Storyboard this sequencing of the changing visualization of the data
  6. Design interactions and screen behaviours needed for displaying information in various states
  7. Generate a language of visual elements to express the information graphically
  8. Translate sketches into functions using Flash/Processing
  9. Integrate individual functions into screen wireframes using Flash/Processing
  10. Migrate the visual and other content into the functional wireframe
  11. Fully resolve and integrate content, form and behaviour components into a clear creative and functional work

Ongoing throughout this process, students will need to develop the visual, text, media content


  1. Process posted to wiki including visual research, data research and bibliographic sources
  2. A Flash/Processing piece of final result embedded into an HTML document as part of Project 2


Week 1

in class
  • Introduce project
  • Discuss information design and interactivity - examples
  • Flash/Processing - review movie clips, timeline control, best practices
at home
  • re-read Infographics: Being and Doing for some frameworks and strategies
  • find two examples of interactive infographics to critique and post to infographic index
  • research, compile and analyse new information types (quantitative, spatial and chronological)
  • conceptualize and sketch visual representations in comparison states
  • interaction design, visual language

Week 2

in class
  • Review concepts and sketches
  • interaction design, visual language
  • work on interactions and wireframes
at home
  • complete interactions in wireframe form
  • integrate visual elements into Flash/Processing (prototype)

Week 3

in class
  • review prototype with visual elements
  • in class consultation and production
at home
  • refine all components into complete functional and coherent work
  • integrate into project 2 website

Week 4

Project 3 is due for in class presentation