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 citation sheet (PDF)
  • 1 final information design (as a physical copy or PDF)
  • 1 final responsive website (submitted as a URL in your slides)

Grading Rubric

Your project will be graded on the following criteria:

Process (4 points) (5 points)

Grading Focus: Weekly deliverable checks, quantity and quality of exploration, final deliverable quality.

  • A: Deliverables demonstrate more exploration both in quantity and quality than outlined in the brief. Final deliverable is well designed and structured.
  • B: Deliverables meet the expected amount of process exploration outlined in the brief. Final deliverable is well designed and structured.
  • C: Some of the required weekly deliverables are missing. Final deliverable has some minor concerns with design or structure.
  • D/F: Numerous weekly deliverables are missing. Final deliverable has major concerns with design or structure.

Content/IA (3 points) (4 points)

Grading Focus: Flow through information, content quality and use.

  • A: In addition to achieving a 'B', the connection or flow of information between the offline and online materials helps the audience build a stronger understanding of the information itself.
  • B: There are clear and effective connections in information built between the offline and online materials. Both offline and online materials effectively illustrate information about the project topic.
  • C: There are some lapses in clarity or effectiveness in the connections in information between the offline and online materials. Offline and online materials illustrate information about the project topic in a reasonably clear fashion.
  • D/F: There is little to no clarity or effectiveness in the connections in the information between the offline and online materials. Offline and online materials do little (or do not) illustrate information about the project topic.

Final Design/UX (7 points) (8 points)

Grading Focus: Consistency, visual language, interactive elements, responsive design.

  • A: In addition to achieving a 'B', the design of the offline materials effectively helps to visually guide or direct the audience to view the online materials.
  • B: Both offline and online materials present a consistent, engaging aesthetic. Offline materials present a clear and coherent visual language. Online materials clearly cue interactive elements, and responds effectively to different devices (i.e. mobile display, desktop display).
  • C: There are some lapses in consistency within, or between, offline and online materials. Offline materials present a visual language with some lapses in clarity or coherence. Online materials somewhat clearly cue interactive elements, and responds to different devices (i.e. mobile display, desktop display) with some lapses in effectiveness.
  • D/F: There is little to no consistency within, or between, offline and online materials. Offline materials are not clear or coherent in their visual language. Online materials do not clearly cue interactive elements or respond to different devices.

Code/Development (7 points) (8 points)

Grading Focus: Code validity, code readability, cleanliness of folder structure.

  • A: Code is human readable semantic and valid HTML5 and CSS3 with absolutely no errors. File and folder structure is clean.
  • B: Code is human readable valid HTML5 and CSS3 with up to 4 minor errors (in semantics or things we have not taught you). File and folder structure is clean.
  • C: Code is human readable valid HTML5 and CSS3 with 1 major error (things we have taught you directly) and up to 4 minor errors. There are some minor concerns with the cleanliness of the file and folder structure.
  • D/F: Code is not human readable, nor valid HTML5 and CSS3 with more than 4 major errors (things we have taught you directly) and more than 8 minor errors. There are some major concerns with the cleanliness of the file and folder structure.

Presentation (4 points)

Four possible points:

  1. Completed in under 3 minutes.
  2. Effectively explains why the audience would understand the online/offline materials.
  3. Examples clearly illustrate successes of the design in lay language.
  4. Presents a clear and convincing rationale for the benefits of the design.