ah teaches information design

P2: Wires

Given the updated package of information from the SFU Sustainability Office — available on Canvas — you will now be developing a series of wireframes for a website. This website should help 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.

This project is to be completed in groups of 3.

Due

Before your lab time on Oct 29.

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 Oct 1

  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 provided, and should give us a clear understanding of:
    • What is this site about?
    • Who is this site for?
    • The hierarchy of sections.
    • The linking between sections.
    • The overall relationship of sections within the site.
  2. As a group, fill out the P2 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:
    • Use a clear grid structure.
    • Help us see the hierarchy of the different sections.
    • Show what different sections may exist.
    • The basic aesthetics of the sections.
    • Sketch for both a desktop and mobile sizing.
Due in your Oct 15 lab:
:D (Extra exploration):) (Keeping up):| (Tough week)
  • 1 complete set of medium-fidelity wireframes, for both mobile and desktop (per individual).
  • 1 high-fidelity sitemap, printed (per group).
  • 1 contract, printed (per group).
  • 1 complete set of medium-fidelity wireframes, for only mobile or desktop (per individual).
  • 1 medium-fidelity sitemap, printed (per group).
  • 1 contract, printed (per group).
  • 1 mostly complete set of medium-fidelity wireframes, for only mobile or desktop (per individual).
  • 1 low-fidelity sitemap, printed (per group).
  • 1 contract, printed (per group).

Starting Oct 15

Individually generate a set of digital wireframes illustrating how the different screens may flow from one to another. These wireframes must be made for a desktop resolution of 1280px wide and a mobile resolution of 320px wide. Other requirements of the wireframes:

  • Must use a clear grid structure.
  • Use only the real content as provided on Canvas
  • Illustrate interaction points, and use actual text for headings and labels.
  • Demonstrate clearly the hierarchy of content.
  • Include no branded elements (no logos, or colours for 'branding' purposes).
  • Use only different weights of Verdana or another generic sans-serif font.
  • Do not use real images, only place a box with a note as to what kind of image you intend to place there.
  • Link pages together as outlined in your sitemap.
Due in your Oct 22 lab:
:D (Extra exploration):) (Keeping up):| (Tough week)

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 Oct 22

  1. As a group create a finalized sitemap as a PDF based on the feedback you have received.
  2. As a group create a final set of interactive wireframes which are submitted either as a URL that we can access from another machine, or a package of HTML files that have been zipped together. There must be a set of desktop wireframes (1280px wide) and a set of mobile wireframes (320px wide). Make sure to have followed the rules:
    • Must use a clear grid structure.
    • Use only the real content as provided on Canvas
    • Illustrate interaction points, and use actual text for headings and labels.
    • Demonstrate clearly the hierarchy of content.
    • Include no branded elements (no logos, or colours for 'branding' purposes).
    • Use only different weights of Verdana or another generic sans-serif font.
    • Do not use real images, only place a box with a note as to what kind of image you intend to place there.
    • Link pages together as outlined in your sitemap.

Final Delivery

Final deliverables are due to Canvas before your Oct 29 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:

  • 1 finalized sitemap (PDF)
  • 1 final set of wireframes, for desktop and phone resolutions (submitted as a URL or a ZIP)

Please note that we will not accept working files as a final submission.

Grading Rubric

Your project will be graded on the following criteria:

Process (4 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.

Followed the Rules (3 points)

Grading Focus: Following the rules defined for the wireframes in the project.

  • Must use a clear grid structure.
  • Use only the real content as provided on Canvas
  • Illustrate interaction points, and use actual text for headings and labels.
  • Demonstrate clearly the hierarchy of content.
  • Include no branded elements (no logos, or colours for 'branding' purposes).
  • Use only different weights of Verdana or another generic sans-serif font.
  • Do not use real images, only place a box with a note as to what kind of image you intend to place there.
  • Link pages together as outlined in your sitemap.

Grades assigned:

  • A: All rules followed.
  • B: Up to one rule not followed.
  • C: Up to three rules not followed.
  • D/F: Five or more rules not followed.

Information Architecture (6 points)

Grading Focus: Hierarchy of information, flow through structure, use of information.

  • A: In addition to achieving a 'B', sitemap and wireframes effectively show how to deal with different devices and alternative routes through the information (i.e. multiple IA structures are used in combination effectively).
  • B: Sitemap illustrates a clear and consistent hierarchy of information, with wireframes presenting information effectively in the flow through the information.
  • C: Sitemap illustrates a hierarchy of information with some concerns of clarity and consistency, and, or, wireframes have some information presentation concerns in the flow through the information.
  • D/F: Sitemap is lacking in hierarchy, clarity and consistency and the presentation of information in the wireframes leads to a confusing flow through the information.

Design (6 points)

Grading Focus: Clarity of interaction, layout and composition of the pages, sense of unity to the design.

  • A: In addition to achieving a 'B', the design leverages interaction and design elements to help the user move through the given information more efficiently or easily (i.e. effective consideration of context in the design).
  • B: Design actively works with the grid structure and other design elements to create a clear sense of interaction points, unity and balance to the overall design.
  • C: There are some minor concerns with the use of the grid structure and other design elements which somewhat hinders the clarity of interaction points and overall unity to the design.
  • D/F: There are major concerns with the use of the grid structure and other design elements which significantly hinders the clarity of interaction points and overall unity to the design.

Consistency (6 points)

Grading Focus: Consistent information hierarchy, visual language, and collapsing of structur.

  • A: In addition to achieving a 'B', the design demonstrates consistency in how it helps users navigate through the sections and information.
  • B: There is consistency in and visual language of the design between different device scales (i.e. mobile vs desktop).
  • C: There are some concerns with the consistency of the visual language of the design between different device scales.
  • D/F: There are significant concerns with the consistency of the visual language of the design between, and, within the different device scales.