This task is primarily for the Presentation Layer team member.
A mockup is a sketch of the screens you will develop in your functional prototype. They are intended to show the “look and feel” of the user interface, and to determine the scale and placement of various elements, such as text, navigation, content, controls, etc. Typically several screens are drafted, such as the start screen, main menu, content, forms, etc. You should build these screen mockups in Figma.
https://www.figma.com/
The Figma app allows for a limited amount of functionality, such as linking screens to navigation icons or menu items, or embedding hyperlinks. This provides a preview of the flow of the application.
You should add your team mates as collaborators from the Share menu, as well as the client and c4g@cs.stonybrook.edu. You should also publish the frames as pages in a pdf file and make sure to save the pdf and native .fig file to the shared Google drive. Upload the pdf file to the team website for the Design Brief presentation.
Here are some examples of student mockups, wireframes, and wireflows from previous semesters.