ahandrewh teaches IAT-235information design

P3: Wireframes (due Nov. 4)

On this page:

This is old content

Andrew is not currently teaching IAT-235. This material is left online for reference only.

Introduction

Wireframing is a means by which we start to explore the structuring of information and content in digital, interactive contexts. This project provides you with context for a website and asks you to think about how to structure and lay out the content on mobile and desktop platforms.

This project is completed in teams of two or three.

P3: Wireframes is worth 25% of your final grade.

This term's context

For both P3 and P4 we will be working with the City of Vancouver to propose an alternative to the School Active Travel website. This alternative website should update the School Active Travel Program webpage to improve school/student/teacher/parent awareness of program offerings.

As part of this project you are provided with a set of content for the website. You are welcome to:

You are not expected to work within the City of Vancouver's branding, and are requested not to use their logos as part of your site. There is a City of Vancouver content style guide available if of use.

Weekly instructions

This project spans multiple weeks. Please read the weekly instructions carefully.

From Oct. 14 to Oct. 21

The first week is about getting set up to work collaboratively online, as well as to learn the basics of Figma — our wireframing tool for the term.

Please complete the following:

  1. As a group review our 'collaboration expectations'. Available on Canvas is a quiz explaining our collaboration for the project and what you can expect as a result. Please indicate whether you agree or not to these expectations, and if not, an alternative context for you to work on the project with will be provided to you.
  2. As a group fill in the team contract. There is a quiz on Canvas for filling out the contract. It must be submitted by each individual, but we expect you will submit the same answers to the questions between team members.
  3. If unfamiliar with Figma, please complete the Figma Basics online tutorial. This tutorial will cover from setting up an account and building out your first file.
  4. Individually sign-up for the educational plan with Figma. This will allow you to have access to some features that will make working remotely with your groupmates easier.
  5. As a group sketch an information architecture for the website. Working through the provided content and thinking about the context, propose an information architecture that you believe would work best for the site.
  6. Based on the information architecture, individually create low-fidelity hand-sketched wireframes. For each section of the architecture generate two possible layout options — for example if you propose four sections, we expect eight sketches. 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.
    7. A pair of hand-rendered wireframes, one for mobile and one for desktop scale

    A sample of low-fidelity wireframes showing both the mobile and desktop sizing with additional content extending "below the fold" as needed.

Bring to your Oct. 21 lab
  • A sketch of an information architecture
  • A set of hand rendered wireframes

We will discuss your deliverables in lab.

From Oct. 21 to Oct. 28

In this week you will be generating wireframes in Figma. They should illustrate the different sections of the website and how they link together.

Please complete the following:

  1. Considering the feedback from the prior labs, as a group write down a set of guidelines and rationale that will direct your wireframes. These guidelines and rationale should communicate approaches you will take to resolve the design problem. This may include:
    • Audience-specific considerations
    • Layout or hierarchy considerations
    • Content focus
  2. Individually generate a set of medium-fidelity digital wireframes in Figma must be made for a mobile resolution of 320 pixels wide and desktop resolution of 1280 pixels wide. Other wireframe requirements:
    • Use only the provided text from this link. You are permitted to reorganize and restructure the content as appropriate.
    • Use only the Regular, Italic, Bold, and Bold Italic weights of Roboto (this font is already available in Figma).
    • Only permitted are the following colours:
      • Black — 0,0,0 (RGB) or #000000 (HEX)
      • White — 255,255,255 (RGB) or #FFFFFF (HEX)
      • Dark gray — 77,77,77 (RGB) or #4D4D4D (HEX)
      • Light gray — 179,179,179 (RGB) or #B3B3B3 (HEX)
      • Blue — 80,80,255 (RGB) or #5050FF (HEX)
    • Use a consistent grid structure.
    • Show the hierarchy of content.
    • Show the layout of content.
    • Link sections together as needed.
    • Use hash-boxes to indicate where images would go.
A mobile scale wireframe next to a desktop scale wireframe in Figma showing columns structures and content layout

A sample of a medium-fidelity mobile and desktop wireframe in Figma. Your own structure and layout should explore different ideas than the image above.

Bring to your Oct. 28 lab
  • A list of guidelines and rationale
  • A URL to Figma wireframes that contain your mobile and desktop resolution wireframes

We will discuss your deliverables in lab.

From Oct. 28 to Nov. 4

Working with the feedback you have received, as a group create a final set of interactive wireframes for mobile and desktop sizes. Make sure to have followed the rules:

  • Use only the provided text from this link. You are permitted to reorganize and restructure the content as appropriate.
  • Use only the Regular, Italic, Bold, and Bold Italic weights of Roboto (this font is already available in Figma).
  • Only permitted are the following colours:
    • Black — 0,0,0 (RGB) or #000000 (HEX)
    • White — 255,255,255 (RGB) or #FFFFFF (HEX)
    • Dark gray — 77,77,77 (RGB) or #4D4D4D (HEX)
    • Light gray — 179,179,179 (RGB) or #B3B3B3 (HEX)
    • Blue — 80,80,255 (RGB) or #5050FF (HEX)
  • Use a consistent grid structure.
  • Show the hierarchy of content.
  • Show the layout of content.
  • Link sections together as needed.
  • Use hash-boxes to indicate where images would go.

Grading rubric

Grading for this project focuses on process and the presentation of process. Please email Andrew with any questions about the rubric.

A B C D/F

Team contract (1 point):

Team contract has been completed.

Team contract has not been completed.

Followed the rules (4 points):

All rules — detailed in the project — are followed.

Up to two rules — detailed in the project — are not followed.

Up to three rules — detailed in the project — are not followed.

Four or more rules — detailed in the project — are not followed.

Design (10 points):

  • 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.
  • 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.
  • 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.
  • 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 (4 points):

Visual treatment of elements — headings, links, buttons — is consistent across all desktop and mobile wireframes.

Visual treatment of elements — headings, links, buttons — is mostly consistent across all desktop and mobile wireframes.

Visual treatment of elements — headings, links, buttons — is inconsistent across some desktop and mobile wireframes.

Visual treatment of elements — headings, links, buttons — is inconsistent across all desktop and mobile wireframes.

Grids (3 points):

There are no concerns with the use of grids which establish an effective layout.

There are a few concerns with the use of grids, but they still establish an effective layout.

There are many concerns with the use of grids which makes a somewhat understandable layout.

There is little-to-no use of grids which hinders the understandability of the layout.

Responsive design (3 points):

  • Content effectively reorganizes between mobile and desktop.
  • Text sizing is always appropriate for mobile and desktop.
  • Content effectively reorganizes between mobile and desktop.
  • Text sizing is mostly appropriate for mobile and desktop.
  • Content reorganizes somewhat between mobile and desktop.
  • Text sizing is mostly not appropriate for mobile and desktop.
  • Content does not reorganize, or reorganizes very poorly between mobile and desktop.
  • Text sizing is not appropriate for mobile and desktop.

Final submission requirements (Nov. 4)

The final submission for P3 is:

Your project submission is due to Canvas before your Nov. 4 lab.

Please make sure double-check all your submitted files and URLs to ensure they can be opened. We want to avoid late or problematic submission penalties whenever possible.