DSGN 270 Assignment 4 - Figma Mockup

Due: March 2
Weight: 20%

Scenario

You have been hired to build a website and need to do a quick mockup of the homepage to provide a proof of concept to your client. In order to provide a good development experience for yourself going forward, you will create a design sytem and export css styles from your mockup.

The page can be on any topic that you like.

Instructions

In Figma, create a mockup of a landing page
Create a design system for your:
- fonts
- colors
- shadow
Create figma components for any reusable ui elements (cards, buttons, panels) -- you need at least 1 component
Export your styles to css or tailwind

Marking Criteria

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

Mockup Design: 5 points

Use of whitespace
Positioning of Elements
Consistent color scheme
Effective visual hierarchy
5 sections of content (header, footer, nav, and two others)

Design System & Components: 5 points

All colors and fonts are applied using a design sytem
repeated patterns are figma components
Exported css files from design

Submission Instructions

In order to receive a grade:

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
- Exported design system files inside assets/css
Zip your assignment and submit it to Brightspace.
- In the text box of your submission you must add a viewable link to your design
As a comment to your submission, include:
- a link to your GitHub repo;