DSGN 270 Assignment 5 - Figma Prototype

• Due: March 22
• Weight: 20%

Scenario

Your job is to build a prototype of a website for the developers on your team. This prototype needs to show how navigation between 3 pages will work, and how the page will scale to mobile.

In order to improve your developer speed, you will also use a figma plugin to export either tailwind or css styles.

The goal of this is to establish a sense of style and consistent movement around the page. Content can be all placeholder. The important detail is to create an easy to follow design.

Instructions

• In Figma, create a mockup of a landing page and 2 other web page for the same site.
• Create a design system for your:
  • fonts
  • colors
• Create figma components for reusable ui elements (cards, buttons, panels)
• Add prototyping for site navigation
• Add add prototyping for one feature of your website (can be a button animation or other)

---

Marking Criteria

This assignment will be marked out of 20 points, which will be given for each of the following:

Mockup Design: 10 points

• Use of whitespace
• Positioning of Elements
• Consistent color scheme
• Effective visual hierarchy
• Home Page
• Other page 1
• Other page 2

Prototype: 5 points

• Consistent flow of navigation
• No dead ends (user cannot get trapped)
• Special Prototype functionality

General: 5 points

• Readme includes:
  • Design Concept notes (why you made the design choices that you made)
  • Troubleshooting notes

---

Submission Instructions

In order to receive a grade:

1. Submit your assignment as a repo named dsgn270-a4, with:
   • The text of your assignment saved in a README.md file in the root of your project;
   • Your name, course title and assignment title at the top of the page
   • Exported pdfs of your design's frames saved in a folder called assets/mockups
2. Zip your assignment and submit it to Brightspace.
   • In the text box of your submission you must add a viewable link to your design
     • If you do not do this, you will receive a 0 for the prototype component of the assignment
3. As a comment to your submission, include:
   • a link to your GitHub repo;