Add illustrations to guide cards in Toolkit page

[daniellex0]

Overview

We need to match illustrations to our guide cards on the Toolkit page so that each guide can have a unique, fitting image.

Action Items

• Select one of the guides in the full guide topics list below
• Find an illustration that matches the topic of the guide, and also matches the style of illustrations on the Hack for LA website overall
  • Choose the illustration (or illustration options) on Freepik Stories
  • Click Edit button, and then adjust the color to HfLA pink (find exact hex # on Figma)
  • Click 'download SVG'
  • Add the SVG image to the Toolkit page Figma file (in blue rectangle on bottom left) along with the guide name, link, and the following credit information because devs will need this:
    • Name: _____ (what the illustration is called on Freepik- it's usually in the URL and below the image)
    • Used in: Toolkit
    • Artist: stories
    • Provider: Freepik
    • Link to image on Freepik: _____ (must be Freepik link, not the image editing program Storyset link)
  • Add a comment on the guide's issue (linked below next to each guide listed) that says "For devs adding this guide to the Toolkit page: the guide card Illustration and image credit information is in the Toolkit page Figma file (blue rectangle on bottom left) "
    • This has to be via Figma because you can't post an svg image in a Github comment/post, and these images do have to be svg files (they will make the page load faster)
  • Note in a comment in this issue below all of the guides that you completed adding illustrations to (by adding the link to the image and the proper credits in a comment on each guide's issue), so that we can keep track of the guides that already have illustrations

Guides to find images for (check off any that you complete):

• How to assign and work on issues at HfLA (guide) - Issue # 227
• How to write a one-sheet (guide) - Issue # 74
• How to set Slack reminders (guide) - Issue # 88
• How to use images on HfLA websites (guide) - Issue Create a guide: Responsible use of images on HfLA websites #707
• How HfLA uses Github Kanban boards (guide) - Issue # 70
• Product Manager Interview (guide) -Issue # 92
• Figma for Developers (guide) - Issue # 27
• Giving Feedback on Designs (guide) - Issue # 21
• How to Present your Design Work (guide) - Issue # 23
• How to Add Screenshots and Graphics to your Guide (guide) - Issue # 92

Resources/Instructions

Toolkit page Figma file (in blue rectangle on bottom left)
Toolkit page
Credits page

[SaashaG]

Est Completion Date 6/16/21

[SaashaG]

Complete: 06/16/21
Figma link: https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=1548%3A1967
( Blue Rectangle)

[daniellex0]

Great job @SaashaG , thank you!

Notes for future volunteers that take on this issue:

• The source link should be to Freepik URL (not storyset editing site)
• The image name can be found below the image on Freepik and in the URL)

[anonymousanemone]

Complete: 6/26/21
Figma link: Toolkit page Figma file (blue rectangle on bottom left)

[daniellex0]

Great job @anonymousanemone !

[ExperimentsInHonesty]

@kristine-eudey it looks like all the related guides have images (they are checked off), what are the next steps on this?

[ExperimentsInHonesty]

Bonnie will close this issue and make a new one (putting in icebox) to revisit the toolkit page once we have some finished guide.