P04: Web


Working with the concepts and materials developed in all of your prior projects, you will be designing an offline and online approach to help residents of Vancouver engage and navigate through information on one of the election topics we have covered this term:

The goal of this project is to inform and direct the individuals who view the offline materials to move to the online materials.

What are 'offline' materials?

The offline materials are any non-web-based material that helps inform residents and directs them to the online materials for further information. The offline materials are flexible in their form (i.e. print, physical, experiential, etc.) and you should consider the different approaches to information design we have seen and discussed over the course of the term. Please ensure that these materials are produceable today; as in, we can actually make what you are proposing using today's technology.

The final offline materials need to be sufficiently refined to help us understand the information being conveyed and the experience of the audience. For example, print materials should be fully realized, while physical items — i.e. a talking trash-can — can be Wizard of Oz'd. Should you be unsure of level of refinement expected, please check with your instructors.

What are 'online' materials?

The online materials must be a fully-responsive website and should be formed of the existing collection of information provided by the city. This being said, please design the site without any Vancouver City branding and focus on tailoring the content and structure as needed for your project.

There are no set number of pages required for the online materials, so ensure that you are conveying the information provided effectively. You are welcome to edit the content if you would like but please be mindful of your time, as we will only be grading you on information architecture concerns such as content structure and labelling.

This project is to be completed in groups of three.


Before your lab time on Nov 30/Dec 1.


30% of your final grade.


There are a number of weeks in which to complete this project, so please make sure to read the instructions below carefully and note what are individual and group deliverables.

Starting Oct 26/27

  1. As a group complete the team contract for P04.
  2. as a group, determine all the sections that need to be built for your online materials and split the sections as evenly as possible amongst yourselves for building. Feel free to draw on your earlier wireframes as a reference of what to build.
  3. Individually build out your subset of HTML for all your sections (no CSS yet). Ensure that you are using:
  4. Individually, identify what additional content is needed. This list should include:
  5. As a group, come up with five possible offline approaches to engaging individuals in the given information. Think about all the different approaches to information design we have seen and discussed over the course of the term, and what might engage individuals sufficiently to have them then engage in the online materials. We challenge you to think beyond the confines of 'traditional' information design. As time will be tight in the labs, we recommend the following "mad-lib" structure to prepare explanations of your offline approaches with: Our 'offline' approach is a (insert final form) that would help inform (insert who is this for) about (insert what it informs about). It would be successful in informing them because (insert why it would succeed) and would guide them to the online materials through (insert how they are lead to the online materials).
Due in your Nov 2/3 lab:

Starting Nov 2/3

  1. Individually, with your subset of pages apply a responsive grid structure and begin styling them. Ensure the following:
  2. Individually, from your list of content compile the image and information visual content you require as needed (some options listed below). Keep photos useful and realistic (i.e. avoid palm trees). Cite any material that is not yours in your code.
  3. As a group, develop your initial desings for one offline approach to engage individuals. This can include visual, physical, experiential, or audio information design.
Due in your Nov 9/10 lab:

Starting Nov 9/10

  1. As a group, consolidate your pages into one set. Ensure that:
  2. As a group, refine your desings for your offline approach.
Due in your Nov 16/17 lab:

Starting Nov 16/17

  1. Based on crits in the labs revise your website as a group, focus on:
  2. As a group, refine your offline approach and prepare a final digital or physical copy of the designed materials (as appropriate).
Due in your Nov 23/24 lab:

Starting Nov 23/24

  1. Based on final crits refine both your website and offline materials to a high-fidelity final version. Please take into consideration the requirements of the rubric to aim for your ideal grade.
  2. Put together a presentation which takes only three sminutes to:

Final Delivery

Final deliverables are due to Canvas before your Nov 30/Dec 1 lab and make sure to double-check all your submitted files to ensure they can be opened. Final submission is:

Grading Rubric

project will be graded on the following criteria, a more detailed rubric is available on the course pages.:

  1. Process — weekly deliverable checks, quality/quantity in exploring designs (4 pts)
  2. Content/IA — flow through information, content quality/use (3 pts)
  3. Final Design/UX — visual language, consistency, interactivity, responsiveness (7 pts)
  4. Code/Development — validity, readability, cleanliness and structure (7 pts)
  5. Presentation — punctuality, use of evidence, quality of rationale (4 pts)