ah teaches information design

P4: Web

Working with the concepts and materials developed in all prior projects, you will be creating an information design and accompanying website to have people engage with the provided information.

This project is to be completed in groups of 3.

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. 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.

The website should direct those who viewed the information designs to consider 'drivers of change', specifically what they are and how they may impact Vancouver.

The website must include:

  • An explanation of what are 'drivers of change'.
  • At least two examples of what may be driving change, and how it may impact Vancouver.
  • A means of the audience responding with their thoughts on the drivers of change.

What can the information design be?

The information designs for this project 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 in the earlier projects. The website is expected to — but not required 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 Apr 9 lab time.

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.

From Mar 12 to Mar 19

  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
  3. Determine how you and your group-mates will distribute the building of website pages as evenly as possible so that each individual in the group will complete a subset of pages. Individually build out the HTML and CSS for each page of the subset, and ensure that the HTML and CSS validates.
Brought to your Mar 19 lab:
  • Three (non-related/distinct) possible directions for information designs, which are articulated clearly and concisely by the group.
  • A PDF copy of your contract per group.
  • As an individual, you have completed your subset of pages including styling. Clean formatting of the code is also present. Please upload to your filespace.
ABCD/F
  • Three (non-related/distinct) possible directions for information designs, which are articulated clearly and concisely. These directions include initial sketches or ideation shown for each idea per group.
  • A printed and signed contract per group.
  • As an individual, you have completed your subset of pages using semantically appropriate markup and they are fully styled. Valid HTML5/CSS3 and clean formatting of the code is also present.
  • Three (non-related/distinct) possible directions for information designs, which are articulated clearly and concisely by the group.
  • A printed and signed contract per group.
  • As an individual, you have completed your subset of pages including styling. Clean formatting of the code is also present.
  • Three possible directions for information designs, which are articulated somewhat clearly by the group.
  • A printed and signed contract per group.
  • As an individual, you have completed most of your subset of pages including styling. Clean formatting of the code is also present.
  • Less than three possible directions for information designs, which are articulated somewhat clearly by the group.
  • Digital or non-printed contract to submit by the group.
  • As an individual, you have completed most of your subset of pages including styling.

From Mar 19 to Mar 26

This week you will choose one of your information designs to pursue further, as well as ensure the responsiveness of your pages.

  1. Individually continue working on your subset of pages, specifically making sure that they are fully responsive. It is also good to keep ensuring that the HTML and CSS validates.
  2. As a group develop your initial designs for one information design approach.
Brought to your Mar 26 lab:
  • One initial design for an offline engagement approach per group.
  • As an individual, you have completed your subset of pages using semantically appropriate markup and is fully styled. Pages are fully responsive. Valid HTML5/CSS3 and clean formatting of the code is also present. Please upload to your filespace.
ABCD/F
  • One 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. If you are unsure what this looks like in your specific case, please contact your instructors.
  • As an individual, you have completed your subset of pages using semantically appropriate markup and is fully styled. Pages are fully responsive. Valid HTML5/CSS3 and clean formatting of the code is also present.
  • One 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. If you are unsure what this looks like in your specific case, please contact your instructors.
  • As an individual, you have completed your subset of pages using semantically appropriate markup and is fully styled. Pages are somewhat responsive. Valid HTML5/CSS3 and clean formatting of the code is also present.
  • One rough idea 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.
  • As an individual, you have completed your subset of pages including styling. Clean formatting of the code is also present.
  • One rough idea 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.
  • As an individual, you have completed your subset of pages including styling. Clean formatting of the code is also present.

From Mar 26 to Apr 2

  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).
Brought to your Apr 2 lab:
  • A demo of your website and information design.
ABCD/F
  • As an individual you arrived on time to lab.
  • As a group your website and information design are ready to demo at the beginning of lab.
  • As an individual you arrived late to lab.
  • As a group your website and information design are ready to demo at the beginning of lab.
  • As an individual you arrived on time to lab.
  • As a group your website and information design are not ready to demo at the beginning of lab.
  • As an individual you arrived late to lab.
  • As a group your website and information design are not ready to demo at the beginning of lab.

From Apr 2 to Apr 9

Having received feedback in the Apr 2 lab, work on revising all your materials for a final stand-up critique session in the Apr 9 labs. It is recommended that you take a look at the rubric to ensure you know and understand what is expected of final submissions.

Final Delivery

Final deliverables are due to Canvas before your Apr 9 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.

The submission is:

  • One citation sheet listing any resources you used (PDF).
  • One final information design (as a physical copy or digital submission).
  • One final responsive website submitted as a URL.

Grading Rubric

Your project will be graded on the following criteria:

Process (4 points)

ABCD
  • Deliverables demonstrate more exploration both in quantity and quality than outlined in the brief.
  • Final deliverable is submitted as requested.
  • Deliverables meet the expected amount of process exploration outlined in the brief.
  • Final deliverable is submitted as requested.
  • Some of the required weekly deliverables are missing.
  • Final deliverable is not submitted as requested.
  • Numerous weekly deliverables are missing.
  • Final deliverable is not submitted as requested.

