DSGN 270

Sprint Activity 3 - Card Component Design

Weight: 10%

Due:

Late Penalty: 10% deduction for each day late. Submissions will not be accepted more than three days late.

In Figma, create a reusable card component and use it to render content for 3 different cards on a medium resolution mockup.

Instructions

  1. In figma, design a card component
  2. Use placeholder content to fill the card (image, text, title)
  3. Make sure your card follows principles of visual hierarchy
  4. Apply the card 3 times on a separate frame (using Figma’s component workflow)
  • the frame should be desktop sized with a 12 column grid
  1. Export the frame with 3 cards as a png
  2. Submit the exported frame and a link to your design space

Rubric

  • 5 points for the component design
    • demonstrates the design principles learned in class
    • paths are labelled appropriately
    • follows conventions of card design
  • 5 points for card usage
    • applied 3 times with different content in each card
    • applied in a desktop size frame using a 12 column grid

Submission Instructions

  • Export an image of your base component (naming should be something like “original-card.png”)
  • Also export a desktop sized frame that shows your component applied 3 times with unique content in each card (follow similar naming conventions but include the frame size in the title: “card-layout-1290_1080.png”)
  • Attach the two files to your submission
  • In the text box, add a link to your design space