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 high-fidelity wireframe, showing color, typography, and some content.
For this assignment you should wireframe at least four main screens of your web-based app (not login or language choice dialogs).
The wireframe should be added to the Design Brief section of your web site (along with the Persona and Color Palette).
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. Be sure to also share your final design with uidev@cs.stonybrook.edu, You should copy the link to your documentation and upload a screen shot of the figma page for your app (showing all frames).
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 include in your project source folder on Google Drive.
You can review examples of student wireframes here
Rubric
1. Followed the instructions:
• Wireframes were uploaded as specified above, and a link to the files was emailed to uidev@cs.stonybrook.edu.
2. Met the design criteria:
• At least 4 major screens were laid out.
• Wireframe screen layouts prioritize content, and minimize text density.
• Wireframe navigation is easy to find, but not redundant.
• White space is used effectively.
• Screen elements are appropriately labeled or annotated to reduce ambiguity about their function.
• Consistency of placement of elements, like navigation buttons or icons, from screen to screen.
• Mockup leverages look and feel developed for UI elements (logo, typography, icons, color scheme)
• Mockup has overall aesthetic appeal.
• Good technical execution (crisp edges, clean shapes, legible typography)
That’s 10 criteria, or approximately 1 point each.