Assignment 4: High-Fidelity Prototype
DUE Thurs, Nov 7 at 11:59pm
In this assignment, you will use Figma to create a high-fidelity prototype based on your paper prototypes from Assignment 3.
We also suggest you read ahead to see what's coming up in Assignment 5 before starting on this assignment.
What to turn in
You will be turning in your final assignment in Figma using the A4 template we've set up for you.
Include the names and PIDs of all team members, or else those missing team members will get 0 points for this assignment.
Here is how we will grade this assignment, out of 10 total points:
(Note that APS counts for 30% of your grade because we want you to make something that will impress potential employers.)
Do not edit your Figma project after the due date or else it will be marked late and we cannot give you credit because of our no-late policy. If you want to make adjustments after the deadline, make a copy and edit that copy.
Details about each component
See the Nov 1 lecture slides for details, examples, and tools you can use to make these components.
You should create a complete Figma prototype containing all the screens of your app design. Each screen should be a frame with a meaningful text caption describing it. Note that all of your individual screen frames will reside within one giant frame that surrounds them all. For guidance, look at the A4 Figma template we've provided.
Since this is a high-fidelity prototype, we will be grading based on visual aesthetics, especially on how well your prototype matches the visual design of the target app that you're extending or redesigning. See lecture slides for examples of UI components, fonts, and colors that you can use.
Write-up describing your prototype: As usual, you need to justify your design decisions by addressing questions such as:
Alternative versions of 2 screens
We also want you to create alternative versions of 2 of your app's screens. Look at the Figma template for suggestions for where to place these alternatives; a good location is right next to the original versions, along with a caption. During A5, you will get feedback from your classmates on these alternative screens.
It's a good idea to pick your 2 most complex or core functionality screens here, since those will provide the greatest substance for considering alternative designs.
What counts as a good alternative? Examples include radically different UI layouts, different ways to perform similar actions, or different ways to present on-screen information. No matter what, your alternatives should look significantly different than the originals (but still match your target app's visual design aesthetics). If you have questions, talk to your TA soon!
What is a “bad” alternative? Just changing minor things like a button's location or color. If someone can't find meaningful differences at a quick glance, then that's bad.
Write-up justifying your alternative versions: Add a caption next to each of your 2 alternative screens to describe how they are meaningfully different than the originals and justify why you created them. Specifically, what do you hope to learn in A5 by getting feedback on your original and alternative versions?
OPTIONAL: How you took TA feedback into account
If you want, you can include a section describing how you took your TA's feedback into account (e.g., Figma comments on prior assignments, in-person/Piazza feedback) when creating this one. This will help jog your TA's memory when they're grading. (This section is optional and ungraded.)
OPTIONAL: Additional sections
If you want to add more sections to better explain your design process and connect design rationale to prior assignments, feel free to do so! After all, the purpose of these assignments is to build up the best case study for yourself, so anything that shows a coherent and thoughtful design process can be beneficial.