Consistency (5 points) (6 points)

ABCD
  • Visual treatment of design elements — i.e. type, colour, images, layout, etc. — is consistent across all pages and resolutions of the website.
  • Hierarchy of content — not necessarily layout — is consistent between all pages and resolutions of the website.
  • The information design and website match in use of design elements — i.e. type, colour, image, layout, etc. — exceptionally well.
  • Visual treatment of design elements — i.e. type, colour, images, layout, etc. — is mostly consistent across all pages and resolutions of the website.
  • Hierarchy of content — not necessarily layout — is mostly consistent between all pages and resolutions of the website.
  • The information design and website mostly match in their use of design elements — i.e. type, colour, image, layout, etc.
  • Visual treatment of design elements — i.e. type, colour, images, layout, etc. — is mostly consistent across all pages and resolutions of the website.
  • Hierarchy of content — not necessarily layout — is inconsistent between all pages and resolutions of the website.
  • The information design and website mostly match in their use of design elements — i.e. type, colour, image, layout, etc.
  • Visual treatment of design elements — i.e. type, colour, images, layout, etc. — is inconsistent across all pages and resolutions of the website.
  • Hierarchy of content — not necessarily layout — is inconsistent between all pages and resolutions of the website.
  • The information design and website have little in common in their use of design elements.

Information Architecture (5 points) (6 points)

ABCD
  • Website is easy to understand and uses reasonable labels for headings and sections.
  • There are no concerns with the hierarchy of content — headings, subheadings, text, links, images, etc — in the information design and/or website.
  • There is an effective connection made between the information design and website — i.e. we understand and agree with how and why people would move from one to the other.
  • Website is understandable and uses reasonable labels for headings and sections.
  • There are no concerns with the hierarchy of content — headings, subheadings, text, links, images, etc — in the information design and/or website.
  • There is a reasonable connection made between the information design and website — i.e. we understand how and why people would move from one to the other.
  • Website is unclear either due to its design, or its choice of labels for headings and sections.
  • There are some concerns with the hierarchy of content — headings, subheadings, text, links, images, etc — in the information design and/or website, making it difficult to understand how to read the content.
  • There is a problematic connection made between the information design and website — i.e. there are some concerns with understanding how and why people would move from one to the other.
  • Website is confusing due to its design and/or its choice of labels for headings and sections.
  • There are significant concerns with the hierarchy of content — headings, subheadings, text, links, images, etc — in the information design and/or website, making it difficult to understand how to read the content.
  • There is little connection made between the information design and website — i.e. it is difficult to see how and why people would move from one to the other.

Design (8 points) (9 points)

ABCD
  • The layout builds a clear relationship between text, image, and interactive elements; we can see clear clusters of content.
  • Interactive elements — such as buttons or links — are always distinguishable from other content as interactive.
  • When hovered with a mouse or focused with a keyboard, interactive elements provide effective and clear visual feedback.
  • The website responds and reorganizes itself effectively to different display sizes.
  • The layout builds a clear relationship between text, image, and interactive elements; we can see clear clusters of content.
  • Interactive elements — such as buttons or links — are often distinguishable from other content as interactive.
  • When hovered with a mouse or focused with a keyboard, interactive elements provide effective and clear visual feedback.
  • The website responds and reorganizes itself effectively to different display sizes.
  • The layout builds an unclear relationships between text, image, and interactive elements, as divisions between clusters of content are unclear.
  • Interactive elements — such as buttons or links — are sometimes distinguishable from other content as interactive.
  • When hovered with a mouse or focused with a keyboard, interactive elements provide subtle or somewhat unclear visual feedback.
  • There are some cases where the website does not respond or reorganize itself effectively to different display sizes — i.e. a horizontal scroll bar appears, content does not make use of the space appropriately by stacking too many items next to one another at mobile sizes, etc.
  • The layout builds a confusing relationships between text, image, and interactive elements.
  • Interactive elements — such as buttons or links — are rarely distinguishable from other content as interactive.
  • When hovered with a mouse, interactive elements provide visual feedback.
  • There are few cases where the website responds or reorganizes itself to different display sizes.

Code (8 points) (9 points)

ABCD
  • Code is human readable.
  • Semantic and valid HTML5 is used.
  • Valid CSS3 is used.
  • There are absolutely no semantic or validation errors.
  • File and folder structure is clean and uses no spaces in names.
  • Code is human readable.
  • HTML5 is used.
  • CSS3 is used.
  • Up to four minor errors — mistakes in semantics or mistakes in things we have not taught you — may be present in the code.
  • File and folder structure is clean and uses no spaces in names.
  • Code is human readable.
  • HTML5 is used.
  • CSS3 is used.
  • Up to one major error — something we have taught you directly — and four minor errors — mistakes in semantics or mistakes in things we have not taught you — may be present in the code.
  • File and folder structure is clean and uses some spaces in names.
  • Code is human readable.
  • HTML5 is used.
  • CSS3 is used.
  • More than four major errors — something we have taught you directly — and eight minor errors — mistakes in semantics or mistakes in things we have not taught you — may be present in the code.
  • File and folder structure is not clean and uses spaces in names.