P02: Wires

Description

Given a pre-built package which includes all the information you are required to include in your wireframes, you will now be developing a series of wireframes to define a website to help citizens navigate through information on ecological footprints.

Your job in this project is to think about:

This project is to be completed in groups of 3.

Due

Before your lab time on Feb 27/28.

Worth

20% 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 Jan 30/31

  1. As a group build out one sitemap illustrating the entirety of your vision for the site. Remember that this structure should incorporate the content available from the City and should provide us with a clear understanding of:
  2. As a group, fill out the P02 Contract available on Canvas.
  3. Individually, create hand-rendered wireframes illustrating the hierarchy of each of the sections on your sitemap. There will be some areas that are common between all your pages — such as a header — but there will be some areas that change. The wireframes should:
Due in your Feb 6/7 lab:
:D (Exceeding expectations):) (Meeting expectations):| (Approaching expectations)
  • 1 complete set of medium-fidelity wireframes (per individual).
  • 1 high-fidelity sitemap, printed (per group).
  • 1 contract, printed (per group).
  • 1 complete set of medium-fidelity wireframes (per individual).
  • 1 medium-fidelity sitemap, printed (per group).
  • 1 contract, printed (per group).
  • 1 mostly complete set of medium-fidelity wireframes (per individual).
  • 1 low-fidelity sitemap, printed (per group).
  • 1 contract, printed (per group).

Starting Feb 6/7

  1. Individually generate a set of Axure wireframes illustrating how the different screens may flow from one to another on a desktop resolution (1280px wide) and on a phone resolution (320px wide). Use the "Adaptive Views" mode in Axure to switch between display sizes. It is required that these wireframes:
Due in your Feb 20/21 lab:
:D (Exceeding expectations):) (Meeting expectations):| (Approaching expectations)

1 set of wireframes, presented digitally (per individual), which:

  • Contains all of the content outlined in the sitemap.
  • Uses a consistent grid structure.
  • Demonstrates a clear hierarchy of content.
  • Information structure (not necessarily visual structure) is fairly consistent between desktop and mobile scales.
  • Cues interaction points effectively.

1 set of wireframes, presented digitally (per individual), which:

  • Contains all of the content outlined in the sitemap.
  • Uses a fairly consistent grid structure.
  • Demonstrates a fairly clear hierarchy of content.
  • Information structure (not necessarily visual structure) is somewhat consistent between desktop and mobile scales.

1 set of wireframes, presented digitally (per individual), which:

  • Contains most of the content outlined in the sitemap.
  • Uses an inconsistent grid structure.
  • Demonstrates a somewhat unclear hierarchy of content.

Starting Feb 20/21

  1. As a group create 1 finalized sitemap (PDF) based on the feedback you have received.
  2. As a group create 1 set of interactive wireframes generated to HTML and then submitted in a ZIP file. One set must be for a desktop resolution (1280px wide), while the other set must be for a phone resolution (320px wide). Use the "Adaptive Views" mode in Axure to switch between display sizes. Make note of the following rules to avoid grade deductions:

Final Delivery

Final deliverables are due to Canvas before your Feb 27/28 lab and make sure to double-check all your submitted files to ensure they can be opened. Final submission must include:

Grading Rubric

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

  1. Process: Weekly deliverable checks, quality and quantity in exploring potential design solutions. (3pts)
  2. Followed the Rules: Were the outlined rules followed. (3pts)
  3. Information Architecture: Hierarchy of information, flow through tasks, use of information. (6pts)
  4. Design: Clarity of interaction, layout and composition of the pages, sense of unity to the design. (6pts)
  5. Consistency: Consistent information hierarchy, visual language, and collapsing of structure. (6pts)