Create a guide: Responsible use of images on HfLA websites

[ExperimentsInHonesty]

Overview

We need a guide for image use on on our open source projects so that we can be in compliance and use best practices.

Action Items

• PM
  • fill out rest of issue to dos
• Research and write about
  • Where to find image
  • How to do attribution
  • storing images
  • image formats
  • sizing best practices
• Discuss and assign to HfLA developers + designers for feedback
  • Give Feedback on this: Guide
• Open Issue on UI/UX Communities of Practice repo for feedback
• UI/UX
  • mock up page
  • This guide issue needs to be updated on our Guide Tracking sheet

Resources/Instructions

Wiki
Guide
Unsplash
Pexels
the noun project
Font Awesome
to create book covers
Hack for LA Social Media Icons
Credits page
Creative Commons Image List on Google <- replace dog with what you are searching for

[ahdithebomb]

Chatted with @jbubar & @daniellen00 this week to gather initial information. We will conduct additional research to finalize the following sections.

• Image Formats
• Sizing Best Practices

Overall first pass of the guide to be completed in 2 weeks with mock-ups.

[ahdithebomb]

Link to the guide
Guide

[ahdithebomb]

Progress: Got directions from @ExperimentsInHonesty on what overall improvements need to be made.
Blocks: N/A
Availability: I Will coordinate with @daniellen00 and make necessary updates.
ETA: End of this upcoming week.

[ahdithebomb]

The same updates apply as of Sunday.

[ahdithebomb]

Progress: Added some screenshots & @daniellen00 added some more commentary about image types.
Blocks: Not sure where to place the md instructions in the team wiki.
Availability: I Will coordinate with @daniellen00 and make necessary updates.
ETA: End of this upcoming week.

[ahdithebomb]

Progress: I added the MD instructions to the wiki.
Blocks: Need to coordinate with Cynthia to finalize last section, and we need to add some prototypes.
Availability: I Will coordinate with @daniellen00 and make necessary updates.
ETA: End of this upcoming week.

[ahdithebomb]

Progress: The first draft is mostly complete with mockups/images.
Blocks: Waiting on feedback from @ExperimentsInHonesty for our first pass.
Availability: I Will coordinate with @daniellen00 and make necessary updates.
ETA: End of this upcoming week, I will also ping @jbubar to get more insights into file compression.

[ahdithebomb]

Progress: Same as last week
Blocks: Need team's feedback to determine whether the guide makes/doesn't make sense.
Availability: I Will coordinate with @daniellen00 and make necessary updates.
ETA: TBD

[ahdithebomb]

Progress: Same as last week
Blocks: We need more assignees to take a look at this!
Availability: Depending on when assignees have time to provide feedback.
ETA: TBD

[ahdithebomb]

Progress: Same as last week
Blocks: We need more assignees to take a look at this!
Availability: Depending on when assignees have time to provide feedback.
ETA: TBD

[ExperimentsInHonesty]

@ruqpyL2 @daniellex0 Please put the guide in this format: https://docs.google.com/document/d/1-8gmeC-wnfM8C8fVvmTP1BLA2WfNjKH_XJrHB1OAV6Q/edit#heading=h.8kycsl8g2y4x

[ExperimentsInHonesty]

@daniellex0 and @ExperimentsInHonesty will review during weekly meeting

[Olivia-Chiong]

hey @daniellex0 and @ruqpyL2 is someone reformatting this guide? Could I get an update please?

Please update the following

• Progress: How much progress have you made on the issue?
• Blocks: Are you facing any blockers?
• Availability: How much time do you have to work on it this week?
• ETA: When do you think it will be completed?

[daniellex0]

@Olivia-Chiong This is actually finished! It just needs final review by @ExperimentsInHonesty or whoever is interested/qualified to provide final review (there have already been lots of reviews before, and their feedback was incoporated):

https://docs.google.com/document/d/1w9EIJYe-HL5dVbTnp8dTiyOM_KDR9VH8RBM77bR30Co/edit

[daniellex0]

Progress: Guide was reviewed and approved- I just need to move around some of the sections per feedback and it will be ready.
Blocks: None
ETA: Tue

[SaashaG]

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)

Illustration name: Image Upload
Link: https://www.freepik.com/free-vector/image-upload-illustration-concept_6193746.htm#page=1&query=image%20upload&position=5