Week 2: Process & Context

Today’s lecture was about the Planning tools for interaction and information design and its context:

  1. Research the problem that needs to be solved
  2. Understanding the users and their needs
  3. Planning Tools and Techniques:
      • Storyboard
      • Flowcharts
      • Sitemaps
      • Wireframes
      • Visuals (Comps)
      • Prototypes


Storyboards are a series of illustrations displayed in sequence for the purpose of previsualizing a process. They can also help us visualize screen-based interaction and motion graphics. It is essentially a large comic strip of the proposed interactive or animated piece used to help designers visualize scenes, interaction and the treatment of time. Storyboards are also useful in finding potential problems before they occur.

Storyboards can easily morph into the next stage of interactive design production, modelling or nonfunctional screens of the interactive piece. Traditionally, in animation, storyboards can mix with short sequences of motion, stills and animatics to gain a better understanding of the finished product.


A flowchart is a graphic illustration of the steps to follow in order to arrive at the solution to a problem. It is a program design tool that you use prior to writing the actual program/interactive.

Sitemaps/ Siteflow


Wireframes demonstrate the structure, the layout and visual hierarchy of the information.

Visual Comps


Prototypes simulate the interactions to test the functionality, validate ideas and hypotheses as well as experimenting and failing fast. Ways to create a prototype can be with manual tools such as pen-paper&scissor or Digital tools to create low- or high-fidelity prototypes