ahandrewh teaches IAT-235information design

P2: Wireframes (due February 26)

On this page:

This document is a draft

Until January 29As a result it may still change up until January 29.

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

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

This term's context

For the projects in this course we will be working with the Makers Making Change to explore ways of helping folks in need of assistive technology to locate a device that would suit their needs.

Available on Canvas is the Assistive Technology List spreadsheet that highlights a subset of the devices available at Assistive Devices listing at Makers Making Change.

You are welcome to:

You are not integrating any of the Makers Making Change branding in this course.

Weekly instructions

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

From January 29 to February 5

The first week is about getting set up to work collaboratively and considering how do we build an effective information architecture for those visiting the site.

Please complete the following:

  1. As a group fill in, print and sign the team contract. Bring a printed copy to the next class.
  2. As a group three rows from the assistive technology list to work with for the project.
  3. This week's class will include a presentation by folks from Makers Making Change. Take notes during the presentation to help you better define:
    • The audience for your design: Who will be searching for these assistive devices?
    • The purpose of your design: How might they be searching for assistive devices?
    • Interaction considerations: What methods of searching or navigating this information may be more or less beneficial?
  4. As a group propose three options for information architectures for the site. Use information from the in-class presentation and approaches covered in "Face Reality (Chpt 3)" (this week's reading).

    The information architecture must be legible. If you spend a significant amount of time explaining the structure and intention you have not finished an information architecture. Consider how this information architecture:

    • Enables our audience to locate what they may need from the collection of assistive devices.
    • Provides alternative means of navigating the information than already used in Makers Making Change's existing Assistive Devices search engine.
    • Allows those unfamiliar with assistive devices to understand and navigate to what they may require.
Bring to your February 5 class
  • Your filled in team contract
  • Three information architecture options

We will discuss your deliverables in class.

From February 5 to February 12

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. As a group generate a set of medium-fidelity digital wireframes in Figma must be made for a mobile and desktop resolution. Other wireframe requirements:
    • Dimensions of the desktop size are 1920 pixels (wide) by 1080 pixels (tall), scrolling is permitted.
    • Dimensions of the mobile size are 320 pixels (wide) by 568 pixels (tall), scrolling is permitted.
    • Use three rows of assistive technology list content. You are permitted to reorganize and restructure the content.
    • Use only the Light, Light Italic, Regular, and Regular Italic weights of Fira Sans (these fonts are 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)
    • Include no branding such as logos.
    • Include no images, icons or illustrations (use empty boxes to indicate where they would go).
    • Link sections together as needed.
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 February 12 class

A URL to Figma wireframes that contain your mobile and desktop resolution wireframes.

We will discuss your deliverables in class.

From February 12 to February 26

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:

  • Dimensions of the desktop size are 1920 pixels (wide) by 1080 pixels (tall), scrolling is permitted.
  • Dimensions of the mobile size are 320 pixels (wide) by 568 pixels (tall), scrolling is permitted.
  • Use three rows of assistive technology list content. You are permitted to reorganize and restructure the content.
  • Use only the Light, Light Italic, Regular, and Regular Italic weights of Fira Sans (these fonts are 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)
  • Include no branding such as logos.
  • Include no images, icons or illustrations (use empty boxes to indicate where they would go).
  • Link sections together as needed.

Grading rubric

Grading for this project focuses on the final wireframes. Please email Andrew with any questions about the rubric.

A B C D/F

Teamwork (3 points):

Team contract has been completed and all weekly teamwork reflections completed (graded individually).

Team contract has been completed and one weekly teamwork reflections missing (graded individually).

Team contract has been completed and two weekly teamwork reflections missing (graded individually).

Team contract is missing and two weekly teamwork reflections missing (graded individually).

Followed the rules (1 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 (4 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 (February 26)

The final submission for P2 is a URL to your interactive wireframes for both mobile and desktop.

Your project submission is due to Canvas before your February 26 class.

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.