ah teaches information design

P2: Wireframes

Given the materials developed and collected as part of the first project, you will now be developing a series of wireframes for a website. This website should invite an audience unfamiliar with the 'drivers of change' to consider what they are and how they may impact Vancouver. The website should not try to convince them of a particular opinion or stance on the topic.

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.

This project is to be completed in groups of 3.

Due

Before your lab time on Feb 27.

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.

From Jan 30 to Feb 6

  1. As a group build out one sitemap illustrating the structure of the site. The contents of the sitemap 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. This can make use of your P1 work if you would like.
    • A means of the audience responding with their thoughts on the drivers of change.

    The sitemap should illustrate:

    • The hierarchy of sections.
    • The linking between sections.
    • The main headings within each section.
  2. As a group, fill out the P2 Contract.
  3. Individually create hand-sketched wireframes illustrating each section on your sitemap. For each section generate two possible layout options. The wireframes should:
    • Use a consistent grid structure.
    • Show us the hierachy of content.
    • Show us the layout of content.
    • Show us both desktop and mobile sizing.
    • Be at most 4cm wide.
    • Extend downwards to illustrate content as needed.
Brought to your Feb 6 lab:
ABCD
  • Three different layout options for all sections as medium-fidelity wireframes for desktop and mobile, graded individually.A set of desktop and mobile wireframes showing some basics type hierarchy and image content
  • A printed medium-fidelity sitemap per group.A sitemap illustrating the sections, heading and linking between sections of a website
  • A printed and signed contract per group.
  • Two different layout options for all sections as medium-fidelity wireframes for desktop and mobile, graded individually.A set of desktop and mobile wireframes showing some basics type hierarchy and image content
  • A printed medium-fidelity sitemap per group.A sitemap illustrating the sections, heading and linking between sections of a website
  • A printed and signed contract per group.
  • All sections as medium-fidelity wireframes for desktop and mobile, graded individually.A set of desktop and mobile wireframes showing some basics type hierarchy and image content
  • A printed low-fidelity sitemap per group.A sitemap illustrating the sections and linking between sections of a website
  • A printed and signed contract per group.
  • All sections as low-fidelity wireframes for desktop and/or mobile, graded individually.A set of desktop and mobile wireframes showing some basics of layout
  • A low-fidelity sitemap per group (not printed).A sitemap illustrating the sections and linking between sections of a website
  • Digital or non-printed contract to submit.

From Feb 6 to Feb 13

Individually generate a set of digital wireframes illustrating the different sections of the site and how they link to one another.

These wireframes must be made for a desktop resolution of 1280 pixels wide and a mobile resolution of 320 pixels wide. Other requirements of the wireframes:

  • Use a consistent grid structure.
  • Show the hierarchy of content.
  • Show the layout of content.
  • Include no branding such as logos or colours associating the wireframes to a company or organization.
  • Write your own text or use/rewrite the content provided for headings, links, and captions.
  • Only longer passages of text such as paragraphs may use placeholder text (i.e. Lorem Ipsum).
  • Use only one font but with different sizes and/or weights and styles (i.e. bold or italic).
  • Link sections together as outlined in your sitemap.
  • Either includes images or boxes with a comment of what the image would be.
Bring to your Feb 13 lab:
ABCD

All sections as digital wireframes for desktop and mobile, graded individually. In addition to following the rules listed:

  • Make effective use of a consistent grid structure.
  • Demonstrate a clear hierarchy of content.
  • Hierarchy of content — not necessarily layout — is consistent between desktop and mobile wireframes.
  • Interactive elements — such as buttons or links — clearly indicate they are interactive.

All sections as digital wireframes for desktop and mobile, graded individually. In addition to following the rules listed:

  • Make effective use of a consistent grid structure.
  • Demonstrate a clear hierarchy of content.

All sections as digital wireframes for desktop and mobile, graded individually.

All sections as digital wireframes for desktop or mobile, graded individually.

From Feb 13 to Feb 27

  1. As a group create a finalized sitemap that shows the structure of your final submission.
  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 desktop and mobile wireframes in the package. Make sure to have followed the rules:
    • Use a consistent grid structure.
    • Show the hierarchy of content.
    • Show the layout of content.
    • Include no branding such as logos or colours associating the wireframes to a company or organization.
    • Write your own text or use/rewrite the content provided for headings, links, and captions.
    • Only longer passages of text such as paragraphs may use placeholder text (i.e. Lorem Ipsum).
    • Use only one font but with different sizes and/or weights and styles (i.e. bold or italic).
    • Link sections together as outlined in your sitemap.
    • Either includes images or boxes with a comment of what the image would be.

Final Delivery

Final deliverables are due to Canvas before your Feb 27 lab. 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
  • 1 final set of wireframes, for desktop and mobile resolutions (submitted as a URL or a ZIP)

Please note that we will not accept working files — for example Adobe XD (.xd) or Axure (.rp) files — as a final submission.

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.

Followed the Rules (3 points)

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

  • Use a consistent grid structure.
  • Show the hierarchy of content.
  • Show the layout of content.
  • Include no branding such as logos or colours associating the wireframes to a company or organization.
  • Write your own text or use/rewrite the content provided for headings, links, and captions.
  • Only longer passages of text such as paragraphs may use placeholder text (i.e. Lorem Ipsum).
  • Use only one font but with different sizes and/or weights and styles (i.e. bold or italic).
  • Link sections together as outlined in your sitemap.
  • Either includes images or boxes with a comment of what the image would be.

Grades assigned:

  • A: All rules followed.
  • B: Up to two rules not followed.
  • C: Up to three rules not followed.
  • D/F: Four or more rules not followed.

Information Architecture (6 points)

ABCD
  • Sitemap 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 wireframes.
  • The sitemap and the wireframes match in structure exactly.
  • Sitemap 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 wireframes.
  • The sitemap and the wireframes mostly match in structure.
  • Sitemap 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 wireframes, making it difficult to understand the order in which to interpret content.
  • The sitemap and the wireframes mostly match in structure.
  • Sitemap 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 wireframes, making it difficult to understand how to read the page.
  • The sitemap and the wireframes have little structure in common.

Design (6 points)

ABCD
A wireframe illustrating the description that follows
  • There are no concerns with the use of grids which establish an effective layout.
  • 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.
A wireframe illustrating the description that follows
  • There are a few concerns with the use of grids, but they still establish an effective layout.
  • 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.
A wireframe illustrating the description that follows
  • There are many concerns with the use of grids which makes a somewhat understandable layout.
  • 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.
A wireframe illustrating the description that follows
  • There is little-to-no use of grids which hinders the understandability of the layout.
  • 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.

Consistency (6 points)

ABCD
  • Visual treatment of elements — headings, links, buttons — is consistent across all desktop and mobile wireframes.
  • Hierarchy of content — not necessarily layout — is consistent between desktop and mobile wireframes.
  • Visual treatment of elements — headings, links, buttons — is mostly consistent across all desktop and mobile wireframes.
  • Hierarchy of content — not necessarily layout — is mostly consistent between desktop and mobile wireframes.
  • Visual treatment of elements — headings, links, buttons — is mostly consistent across all desktop and mobile wireframes.
  • Hierarchy of content — not necessarily layout — is inconsistent between desktop and mobile wireframes.
  • Visual treatment of elements — headings, links, buttons — is inconsistent across all desktop and mobile wireframes.
  • Hierarchy of content — not necessarily layout — is inconsistent between desktop and mobile wireframes.