Create a Guide/Template: Responsible use of images on HfLA websites

[ExperimentsInHonesty]

Overview

We need a guide for image use on our open source projects so that we can ensure legal compliance, meet accessibility standards, and follow best practices for storage, attribution, and formatting. This will also help streamline contributions by developers and designers across HfLA projects.

---

Action Items

The phases in the guide-making process are listed below. Each phase displayed in blue is linked to a wiki page with instructions on how to complete that phase. Open the wiki page in a new tab, copy the instructions for each part into the section labeled 'Tasks' at the bottom of this issue, and complete each task listed.

• Gather Examples Solo
• Gather Examples Collaboratively
• Create a Guide Draft
  • If needed, create a template
• Have your guide peer reviewed
• Present your guide for leadership review

---

Resources/Instructions

• Google Drive Folder – 0105 [DRAFT] Responsible use of images on HfLA websites
• Draft Guide – Responsible use of images on HfLA websites
• Image Use on Websites Guide (New format)
• Recommended image vendors:
  • Unsplash
  • Pexels
  • The Noun Project
  • Font Awesome
  • Creative Commons search
• Reference folder: Hack for LA Social Media Icons (may be outdated; verify with HfLA website repo)
• Consider guidance for:
  • How to find images
  • Proper attribution
  • Storage standards
  • Accepted formats
  • Sizing and optimization best practices
• HfLA Credits Page
• Wiki

---

Projects to Check

• Hack for LA Websites
• UI/UX components that use images
• Accessibility & compliance resources
• Past marketing & social media design guides

---

Tasks

• Copy task instructions from each wiki phase above as you're working on it.
• Create a page mockup (assigned to UI/UX)
• Discuss and assign to HfLA developers + designers for review
• Open a feedback issue on UI/UX CoP repo
• Update the Guide Tracking Sheet with this issue

[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