10% Of The Semester

Assignment 2 - Wireframes

Evaluation Criteria

Crazy 8's Low Fidelity Mid-fidelity

Wireframes are a crucial and important component of your project. It’s an easy and fast way to craft your design experience.

For the second assignment, students will create wireframes for their digital projects. As explained inside the wireframes lectures, two types of wireframes – low fidelity and mid-fidelity – are required.

Students must understand that you never start wireframes from scratch. Make sure to leverage all ideas and materials from your design strategy.

Crazy 8's

In Class Crazy 8's exercise for every student.

Low Fidelity

By leveraging all materials generated from your peers during the Crazy 8’s exercise, it will generate low fidelity wireframe by paper with pens (and post it for content clarification).

By using letter format, students will sketch their ideas. Make sure to focus on the big picture of the workflow such as:

• What's the core goal of the digital project and how it translates into an interface?
• Do users need an account? How can people enrol?
• Is there an onboarding experience available?
• Is there a notification centre system?
• What's and how is the main page/interface of the project?
• What's and how tasks/functions are suggested for users?

As a student, it's your responsibility to provide enough materials to fully understand your project.

Mid-fidelity

The mid-fidelity wireframe is a significantly more detailed prototype. The biggest difference is around scaling.

At the mid-fidelity level, all wireframes should be in real scale of your device/medium digitally (vectorial), done either with Sketch (strongly advised) or Adobe Illustrator.

Reminder: All mid-fidelity wireframes should be done in black and white. However, adding a gray tone pallet is highly suggested for a stronger hierarchy structure.

At this stage, mid-fidelity should focus on all design elements inside their layout canvas interface, such as:

• Navigation (primary/secondary)
• Layout skeleton
• Font size structure (display, headline, body, misc., etc.)
• Button (primary, secondary)
• Imagery (location)
• Etc...

Make sure to illustrate a specific digital experience scenario, such as various happy paths or a specific task/feature in order to get a sense of your purpose and intention.

Due October 2 - Beginning of the class

Assignement 2 Wireframe (Low and Mid Fidelity)