Week 10 To-Do’s

Readings

Each student must individually select at least one starred item and at least one other item from this week’s reading list to read/watch. More details are available on the Information page under Deliverable 1c.

Create visual design mockups

You’ll choose the best among 3 mockups based on a design brief.

Creative Brief

Write a short (125-250 word) creative brief to guide the high level design of your mockups.

Create Mockups

1. Select a screen from your low-fidelity prototypes to mock-up.
   • The screen you select should have a range of interface elements and should not be too complex or overly “functional”. The best screens to mock-up are those where your brand and intended app experience can be clearly expressed. Often this is the main screen, a welcome screen, or an overview screen.
2. Create 3 different visual design mockups of the same screen using Figma (or similar graphic design tool).
   • All mockup variations should follow the creative brief, yet illustrate a range of styles in terms of layout, colour, typography, imagery, copy, etc.
   • Each mockup should have the same functional elements (menus, buttons, etc.) and same non-functional elements (images, copy, etc.). Each mockup can realize the element in different ways, for example an element could be hidden or shown using an interactive control.
   • Each mockup should have a logo for your app that is complementary to the rest of the design. You can use the same logo for all three mockups, or make logos specific to each design.
   • Each mockup could be created by a different team member, but only after some initial discussion to make sure each member’s design directions are suitably divergent and different.

Critique Mockups and Choose Final Design

Hold a “critique” session with your whole team to select the best design mockup. Selection should be about how well it fulfills the creative brief, the quality of the design based on design principles, and ideally some unique or exciting aspect that would make your app stand-out. In some cases you may want to combine elements of different designs or refine the best overall design using some design ideas from other mockups. But avoid creating a “Frankenstein” design that’s inconsistent.

• Create a mockup showing the refinements or combined design elements resulting from the critique session.

Design Document

Under this week’s activity, create a section called “Visual Design” with three subsections of content:

• “Creative Brief” (paste your creative brief)
• “Visual Design Mockups” (pasted image of each of the 3 original mockups with link to Figma)
• “Final Mockup”
  • pasted image of chosen mockup with any refinements
  • a short justification (125 - 250 words) why this mockup was chosen and how it uses at least 3 of the design principles discussed in lecture

Create a high-fidelity prototype

Your team will create a simple “design system” and one high-fidelity prototype using Figma. You may use other high-fidelity prototyping tools that produce similar artifacts and can be easily shared (but course staff will only support Figma for questions, help, etc.).

You should split up prototype creation among your teammates. The suggested roles are:

• 1 member can take the role of the art director and create a very simple “design system”.
• 2 to 3 other team members can take the role of graphic designers, who use to design system to create specific prototype screens, overlays, widgets, etc.
• 1 team member can be the copywriter who provides all the written content, including screen descriptions, navigation names, button names, error messages, etc.

Design System

Based on the final mockup selected from your critique, the art director leads the creation of a simple “design system” to guide the graphic designers when creating the high-fidelity protoytype.

Your Design System should include:

• primary and secondary colour palettes;
• typography styles;
• the layout grid;
• common assets like your product logo, icons, and images;
• key components like a button, navigation, and form element.

It should also include the target device for the prototype. For this class activity, you can focus on one device like web page, IOS phone, or Android phone.

The design system can simply be some example Figma elements and components organized in a clear way inside your prototype Figma file. This design system template is a good place to start, but you only need the parts I list above.

Your design system can refine the design from the final prototype if you need to, but it should not deviate too far from the visual style of the final mockup.

Create the High Fidelity Prototype

1. Use the design system and the final mockup as a guide.
2. Review your observations from the low-fidelity prototype evaluation and see where you can improve the interaction design and/or content structure.
3. The scope of the prototype should include the 2 user flows (or features) from your low-fidelity prototypes from last week (paper and wireframe).
4. Add any other necessary small features or screens to make it more complete in terms of breadth or depth. For example, error messages, alternate navigation paths, feedback messages, etc.

Design Document

Under this week’s activity, create a section called “High-Fidelity Prototype” with two subsections of content:

• “Design System” (pasted image of the “art director’s” simple design system with a link to the Figma file)
• “Prototype” (pasted images of primary prototype screens with a link to the Figma file to run the prototype)

Team meeting and design document

Conduct this week’s team meeting or discussion in and/or out of class. Update your design document with the meeting minutes and the outcomes of this week’s activities. More details are available on the Information page under Deliverable 2a.

Due next week

• Week 10 reading reflections (1c)
• Design document section #9 (2a)

---