ah teaches information design (P1: Clarity)

P1: Clarity (due January 29)

On this page:

Introduction
This term's context
Weekly instructions
From January 8 to January 15
From January 15 to January 22
From January 22 to January 29
Grading rubric
Final submission requirements (January 29)

Introduction

Being able to explore and develop different ways of representing hierarchies of information are integral to good information design. This project has you exploring process while generating meaningful hierarchies of information using specific constraints.

This project is completed individually.

P1: Clarity is worth 10% 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:

Organize or reorganize the content to create hierarchies you believe are most usable.
Re-label or re-write link text and headings for clarity.

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 8 to January 15

During this week you will generate ideas for how to organize one row of information from this term's dataset. There are a very specific set of constraints for this week of the project to help focus on working with type and composition:

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.
Only the following colours are permitted:
- Black — 0, 0, 0 (RGB)
- White — 255, 255, 255 (RGB)
- 70% Gray — 77, 77, 77 (RGB)
- Blue — 80,80,255 (RGB) or #5050FF (HEX)
Only the Fira Sans font in the Light weight is permitted (this font is already available in Figma). No bold, italicized, stretched, drop-shadowed or underlined text permitted.
Use only the content provided by the row you have chosen and the headings provided in the spreadsheet.
There is no use of any shapes, lines, dots, colour fills or additional illustrated elements.
No images or other added content may be used.

Please complete the following:

Select one row from this term's dataset to work with. This row will be the one you work with for the duration of P1.
Working with the constraints provided generate 15 desktop thumbnail sketches and 15 mobile thumbnail sketches to explore different ways of organizing the information. These sketches need to explore different ideas, not small variations on the same idea. Please explore:
- How to establish a clear type hierarchy.
- How to compose all the text to direct the reader through the information.
- How to use space to help separate and focus attention.
A sample set of thumbnail sketches. Note that sketches can be done in 'pairs' or without desktop/mobile layouts feeling related.
Select three of your desktop thumbnail sketches and three of your mobile thumbnail sketches. For each of the sketches selected create a refined version. These refined versions will:
- Still be rendered by hand.
- Show the treatment of type used.
- Show the use of colours.
- Use the actual text provided.
A sample 'refined' sketch using the provided text (except for the paragraph).

Bring to your January 15 class

Please remember to follow the constraints provided.

15 desktop thumbnail sketches
15 mobile thumbnail sketches
3 refined desktop sketches
3 refined mobile sketches

From January 15 to January 22

During this week's labs you will receive feedback on your project materials and continue to refine and work on your ideas, converting them into a digital form.

Please complete the following:

Create a new account with Figma using your SFU email address.
Working in a new design file in Figma recreate your three refined desktop sketches and three refined mobile sketches. Please remember to follow the constraints provided.

Bring to your January 22 class

Please remember to follow the constraints provided.

3 refined desktop layouts in Figma
3 refined mobile layouts in Figma

From January 22 to January 29

During this week's class you will receive feedback on your digital versions and further refine and finalize them.

Please complete the following:

Select one desktop layout and one mobile layout to finalize. With these two layouts:
- Consider how the hierarchies of information can appear similar.
- Ensure the visual language used in both appears consistent.
- Ensure no information is lost in either the mobile or desktop scale.
Collect all your prior week's materials into your Figma file. Please spend time organizing all the materials so that we can easily navigate each week of your project. This will likely include:
- Adding headings or directional aids to your Figma file.
- Moving around different sketches or designs to ensure they can be easily found.
- Providing little text notes (if needed) to help us navigate.
A sample of how you may structure the deliverables collecting all process for the project. Include any additional ideation or process materials.

Grading rubric

Please email Andrew with any questions about the rubric.

	A	B	C	D/F
Exploration quality and quantity (3 pts)	The quantity of layout options are more than required and exploring very different ideas across the entire process.	The quantity of layout options are the same as required and explore different ideas across the entire process.	The quantity of layout options are less than required or explore similar ideas across the entire process.	The quantity of layout options are significantly less than required and/or explore significantly similar ideas across the entire process.
Clear design (3 pts):	The final designs use scale and layout effectively to make the hierarchy very easily understood at both desktop and mobile scales.	The final designs use scale and layout somewhat effectively — the use of scale or layout sometimes may confuse the viewer — to make the hierarchy understandable at both desktop and mobile scales.	The final designs use scale and layout for some effective hierarchy — there are concerns with use of scale or layout confusing the viewer at either desktop or mobile scale — at either desktop or mobile scales.	The final designs use scale and layout ineffectively — it is confusing or unclear for the viewer in what order things are meant to be read or understood — making for a confusing hierachy at both desktop and mobile scales.
Responsive design (2 pt):	In addition to achieving a 'B', the hierarchy of content remains consistent between desktop and mobile devices in the final designs.	Content sizing in the final designs is appropriate — legible titles/images, readable body text size — for mobile devices.	Content sizing in the final designs is somewhat appropriate — some concerns with legibility of titles/images or with readability of body text — for mobile devices.	Content sizing in the final designs is not appropriate — many concerns with legibility of titles/images or with readability of body text — for mobile devices.
Followed the constraints (1 pts)	All constraints — dimensions, colour, text, and font — have been followed in the final designs.		One constraint — dimensions, colour, text, or font — has not been followed in the final designs.	Two or more constraints — dimensions, colour, text, and/or font — have not been followed in the final designs.
Polish (1 pts)	Headings, layout, and structure in the submission are used effectively to provide a clear overview of the process.		Headings, layout, and structure in the submission are used somewhat effectively to provide an understandable overview of the process.	Headings, layout, and structure are in the submission are used ineffectively, and provide a difficult to understand overview of the process.

Final submission requirements (January 29)

The final submission for P1 is a Figma file containing all weeks of the project.

Your project submission is due to Canvas before your January 29 class.

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