P1: Clarity (due October 8)
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 20% of your final grade.
This term's context
For P1, P2 and P4 we will be working with the Embark Sustainability Society to propose a more usable form for their Sustainable Project Funding Opportunities spreadsheet.
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 expected to work within Embark's branding for this project.
Weekly instructions
This project spans multiple weeks. Please read the weekly instructions carefully.
From September 17 to September 24
During this week you will generate ideas for how to organize one row of information from this term's context. 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).
- Dimensions of the mobile size are 390 pixels (wide) by 670 pixels (tall).
- Only the following colours are permitted:
- Black — 0, 0, 0 (RGB)
- White — 255, 255, 255 (RGB)
- 70% Gray — 179, 179, 179 (RGB)
- Purple — 102, 0, 255 (RGB)
- Only the attached FiraGO font (from bBox Type) or Fira Sans Light is permitted.
- Use only the content provided by the row you have chosen and the headings provided in the spreadsheet.
- You may add shapes such as lines or boxes to help clarify the hierarchy of information.
- No images or other added content may be used.
Please complete the following:
- Select one row from this term's content to work with. This row will be the one you work with for the duration of P1.
- Working with the constraints provided generate 25 desktop thumbnail sketches and 25 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.
- 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.
Bring to your September 24 lab
Please remember to follow the constraints provided.
- 25 desktop thumbnail sketches
- 25 mobile thumbnail sketches
- 3 refined desktop sketches
- 3 refined mobile sketches
From September 24 to October 1
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. You can then sign up for a free educational plan.
- 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.
- Integrate the feedback from the labs to improve the Figma designs.
Bring to your October 1 lab
Please remember to follow the constraints provided.
- 3 refined desktop layouts in Figma
- 3 refined mobile layouts in Figma
From October 1 to October 8
During this week's labs 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.
- Write a brief (max 150 word) explanation of why the finalized designs present the information well. This explanation must focus on:
- How a clear type hierarchy has been established.
- How the composition helps direct the reader.
- How space is used to help separate elements and direct attention.
Grading rubric
Please email Andrew with any questions about the rubric.
| A | B | C | D/F | |
|---|---|---|---|---|
| Exploration quality and quantity (8 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 (4 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 pts): | 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 (4 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 (2 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 (October 8)
The final submission for P1 is a Figma file containing all weeks of the project.
Your project submission is due to Canvas before your October 8 lab.
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.