Design System Exercise (due Nov 24)
On this page:
Introduction
To make sure you are ready to assemble your projects this exercise has you putting together the components of a design system as a team.
Instructions
For this week's exercise you will define the beginnings of your design system for the final project. This exercise can be done in medium-fidelity sketches, in Figma, or in code — please use the method most useful for you and your team.
As a team please complete a document that visually defines the following for P4: Design and Develop:
- The colour palette and application of each colour — i.e. #000000 for text, #00AAFF for text hyperlinks
- The typography and type hierarchy — i.e. Monserrat Bold at 4rem for h1 titles, Open Sans Regular at 1rem for body text (p, li elements)
- Two interactive elements and how they behave — i.e. the default, hovered and focused state for main navigation buttons
Your submission of a medium-fidelity sketch, Figma or published code link is due to Canvas before 8:00am on Nov 24.
Grading rubric
This exercise is worth 1% (1 point) of your final grade.
- 0.5 points for including all the requested materials.
- 0.5 points for providing visual examples of all requested materials.
Exercise rules reminder
Please remember that the exercise rules still apply:
- AI use is not permitted for code exercises. These are your opportunity to practice some of the basics we will need to progress through the course.
- You can use other online resources, course materials, your TA, and lab-mates for support. This being said, others are not allowed to do your work for you. Also, if you are drawing from online resources, course materials, your TA or peers, you must;
- Cite any knowledge that is not yours in a comment in the code. The internet is a huge repository of information and you are welcome to use it, but you must let us know when something does not originate from your own knowledge.
- If work has been copied without citation the exercise grade will be zero. Please make sure to include comments indicating where you had assistance or learned.