Wireframes 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 pages, a shopping cart, etc. This assignment calls for a medium-fidelity wireframe, showing color, typography, and some content.
For this assignment you should prototype four main screens of your web-based app (not login or language choice dialogs).
You can develop your prototype online at https://www.figma.com/ or you can download the app locally at https://www.figma.com/downloads/
In either case, you should make backups of your prototype using Figma > File > Save local copy... found in the upper left corner of the editor window. You will be able to share the prototype using the blue "Share" button in the upper right corner of the editor. Copy the link into the comment field of the Brightspace submission page.
Text should be legible, and navigation and functions must be well labeled and understandable. Ideally the app should have a "look and feel" that is attractive, and reflects both your client and their constituents, as defined in your research. Using graphics and/or photos, not just text, can help to tell the story.
You can explore how to use Figma with beginner tutorials at https://help.figma.com/hc/en-us/sections/4405269443991-Figma-for-Beginners-tutorial-4-parts-
You should also export the frames as a pdf file (using File > Export Frames to PDF) to upload to the Brightspace submission page, and move the .fig file to your term project folder on Google drive.
Rubric
1) Wireframes were uploaded as specified above, and a link to the prototype was included in the comment field on the Brightspace submission page
2) At least 4 major screens were laid out.
3) Wireframe screen layouts prioritize content, and minimize text density.
4) Wireframe navigation is easy to find, but not redundant.
5) White space is used effectively.
6) Screen elements are appropriately labeled or annotated to reduce ambiguity about their function.
7) Consistency of placement of elements, like navigation buttons or icons, from screen to screen.
8) Mockup leverages look and feel developed for UI elements (logo, typography, icons, color scheme)
9) Mockup has overall aesthetic appeal.
10) Good technical execution (crisp edges, clean shapes, legible typography)
That’s 10 criteria, or approximately 1 point each.