ah teaches information design

P4: Web

Working with the concepts and materials developed in all of your prior projects, you will be designing a website and information design to have either SFU researchers, students, or an external audience understand SFU's sustainability research.

The materials provided contains a lot of information. You are not required to include all that information, but you will be required to include the following:

  • An overview of what is sustainability research.
  • An explanation of two pieces of research by different researchers.
  • A clear connection between the overview of sustainability research and the explanation of specific research.

The goal of this project is to inform the individuals who view the information designs (digital signage, motion graphics, or otherwise) materials — which present an introduction — to move to the website materials — where they can get more depth (as appropriate). Within this project you can take a more persuasive approach if you would like by suggesting direct actions that individuals should take. Though keep in mind that within this course you should never intentionally misrepresent the data you are presenting for the purposes of swaying someone's opinion.

This project is to be completed in groups of 3.

What are the Information Designs?

The information designs are any non-web-based material that helps inform residents and directs them to the website materials for further information. The form is up to you (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 information designs 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.

Due to problematic use in prior terms of this project, you may not make use of QR codes without research supporting their use. It is recommended that you talk with your TA or instructor to ensure you have a sufficient rationale for their use.

Website expectations

The websites must be a fully-responsive website and be formed of the existing collection of materials provided by the SFU Sustainability Office — available on Canvas.

The website is expected to build upon your work from P2 and P3. There are no set number of pages required, but you should be conveying the necessary information effectively.

Due

Before your Dec 3 lab time, but you will be able to continue working on your website up until Dec 7 at 5pm.

Worth

30% of your final grade.

Instructions

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 Nov 5

  1. As a group complete the team contract — available on Canvas.
  2. As a group come up with three possible approaches for the information design. Be prepared to 'pitch' your ideas, which should include:
    • What is the form of the design? (print, motion graphic, digital display, etc)
    • Who is the primary audience for this design?
    • What will it inform the audience of?
    • How and why will it direct them to the website?
    • Initial sketches of what the design will look like
Due in your Nov 19 lab:
:D (Extra exploration):) (Keeping up):| (Tough week)
  • 3 possible information designs, articulated clearly and concisely verbally, along with initial sketches or ideation demonstrated visually for each idea (per group).
  • 1 contract, printed (per group).
  • 3 possible information designs, articulated clearly and concisely verbally (per group).
  • 1 contract, printed (per group).
  • less than 3 possible information designs, articulated somewhat clearly and concisely (per group).
  • 1 contract, printed (per group)

Starting Nov 19

This week we expect you and your group-mates will distribute the building of website pages as evenly as possible.

  1. Individually build out the HTML and CSS for each of those pages, and ensure that the HTML and CSS validates.
  2. As a group, develop your initial designs for one information design approach.
Due in your Nov 26 lab:
:D (Extra exploration):) (Keeping up):| (Tough week)
  • 1 sub-set of completed semantic and styled pages, with valid HTML5/CSS3 and cleanly formatted (per individual).
  • 1 low-to-medium fidelity initial designs for an offline engagement approach (per group). For example: initial mock-ups for posters, initial three-dimensional paper or foam renderings for physical objects, refined storyboard for motion graphics/video, etc.
  • 1 sub-set of completed semantic and styled pages, cleanly formatted (per individual).
  • 1 low-to-medium fidelity initial design for an offline engagement approach (per group). For example: initial mock-ups for posters, initial three-dimensional paper or foam renderings for physical objects, refined storyboard for motion graphics/video, etc.
  • 1 sub-set of mostly completed and styled pages, cleanly formatted (per individual).
  • 1 low fidelity initial design for an offline engagement approach (per group). For example: initial hand-sketches posters or physical objects, rough sketches of progress of a motion graphic/video, etc.

Starting Nov 26

  1. As a group, consolidate your pages into one set. Build out the responsiveness of the pages ensuring that:
    • The HTML and CSS validates.
    • There is a clean file and folder structure.
    • File naming conventions makes sense.
    • The website is functioning as expected on different devices and display sizes.
    • We can begin testing and talking about the design of the pages.
  2. As a group, refine your information design and prepare a final digital or physical copy of the designed materials (as appropriate).
  3. Put together a presentation which takes only three minutes to:
    • Explain how and why the audience would understand the information design and be directed to the website.
    • Clearly present the successes of the design using a common language.
    • Present a clear and convincing rationale for why we would use your design in a the 'real world' (outside of class).
Due in your Dec 3 lab:

The final information design, presentation, and website are due to Canvas before your Dec 3 lab time, but you will be able to continue working on your website up until Dec 7 at 5pm.

Be prepared to present in your Dec 3 lab.

Final Delivery

Final deliverables are due to Canvas before your Dec 3 lab and make sure to double-check all your submitted files to ensure they can be opened so that no late or problematic submission penalties are assigned.

Changes can be made to your websites up until Dec 7 at 5pm

The submission is:

  • 1 final presentation (PDF)
  • 1 final information design (as a physical copy or PDF)
  • 1 final responsive website (submitted as a URL in your slides)