Go back to top

Toggle Light / Dark / Auto color theme

Toggle accessibility options

Toggle page contents sidebar

DDQ THU 2023-03-14

24. Prototyping (2) & Tracing

24.1. Agenda

Released	Category	Assignment	Day	Date
2023-01-10	Term Project	Milestone 0: IRB Training	FRI	2023-01-20
2023-01-19	Paper Pres.	Register a Presentation Date	THU	2023-01-26
2023-01-19	Term Project	Milestone 1: Problem Proposal (Part 1)	FRI	2023-01-27
2023-01-19	Paper Pres.	Pick a Paper	THU	2023-02-09
2023-01-19	Term Project	Milestone 1: Problem Proposal (Part 2)	FRI	2023-02-10
2023-02-07	Exams	Prepare for Exam 1 Quiz	FRI	2023-02-10
2023-02-07	Exams	Exam 1	TUE	2023-02-14
2023-02-16	Term Project	Milestone 2: Definition & Related Work	FRI	2023-03-17
2023-03-20	Term Project	Milestone 3: Design Alternatives	FRI	2023-04-14
2023-03-28	Exams	Prepare for Exam 2 Quiz	FRI	2023-04-21
2023-03-28	Exams	Exam 2	THU	2023-04-27
2023-03-28	Term Project	Milestone 4: Prototyping & Testing	TUE	2023-05-09

1. General Announcements

2. Activity

24.2. Activity

24.2.1. Introduction

Recall that a prototype is a representation of the final product meant to simulate user interaction; that is, it is usable (e.g., clickable) to some extent and thus allows a user to experience a design via actual interactions.

24.2.1.1. Tracing Existing Designs

trace

tracing

The act or result of producing a design by superimposing design objects over an existing design or the visual aspects of a product. Tracing can be useful when a mockup or prototype involving an existing design or product is needed (e.g., when proposing a new feature or design choice).

24.2.1.2. Demo: Tracing and Wiring Apple Music

Apple Music is a music and video streaming service developed by Apple Inc. In this demo, we will attempt to approximate some of the navigation and hovering experiences in the Apple Music app under MacOS Big Sur. Please note that elements of this demo, especially those related to typography, will not strictly conform to Apple’s Human Interface Guidelines for MacOS. Also, this demo utilizes screenshots of Apple Music that may contain copyrighted material, our fair use of which may not have been specifically authorized by the copyright owners.

In this tracing demo, your instructor will cover some basics involving:

• the canvas and frames;

• design objects, cropping, and layers;

• groups, components, and component instances; and

• wiring interactions in prototype mode.

Figma Design File (Starter)

apple_music_example_starter.fig

24.3. Breakout Groups

N.A.

24.3.1. After Class

1. Before the next class period, create a followup discussion in Piazza @78 that addresses the following prompt:

   Prompt

   What aspects of prototyping are you most excited about and why?

2. Finish reading the Design module, and start reading the Practicum module.

3. Read the abstracts for upcoming paper presentations – the schedule can be found here.

4. Here is a list of current assignments:

   Released	Category	Assignment	Day	Date
   2023-01-10	Term Project	Milestone 0: IRB Training	FRI	2023-01-20
   2023-01-19	Paper Pres.	Register a Presentation Date	THU	2023-01-26
   2023-01-19	Term Project	Milestone 1: Problem Proposal (Part 1)	FRI	2023-01-27
   2023-01-19	Paper Pres.	Pick a Paper	THU	2023-02-09
   2023-01-19	Term Project	Milestone 1: Problem Proposal (Part 2)	FRI	2023-02-10
   2023-02-07	Exams	Prepare for Exam 1 Quiz	FRI	2023-02-10
   2023-02-07	Exams	Exam 1	TUE	2023-02-14
   2023-02-16	Term Project	Milestone 2: Definition & Related Work	FRI	2023-03-17
   2023-03-20	Term Project	Milestone 3: Design Alternatives	FRI	2023-04-14
   2023-03-28	Exams	Prepare for Exam 2 Quiz	FRI	2023-04-21
   2023-03-28	Exams	Exam 2	THU	2023-04-27
   2023-03-28	Term Project	Milestone 4: Prototyping & Testing	TUE	2023-05-09